Webflow MCP: How to Connect Claude to Webflow (2026 Setup Guide)
Key Takeaways+
- Webflow MCP connects AI agents to your sites through Webflow's APIs, using the server at mcp.webflow.com/mcp.
- It's available on all Site plans, including Starter, and doesn't use Webflow AI credits.
- Claude connects through the Webflow connector. Claude Code connects with one
claude mcp addcommand. - MCP 2.0, launched July 21, 2026, removed the need for the Bridge App for most tasks and added Agent Instructions, analytics and governance.
- Agents can only do what your Webflow role allows, and their changes show in the site activity log.
- It can't create new sites, edit Classic interactions or create new localized CMS items.
Webflow MCP is Webflow's official Model Context Protocol server. It lets AI tools like Claude read and change your Webflow sites through plain-language prompts. You connect it in about 5 minutes: add the Webflow connector in Claude (or run one command in Claude Code), pick the sites Claude can access, then start prompting. It works on every Site plan, including the free Starter plan.
At Dscvred Studio, we're a Certified Webflow Partner, and we build AI automation alongside Webflow sites. This guide covers Webflow MCP setup for Claude, the prompts to start with, where it falls short, and how to use it safely on a live site.
What Is Webflow MCP?
It's a remote server that turns your prompts into Webflow API calls. You ask Claude to do something, the server runs the matching API calls on your site, and Claude gets the result back. Webflow's developer docs describe it as built on Webflow's APIs, exposed as tools an agent can use.
MCP (Model Context Protocol) is the open standard that lets AI tools connect to outside apps. The Webflow MCP server works with Claude, ChatGPT, Gemini, Codex, Grok Build, Postman and Slack, plus any other tool that supports MCP.
What can Webflow MCP do?
What changed in MCP 2.0?
Webflow launched MCP 2.0 on July 21, 2026. It removed the Bridge App requirement for most tasks and expanded analytics and governance. Later updates added GSAP interactions, Webflow Cloud support, additional analytics data and live agent presence. The practical change: most site work can run without an open Designer session.
How to Connect Webflow MCP to Claude
A basic connection can take about 5 minutes if your accounts are ready. You need a Webflow account with at least one accessible site and a site role other than Reviewer. Claude Code users also need the CLI installed.
Claude desktop and claude.ai
- In a Claude chat, click +, then Add connectors.
- Search for Webflow. You may need to switch from Featured to All.
- Click the Webflow connector, then Connect.
- Log in to Webflow and grant Claude access.
- Choose one Workspace and select only the sites Claude needs, then click Authorize App.
To connect manually instead, add a custom connector with the URL https://mcp.webflow.com/mcp.
Claude Code
Run this command, then start Claude Code:
Start Claude Code, type /mcp and select the Webflow server to authorize your sites. For agency work, use the project-scoped command below from the client’s project folder. Reload Claude Code after adding the configuration, authenticate that server, and ask it to list the sites it can access. Project configuration does not replace checking the authorized sites, as Webflow’s Claude Code setup guide notes.
Do you need the Bridge App?
The Bridge App is required for visual element snapshots, image uploads and actions that depend on the current Designer selection, page, mode, branch, canvas or breakpoints. Open the site in the Designer, launch the MCP Bridge App from the Apps panel, and keep it connected for those tasks. Most design and CMS work runs without the Designer open.
Webflow MCP Prompts to Start With
The best prompts name the site, the page or Collection, and the exact change. Start with read-only prompts, check the answers, then move to edits.
The examples below adapt Webflow’s starter prompts to make the target and scope explicit. Replace [site name] with your authorized site. An approval instruction tells the agent when to pause; it is not a separate permission boundary. CMS prompts also depend on a clear Collection structure, so plan your Webflow CMS Collections first.
Webflow MCP Limitations
The MCP server can't do everything you can do in the Designer. These are the limits Webflow lists in its docs:
- No new sites: create the site in the Webflow dashboard first.
- One Workspace per authorization: to switch, reconnect. In Claude, that means removing and reinstalling the connector.
- Classic interactions: agents can only build and edit interactions made with GSAP.
- Localization: it can update existing localized content but can't create new localized CMS items.
- CMS settings: confirm that the exact binding or display setting you need is supported before including it in a bulk task.
- Fonts: it manages uploaded font files only, not Google or Adobe Fonts.
- Analytics: it can read Analyze, Optimize and AEO data but not change it.
How to Use Webflow MCP Safely on a Live Site
The server enforces your existing Webflow permissions. An agent can only do what your role allows in the Designer. That makes setup choices the main safety control.
- Authorize only the sites you're working on. Webflow recommends this for security and performance.
- Ask for a preview before bulk edits: approve a small first batch, and tell the agent not to publish.
- Use page branches on Enterprise plans, so agents work in isolation before changes merge.
- Check the site activity log. MCP changes are recorded with AI attribution, showing who prompted what.
- Add Agent Instructions. Store brand voice, component rules and CMS guidelines on the site, so every connected agent gets the same context.
- Review changes in the Designer: check changed items and responsive layouts. If you need a staging preview, publish only to the staging domain, check it, then approve production publishing yourself.
Example workflow: fill missing blog meta descriptions
This is an illustrative workflow you can follow on your own site, not a report of a completed client test. Connect only the site you intend to update.
- Inspect first: “On [site name], list the first five Blog Posts items with an empty SEO description field. Show each item ID, title, slug and current value. Make no changes.”
- Draft next: “For those five items, use the article content to propose a unique meta description of about 140–155 characters. Show the item ID, existing value and proposed value. Flag missing article content. Wait for approval; do not write or publish.”
- Apply only after review: “Update only the five approved item IDs with the exact approved descriptions. Do not change any other field or publish. Report each successful update and any errors.”
- Verify the values in the CMS, confirm that the Collection template uses that field for its SEO description, and check the rendered metadata on staging before production publishing. Keep the item IDs and original values so you can restore them if needed.
For fintech, finance and healthcare teams, this is the part to get right first. Teams that handle client or patient data should also keep that data out of prompts.
Webflow MCP Troubleshooting
Claude cannot see the site
Ask Claude to list its accessible sites. Check the Webflow account, selected Workspace, site permissions and authorization. Each authorization covers one Workspace. If you need a different one, reauthorize; connector-based clients may require removing and reinstalling the connector.
A task needs the Designer
For visual snapshots or canvas-dependent actions, open the correct site in the Designer and launch the MCP Bridge App. Wait for it to connect and keep it open while the task runs. Reconnecting the server alone does not provide a live Designer session.
Claude Code shows the wrong sites
Reload Claude Code after changing the project configuration. In /mcp, select the project-specific Webflow server and authenticate it. Ask it to list accessible sites before making edits. If the list includes another client’s site, correct the authorization before continuing.
Only some items were updated
Ask for the successful and failed item IDs and error messages. Compare them with the approved batch before retrying. Retry only failed items after resolving the reported problem, then verify the CMS values directly.
Webflow AI vs Webflow MCP
Webflow AI is the assistant built into Webflow. Webflow MCP connects outside AI tools, like Claude, to your site. Both can use the same Agent Instructions.
How Dscvred Studio Can Help With Webflow MCP
We set up Webflow MCP for teams that want AI to handle routine site work: connecting Claude, writing Agent Instructions for your brand and components, and building safe workflows for CMS updates and SEO fixes. See our AI automation services, or book an intro call to plan your setup.
FAQ
Does Webflow have an MCP?
Yes. Webflow runs an official MCP server at mcp.webflow.com/mcp. It connects Claude, ChatGPT, Gemini and other MCP tools to your Webflow sites.
Is Webflow MCP free?
Yes. It's available on all Site plans, including the free Starter plan, and doesn't use Webflow AI credits. Usage counts toward your AI tool's plan instead.
How do you connect Webflow MCP to Claude?
Add the Webflow connector in Claude, or run claude mcp add --transport http webflow https://mcp.webflow.com/mcp in Claude Code. Then log in to Webflow and choose which sites Claude can access.
Do I need the Webflow Designer open?
No, for most tasks. Visual element snapshots, image uploads and actions tied to the live Designer canvas require the Designer open with the MCP Bridge App connected. Most other design and CMS tasks work without it.
