Webflow MCP: connect an AI agent to your site

The Webflow MCP server is a layer that connects an AI agent (Claude, Cursor, Windsurf, Claude Code) directly to a Webflow project. The agent can read, build, and modify a site using natural language instructions, without manually going through the visual interface. MCP stands for Model Context Protocol: a standardized protocol that allows language models to interact with external tools. Since v1.2, the MCP supports raw HTML injection converted to native Webflow elements, structured DOM queries, components with slots, over 500 CSS properties, and custom variables. Concrete use cases cover accelerated section building, prototyping, structure audits, CMS modifications, and landing page variants. The limitations are real: the agent does not replace a Webflow developer, does not know Client-First by default, and result quality depends on prompt quality. AI is an accelerator, not a substitute for expertise.

The integration of AI into web production tools is accelerating, and Webflow is at the forefront. With its official MCP server, launched in early 2026, the platform now allows connecting an AI agent directly to a Webflow project. The agent can read the site structure, create elements, apply styles, manage components, and modify content, all through natural language instructions.

The Webflow MCP (Model Context Protocol) is not a chatbot built into the Designer or an automatic site generation feature. It is a technical layer that gives a language model like Claude structured access to Webflow's APIs. This means the agent can interact with the project contextually: it understands the page structure, the CSS classes in use, the existing components, and can act accordingly. This is fundamentally different from copy-pasting AI-generated code into an embed.

This article is a complete guide to the Webflow MCP: what it is, what it concretely enables, how to install it, the relevant use cases for an agency, a marketing team, or a solo developer, and the limitations to know before integrating it into your workflow. It complements our existing articles on the Webflow + Claude MCP connector and the connector practical guide by covering the latest v1.2 features and a deeper analysis of use cases.

‍

What is the Webflow MCP server?

MCP stands for Model Context Protocol. It is a standardized protocol, developed by Anthropic, that allows language models (LLMs) to interact with external tools in a structured and secure way. Concretely, MCP gives an AI agent like Claude the "hands" to act within a third-party tool, instead of simply generating text or code that the user then has to copy-paste manually.

The Webflow MCP server is the official implementation of this protocol for Webflow. It connects an AI agent directly to a Webflow project and gives it the ability to read the site structure, create and modify elements, apply CSS styles, manage components, and manipulate variables. The agent works directly within the Webflow project, not in a separate environment. Webflow is one of the first web creation tools to offer an official MCP server, making it a concrete testing ground for integrating AI into web production workflows.

In short, the Webflow MCP server is a technical layer that connects an AI agent to a Webflow project. The agent can read, build, and modify the site via natural language instructions, without going through the Designer's visual interface. It works with Claude, Cursor, Windsurf, and Claude Code.

‍

What the Webflow MCP enables

The MCP does not just generate code. It gives the AI agent direct access to the Webflow project, with the ability to act across multiple dimensions.

Create and modify elements

The agent can create elements directly on a Webflow page: sections, containers, text blocks, images, buttons, links. It can also modify existing elements: change a heading's text, replace an image, add an alt attribute, restructure a section. Each action is performed in the real context of the project, not in a simulated environment. The result is immediately visible in the Designer.

Apply CSS styles

Since v1.2, the agent supports over 500 CSS properties. It can modify colors, typography, margins, paddings, positioning, dimensions, borders, shadows, and visual effects. Unsupported properties now fail with an explicit error message, which allows the agent to adapt instead of producing a silently incorrect result. This extended CSS coverage makes the MCP usable for complex styling tasks, not just basic element placement.

Manage components and slots

The agent can create reusable Webflow components, define slots (variable content placeholders), fill them, and assemble complete pages from existing components. The v1.2 removed the 3-level depth limit that existed in previous versions, allowing complex structures to be built in a single call. This is particularly useful for assembling content pages from an existing component library.

Query the page structure

Structured DOM queries allow the agent to filter page elements by type, class, HTML tag, attribute, or text content. Results are returned as a structured tree (not a flat list), which gives the agent cleaner context with less noise. This feature is what makes structure audits possible: the agent can analyze the entire page, identify inconsistencies, and produce a structured diagnosis.

Inject raw HTML

Since v1.2, the agent can inject raw HTML that is automatically converted to native Webflow elements. The agent no longer needs to build the page node by node: it can generate a complete HTML block and transpose it directly into Webflow. This feature considerably speeds up the construction of complex sections and rapid prototyping.

Manage variables and the design system

The agent can create, read, rename, and delete custom variables in Webflow (colors, spacing). Search by name, type, or collection ID is supported. The calc() and color-mix() functions are available, allowing programmatic manipulation of variables. This is a lever for applying or modifying a design system consistently across the entire project.

‍

What is new in v1.2

Version 1.2 of the Webflow MCP server brings concrete improvements that significantly expand what is possible. Here is a summary of the main updates and what they change in practice.

These improvements make the MCP usable for real production tasks, not just experimentation. Raw HTML injection and components with slots eliminate the main friction points that limited previous versions. Structured DOM queries turn structure audits into a fast, reliable operation. And the MCP Bridge App provides the visibility needed to understand what the agent is doing and catch errors in real time.

‍

How to install the Webflow MCP

Installing the Webflow MCP is straightforward and does not require development skills. Here are the steps for the most accessible configuration: Claude Desktop.

1) Check the prerequisites

Two prerequisites are needed. The first is Node.js version 22.3.0 minimum, installed on your machine. The second is a Webflow account with at least one accessible site. If you do not have an account yet, our article on Webflow pricing in 2026 details the plans and their features.

2) Install on Claude Desktop

Open Claude Desktop, click the + button then select "Add connectors." Search for the Webflow connector in the list. Click "Connect" and authorize access to the Webflow account via the OAuth authentication window that opens. Select the sites or workspaces you want to connect, then click "Authorize App." The connection is established in a few clicks, with no technical configuration needed.

3) Configure in the Webflow Designer

Once the connection is established on the Claude side, open the Webflow Designer on the connected site. Open the Apps panel (accessible via the E key) and launch the Webflow MCP Bridge App. This application acts as the bridge between the AI agent and the Designer. Wait for the MCP server connection to be confirmed (a status indicator in the Bridge App signals this). Once connected, you can start giving instructions to Claude in the conversation, and the agent will act directly in the Designer.

4) Other compatible clients

The Webflow MCP also works with Cursor, Windsurf, and Claude Code. Each client has its own configuration instructions, available in the official Webflow MCP server documentation. Manual installation is also possible via the webflow-mcp-server NPM package for custom configurations.

5) Automatic updates

If the MCP server is already installed, the update to v1.2 is automatic. There is no manual migration to perform. The new features (raw HTML, DOM queries, components with slots, variables) are available immediately after the update.

‍

Concrete use cases

The Webflow MCP is useful in specific contexts, when tasks are repetitive, structured, or exploratory. Here are the most relevant use cases by profile type.

For a Webflow agency

The MCP accelerates the construction of sections and components in production projects. Instead of manually building each element in the Designer, the developer can describe the structure in natural language and let the agent create it. This is particularly useful for rapid layout prototyping: testing multiple arrangements in a few minutes instead of spending an hour in the Designer. DOM queries turn structure audits into a fast operation, which is valuable when taking over an existing project built by another provider.

Applying style modifications in bulk is another concrete use case. Modifying typography or spacing across all sections of a site via agent instructions is faster than doing it manually section by section. For agencies managing multiple projects simultaneously, this time savings accumulates significantly.

For a marketing team

The MCP allows tech-savvy marketing teams to modify content, adjust text, and create landing page variants without going through a developer for every change. The agent can also audit a site's SEO tags (meta titles, meta descriptions, alt attributes) and identify problematic pages. For teams running campaigns with multiple landing pages, the ability to quickly duplicate and adapt a page is a concrete efficiency gain. Our Webflow SEO checklist complements this approach by covering all verification points.

For a solo developer

For a solo developer, the MCP is an accelerator on repetitive tasks: creating recurring components, applying styles across multiple elements, exploring and understanding the structure of a site you are taking over. It is also a learning tool: asking the agent to build a layout and observing the result in the Designer helps understand how Webflow structures elements, which is useful for developers new to the platform.

‍

What the MCP does not do (yet)

The Webflow MCP is a powerful tool, but its limitations are real and must be understood to avoid disappointments and production errors.

The first limitation is that the AI agent does not replace a Webflow developer. It can build elements and apply styles, but it does not make strategic decisions about site architecture, user journeys, design systems, or information hierarchy. The result always requires human review: checking responsive on all breakpoints, CSS class structure, technical SEO, and accessibility. A site built entirely by an AI agent without human supervision is a site that works on the surface but has quality issues as soon as you look closely.

The second limitation is that the agent does not know the Client-First methodology by default. It creates CSS classes with generic names that follow no structured naming convention. To get Client-First compatible code, you must explicitly instruct the agent in the prompt, with naming rules, utility classes to use, and conventions to follow. This prompt engineering work requires good knowledge of Client-First to be effective.

The third limitation concerns the CMS. While the agent can modify content via APIs, the complete configuration of collections (field creation, type definitions, dynamic page template construction) remains partially manual in some cases. Complex Webflow interactions and animations (scroll-driven timelines, chained animations, conditional interactions) are not yet well supported via MCP.

The fourth limitation, and perhaps the most important, is that result quality depends directly on prompt quality. Vague instructions produce a mediocre result. Precise instructions with clear context, explicit constraints, and concrete examples produce a usable result. Prompt engineering is not a trivial skill: it requires knowing how to formulate technical instructions in a structured way, which often comes down to knowing exactly what you want the agent to do, which requires the same skills as doing it yourself.

AI connected via MCP is an accelerator, not a substitute for expertise. It reduces time on construction tasks, but does not replace strategy, design, methodology, and quality control.

‍

Webflow MCP and production workflow: what changes

The question is no longer "can AI help in Webflow?" but "how to integrate these tools into a production workflow without compromising quality?" AI agents connected via MCP concretely change the way work is done on several fronts.

Prototyping is the activity that benefits most from the MCP. Testing a layout idea, exploring a page structure, quickly creating a draft version of a section to present to the client: tasks that took dozens of minutes in the Designer can be completed in a few exchanges with the agent. This is not production code (responsive and structure will need to be reworked manually), but it is a thinking and communication tool that accelerates the design phases.

Building repetitive sections is another concrete lever. When a project includes 10 content pages following the same template, describing the structure to the agent and letting it assemble the pages is faster than doing it manually in the Designer. Structure audits also benefit from DOM queries: scanning a 30-page site to identify class inconsistencies, poorly structured tags, or orphan elements is a task the agent can perform in minutes.

However, what remains irreducibly human in the workflow is considerable. Content strategy and positioning. Design and visual identity. Client-First methodology and code structuring. SEO (keyword strategy, internal linking, optimized content). Quality control (responsive, performance, accessibility). Client training and support. These skills are not automatable because they require judgment, experience, and an understanding of the project's business context.

At BeBranded, we integrate AI tools into our production workflow as accelerators on construction and audit tasks, while maintaining Client-First methodology, quality control, and client support as non-negotiable pillars. AI allows us to spend less time on "how to build" and more time on "what to build and why." You can see concrete examples of this approach in our portfolio.

‍

Checklist: getting started with the Webflow MCP

1. Verify that Node.js version 22.3.0 or higher is installed on your machine.
2. Have a Webflow account with at least one accessible site and the necessary permissions.
3. Install the Webflow connector in Claude Desktop (or configure the MCP server in Cursor, Windsurf, or Claude Code).
4. Authorize OAuth access to the Webflow account and select the sites to connect.
5. Open the Webflow Designer and launch the MCP Bridge App from the Apps panel (E key).
6. Verify that the connection is established (status indicator in the Bridge App).
7. Start with simple tasks to get familiar with the tool: create a section, modify text, apply a style.
8. Formulate precise prompts with context, constraints, and examples. Avoid vague instructions.
9. Always verify the result in the Designer: responsive, class structure, HTML tags, accessibility.
10. If you use Client-First, explicitly instruct the agent on naming conventions and utility classes to use.
11. Use the MCP Bridge App to view real-time logs and detect errors.
12. Do not publish the agent's modifications without human review. The MCP is a construction tool, not an automatic publishing tool.

‍

Conclusion

The Webflow MCP server is a concrete tool that changes the way work is done on Webflow. It allows connecting an AI agent directly to the project to accelerate section building, prototyping, structure audits, and style modifications. The v1.2 brings features that make it usable in production: raw HTML injection, structured DOM queries, components with slots, 500+ CSS properties, and custom variables.

The limitations are real and must be integrated into the workflow: the agent does not replace a developer, does not know Client-First by default, and result quality depends on prompt quality. AI is an accelerator that reduces time on construction and exploration tasks, but strategy, design, methodology, and quality control remain non-substitutable human skills.

For more detailed coverage of the connector in the context of use with Claude, our articles on the Webflow + Claude MCP connector and the connector practical guide complement this guide.

If you want to integrate AI tools into your Webflow workflow while maintaining a professional quality level (Client-First, SEO, responsive, quality control), you can get in touch with us for an initial conversation. We will start from your needs to define how these tools concretely fit into your project.