How to use Claude Code with a Webflow site

Claude Code works with Webflow mainly through Webflow's official MCP server, not through files. Webflow hosts your site, so there is no folder of templates for Claude to edit. Instead, Claude Code connects to the server at mcp.webflow.com, and through it can read and change pages, styles, components, CMS items, SEO settings and custom code, within the permissions your Webflow account already has. For code you own, such as React components exported from Webflow or apps on Webflow Cloud, Claude Code works the normal way, on files in a git repository.

That makes Webflow a different job from WordPress or Shopify. The risk isn't a bad file push. It's an agent making many small Designer changes that then go live together the next time someone publishes. This guide covers the tools Webflow documents as of October 2026, how to set them up in Claude Code, and a workflow that keeps a person in charge of what ships.

Four ways Claude Code can work with Webflow

Pick the route by what you're changing. A sensible split is the MCP server for site work and git for any code you own.

A fifth route, the Data API, is what the MCP server is built on. You'd only call it directly from a custom script. Its rate limits run by site plan: 60 requests per minute on Starter and Basic, 120 on CMS, Ecommerce and Business, and one successful site publish per minute, according to Webflow's rate limits page.

Setting up the Webflow MCP server in Claude Code

MCP (Model Context Protocol) is an open standard that lets Claude call tools in another system. Webflow's server is remote and uses OAuth, so you don't store an API key on your machine. The steps below follow Webflow's Claude Code install page.

1. Make a folder for this site. It doesn't need any site code. It holds the Claude Code configuration, and your CLAUDE.md with rules for the site.
2. Add the server at project scope. Run claude mcp add --transport http webflow https://mcp.webflow.com/mcp -s project in that folder, as Webflow suggests. Project scope writes the entry to a .mcp.json file in the folder (no password goes in it, since sign-in is OAuth), so another folder can hold access to a different site. Claude Code's default local scope also keeps a server to one folder, just privately.
3. Restart Claude Code and run /mcp. Select the Webflow server. Your browser opens Webflow's authorization page, where you choose which sites to allow. This also installs the MCP Bridge App on those sites.
4. Grant the fewest sites you can. Webflow says each authorization covers a single workspace. Pick only the site you're working on.
5. Check the scope. Ask Claude to list the sites and CMS collections it can see. If it sees more than you intended, remove the server and authorize again.

The Bridge App matters only for a few features that need a live Designer session, such as visual snapshots of elements and reading the current page or breakpoint. Webflow says most of the server's work runs through the Data API without it.

One trap: Webflow's developer docs show a second address, developers.webflow.com/_mcp/server, in a footer aimed at AI clients. That server answers questions about Webflow's documentation. It doesn't connect to your sites. For site work, use mcp.webflow.com/mcp, as the install page and Webflow's how it works page say.

What the MCP server can and can't do

Webflow's overview lists a wide set of tools: building layouts, elements, classes, components and GSAP-based interactions; managing CMS collections and items; bulk-updating page settings and schema markup; controlling sitemap inclusion; updating meta titles, descriptions and Open Graph tags; reading and writing site and page custom code; and content audits for broken links, missing alt text and outdated information. With the optional Webflow Analyze add-on, it can also read traffic data.

Webflow also documents clear limits, as of October 2026:

• Classic interactions aren't supported. Only Interactions with GSAP. On a site still using Classic, the agent sees no interactions at all.
• No new localized CMS items. It can read and update existing items in secondary locales but can't create new ones.
• No access changes. It can't add users or assign roles.
• Page branches need an Enterprise plan. Branches let you work on a page in isolation and merge it later.
• No secret values. For Webflow Cloud apps, the server never accepts or returns secret environment variables. Set those yourself with the Webflow CLI.

Webflow doesn't put a beta or GA label on the server. Treat the tool list as something that changes, and re-check the overview page before a big job.

Publishing is the moment that matters

When Claude changes a page, a style or the site's custom code through the API, the change waits in Webflow until someone publishes. Webflow's custom code docs put it plainly: "Publishing pushes all staged site changes live, so prompt users to publish when they're ready rather than publishing automatically on their behalf." That advice is written for app developers, and it applies even more to an AI agent.

So the safe pattern looks like this:

• Tell Claude in CLAUDE.md never to publish the site, then back it with ask rules. An ask rule makes Claude Code stop and ask before a tool runs. Webflow groups actions into tools: publish_site is an action of data_sites_tool, and publishing CMS items is an action of data_cms_tool. Claude Code rules match whole tools, so ask rules on mcp__webflow__data_sites_tool and mcp__webflow__data_cms_tool mean a prompt before every site or CMS call, publishing included. Our guide to MCP servers for website teams covers rule scoping.
• Read the site activity log after each session. It records what the agent changed and when. This is your stand-in for a git diff.
• Preview before publishing. Look at every changed page in Webflow, on desktop and mobile, before anyone presses Publish.
• Use Agent Instructions. Webflow lets each site carry its own rules for agents, such as which classes or variables to use. The server hands them to any connected agent.

Anthropic doesn't security-audit or manage MCP servers, and Webflow's server acts with your account's permissions. Connect with a Webflow account whose role fits the job. For the wider safety setup, read whether Claude Code is safe for a live website.

Good jobs for Claude Code on Webflow

Notice the pattern: report first, then apply after approval. Webflow's own example prompt for a site audit ends with "fix what you can automatically." That's fine on a test site. On a real business site, ask for the report and approve fixes in batches. Our step-by-step guide to title and meta rewrites covers the review loop.

DevLink Export and the Webflow CLI

If your team designs in Webflow but builds an app or marketing site in React, DevLink is the bridge. Webflow describes it as a way to "export Webflow designs directly to React." The flow is one way: you update the design system in Webflow, then export the changes to your codebase. From there, Claude Code works on the generated components like any other code, on a branch, with a diff you review.

• Install the CLI. npm install -g @webflow/webflow-cli, which needs Node.js 22.13.0 or higher, then webflow auth login.
• Export. webflow devlink export writes the components into your project. DevLink Export needs CLI v1.19.0 or later.
• Know the limits. Per Webflow's DevLink quick start, only components are exported, not every element on the canvas. Webflow's DevLink setup reference adds that React 18 is the minimum for exported components.

The CLI login is stored in a file in your home folder that every project on your machine shares. Keep it out of anything Claude reads or commits; our guide to keeping secrets away from Claude Code shows how to block reads of credential files. If the exported components feed a Next.js site, see Claude Code for Next.js sites for the setup on that side.

Code export and leaving Webflow

Webflow's code export gives you HTML, CSS, JavaScript and assets, but only on paid Workspace plans. Site plans don't include it. Webflow's help center says CMS content, User Accounts, Ecommerce data, code components and localized content aren't included, and site search and forms don't work on exported sites.

So an export is a starting point for a rebuild, not a working copy of your site. If you're weighing a move, Claude Code can help inventory pages and CMS collections through the MCP server, plan redirects and rebuild templates, but people should decide whether a move is worth it. Our comparison of WordPress and Webflow covers the platform choice.

When not to use Claude Code on Webflow

• One-off visual tweaks. Changing a button color is faster in the Designer than in a prompt.
• Sites built with Classic interactions where interactions are the work. The agent can't see them.
• Anything nobody will review. If no one previews changes before publish, an agent's mistakes go live with everything else.
• Owners who'd rather click. Claude Code pays off on repetitive, many-page work.

If you're deciding between a builder and a coded site in the first place, see Claude Code vs website builders.

Conclusion

Use Claude Code on Webflow for the work that's tedious in the Designer: audits, SEO fields across many pages, CMS cleanup and component code you own. Connect the official MCP server at project scope with the fewest sites allowed, ask for reports before fixes, read the activity log, and keep publishing a human decision, because one publish sends every staged change live. If you'd like a team to set this up or handle the build, see our Claude Code development services. More guides are in our Claude Code Guide.

Frequently asked questions