How to Connect Claude to Webflow With the Webflow MCP Server

SiddikNovember 2, 2026

Webflow has an official MCP server now. Connect it to Claude and you can ask, in plain English, for jobs that used to mean an afternoon of clicking: fill in every missing meta description, write alt text for two hundred images, restructure a CMS collection, find the broken links. Claude makes the change through Webflow's own APIs, with your permissions, and every edit shows up in the site's activity log.

I've written about why MCP changed the way I build. This post is the practical half: how to connect it, what it can and can't do, and the guardrails I'd set before letting it touch a live client site.

How I build websites fast with Claude and MCP

What the Webflow MCP server is

MCP (the Model Context Protocol) is an open standard for handing an AI assistant real tools instead of copy-paste. Webflow runs its MCP server remotely at https://mcp.webflow.com/mcp. You sign in with OAuth, pick the sites Claude may touch, and from then on Claude can call Webflow's Data API, and a live Designer session when you open one, on your behalf. There's no API key to paste anywhere and no local server to keep running.

Two details matter more than they look. The server enforces your Webflow role, so an agent can only do what you could do yourself in the Designer. And every change it makes lands in the site's activity log, so nothing happens out of sight.

What it can do, and what it can't

What the Webflow MCP server can do
Topic	What Claude can do	Watch out for
CMS	Create collections and fields, bulk-create and update items, publish and unpublish them	It can't create new localized CMS items, only update existing ones in secondary locales
Pages & SEO	Create pages, bulk-update page settings, meta titles, descriptions, Open Graph tags, schema markup and sitemap inclusion	All of this works with Webflow closed
Build	Elements, classes and combo classes, components with props, variants and slots, variables	Snapshots and canvas work need the Designer open
Interactions	Create and edit Interactions with GSAP	Classic interactions are invisible to it
Assets & fonts	Organise assets, compress images to WebP or AVIF, upload custom font files	Image uploads need the Bridge App; Google and Adobe fonts stay in site settings
Code & admin	Site and page custom code, form submissions, comment threads	Team admin needs an Enterprise workspace
Analytics	Traffic, top pages, scroll depth, goals, Optimize and AEO results	Only on sites with the paid Analyze, Optimize or AEO add-ons

Two hard limits to know up front. It can't create a new Webflow project, so make the site in the dashboard first. And each authorization covers one workspace: to switch, you remove the connector and add it again.

Which Claude should you connect?

Claude (web or desktop app): the easiest route. Webflow is a built-in connector, so there's no config file. Best for content, SEO and CMS work.
Claude Code: the better fit if you also write custom code, keep a repo next to the site, or want to script jobs you run on every project. One terminal command.
Other MCP clients can connect to the same server URL by hand. Webflow's docs also cover ChatGPT, Postman and Slack.

Step 1: Check you can authorize the site

Only site owners and admins can authorize the MCP server. If your sites appear greyed out on the permission screen, that's the reason: ask the owner for admin access, or have them connect it. Decide which workspace you're connecting too, because one authorization covers one workspace.

Step 2: Add the Webflow connector in Claude

In a Claude chat, click the + button, choose Add connectors and search for Webflow (switch the filter from Featured to All if it doesn't show up). Click Connect, log in to Webflow, select the sites and workspace Claude may access, then click Authorize App. That's the whole install. The MCP Bridge App is added to the authorized sites automatically during this step.

Prefer to set it up by hand? Add a custom connector in Claude's settings with the server URL https://mcp.webflow.com/mcp. Webflow also runs a beta server at https://mcp.webflow.com/beta/mcp for early-access tools. I keep client work on the production one.

Step 3: Or connect it to Claude Code

In your terminal, add the server over HTTP, start Claude Code and authenticate the Webflow server from the /mcp menu. A browser window opens with the same OAuth screen as above.

Terminal

claude mcp add --transport http webflow https://mcp.webflow.com/mcp
claude
# then, inside Claude Code:
/mcp

Working across several client sites? Add -s project to that command and give each server a client name. The connection is then scoped to that project folder, so each repo talks to its own Webflow site.

Step 4: Open the Bridge App when you need the Designer

Most work runs with Webflow closed: CMS, pages, SEO fields, styles, components, variables and custom code all go through the Data API. You only need a live Designer session for visual snapshots, image uploads, and anything that reads or changes the current selection, page, breakpoint or canvas. For those, open the site in the Designer, press E for the Apps panel, launch Webflow MCP Bridge App and wait for it to connect. Leave it open; you can minimise it.

If it keeps dropping, the browser is probably putting the Designer tab to sleep. In Chrome, add webflow.com under Settings › Performance › Always keep these sites active, or pin the tab.

Step 5: Set house rules, then start read-only

Before the first write, fill in the site's Agent Instructions: your class naming convention (Client-First, say), which components to reuse, which collections are off-limits, the tone for any copy. Agents read them on every task, so you don't have to repeat yourself in every prompt.

Then make the first prompt read-only. If Claude's answer matches what you see in Webflow, the connection, permissions and site are all the right ones.

First prompt

List every CMS collection on this site with its fields and item count. Don't change anything.

Prompts worth running on a real site

MCP pays off on jobs that are repetitive, rule-based and easy to check afterwards. These are the ones I'd start with.

SEO metadata audit

Check every static page and CMS template for missing, duplicate or over-length meta titles and descriptions. Show me a table of proposed fixes and wait for my approval before updating anything.

Alt text

Find every image without alt text, on pages and in CMS rich text. Suggest alt text from the image and the copy around it. Leave decorative images empty and list them separately.

Broken links

Scan pages and CMS items for broken, redirected or http:// links. Group them by page, fix the internal ones, and list the external ones for me to review.

Variables cleanup

Find hard-coded colours, font sizes and spacing values in the site's classes and propose a set of variables to replace them. Don't apply anything until I confirm the list.

Image weight

List the 20 heaviest images on the site and compress any over 300 KB to WebP with Webflow's asset compression.

Notice the pattern: the agent proposes, I approve, then it writes. On a bulk change, "wait for my approval" is the cheapest insurance you'll ever buy.

Guardrails before it writes on a client site

Work on a duplicate site or a staging domain first. Agents can publish CMS items, so try bulk edits where a mistake costs nothing.
Keep Agent Instructions current, especially naming. Without them you get a fresh, slightly different class for every request.
Ask for one kind of change per prompt. "Fix the SEO and restyle the footer" is two jobs and twice the review.
Read the site activity log after each session, the way you'd review a pull request.
Publish yourself. Let the agent stage changes, check them on staging, then go live.
Remember what it can't see: Classic interactions, hosted Google or Adobe fonts, and any workspace you didn't authorize.

Want this set up on your Webflow site? See how I work

Common questions about the Webflow MCP server

Is the Webflow MCP server free?

There's no separate MCP product to buy: it connects through your existing Webflow account and permissions. The analytics, Optimize and AEO tools are the exception, since they only return data on sites with those paid add-ons.

Do I need the Webflow Designer open?

Usually not. CMS, pages, SEO, styles, components, variables and custom code all work with Webflow closed. You need the Designer open with the MCP Bridge App connected only for visual snapshots, image uploads, and reading or changing the current selection, page, breakpoint or canvas.

Can Claude build a whole Webflow site from scratch?

It can build pages, sections, classes, components and CMS structure on a site that already exists, but it can't create the project itself; you make that in the Webflow dashboard. It's strongest at structured, repeatable work. Layout taste and the final review still need a person.

Is it safe to connect Claude to a client's live site?

It's as safe as the access you give it. The agent is limited to what your Webflow role allows, every change is logged, and you choose exactly which sites to authorize. The real risk is a bulk edit nobody reviewed, which is why I test on a duplicate or staging site and ask for approval before every write.

Why are my sites greyed out when I try to connect?

Only site owners and admins can authorize the MCP server and the Bridge App. Ask the owner for admin access on that site, or have them authorize it.

Does it work with Classic interactions?

No. The MCP server reads and writes Interactions with GSAP only. On a site still using Classic interactions the agent sees none at all, so build or migrate those by hand in the Designer.

All articles