Webflow Claude & ChatGPT: MCP Guide

The official Webflow connector in Claude, the Webflow app in ChatGPT, Codex and Claude Code: which one to use, how to set it up, and the safety rules our team follows on live sites.

Last verified: October 5, 2026. Webflow's MCP changes often (version 2.0 in July, 2.1 in September). We re-check this guide every quarter.

If your marketing site runs on Webflow, connecting Claude or ChatGPT is the easy part: Webflow ships official connections for both, and the chat setup needs no terminal. The hard part is what happens after the assistant says "done."

Rango is a Webflow Certified Partner (since March 2026), and our team uses the Webflow MCP on live client sites. Here is which route fits, how to set it up, and what went wrong for us.

On Framer? See how the same job works on Framer.

Quick answer: can you connect Claude or ChatGPT to Webflow?

Yes, straight from the chat window. As of October 2026:

The MCP server works on every Webflow Site plan, including free Starter, for any site role except Reviewer (Webflow Help Center). Claude's directory connectors are available to all Claude users (Claude help).

Claude, ChatGPT or Claude Code: which should your team use?

Use the Claude connector or the ChatGPT app for everyday marketing work: copy changes, new CMS items, SEO fields, audits. Both use the same Webflow MCP server, so pick the assistant your team already pays for. ChatGPT adds built-in Webflow skills for audits and safe publishing (Webflow Help Center).

Use Claude Code or Codex when a technical teammate runs large jobs, such as hundreds of CMS items. Those take time: Webflow's API allows 60 requests a minute on Starter and Basic site plans (Webflow docs).

Our default for a marketing team: Claude or ChatGPT chat for page and CMS edits, run by one trained person who also owns publishing.

How to connect Claude to Webflow, step by step

1. Have a site owner or admin connect first. As of October 2026, Webflow's documentation conflicts: its developer FAQ says only owners and admins can authorize the MCP server (Webflow FAQ), while its Help Center allows any role except Reviewer (Webflow Help Center). We keep it to an owner or admin. On Claude Team or Enterprise, an Owner must also enable the connector for your organization (Claude help).

2. Add the connector. In a Claude chat, click +, hover Connectors, choose Add connector and search "Webflow." Switch the filter from Featured to All if it doesn't show (Webflow docs).

3. Click Connect and log in to Webflow.

4. Choose only the sites you're working on, as Webflow recommends, and click Authorize App.

5. Keep approvals on. Claude asks before every Webflow action by default. In Customize > Connectors > Webflow, keep write tools on Needs approval and block what you don't need (Webflow Help Center).

6. Start read-only: "List my Webflow sites and CMS collections."

7. Make a restore point before the first edit (see the safety rules below).

One authorization covers one Webflow Workspace. To switch, remove the connector and add it again (Webflow docs).

For a technical teammate, Claude Code: run claude mcp add --transport http webflow https://mcp.webflow.com/mcp, start Claude Code, type /mcp and sign in when the browser opens (Webflow docs). As of October 2026, Claude Code is included with Claude Pro and Max, and with Team and Enterprise seats that include it (some older Enterprise seats are chat only) (Claude help).

Do you need a developer? Not for the chat routes.

How to connect ChatGPT to Webflow (and Codex)

1. In ChatGPT, click Plugins in the sidebar, search "Webflow" and click Install plugin.

2. Click Sign in with Webflow, choose your sites and click Authorize App.

3. Mention @Webflow in a chat. ChatGPT asks you to approve every Webflow action by default, managed in Settings > Connected apps (Webflow Help Center). Leave it on.

If the Webflow listing is missing, ask your workspace admin. As of October 2026, the app costs nothing extra and uses no Webflow AI credits (Webflow update).

Codex: in the ChatGPT desktop app, switch to Codex, click Plugins, install Webflow and authorize your sites (Webflow Help Center). As of October 2026, OpenAI includes Codex on every ChatGPT plan, with usage limits by plan (OpenAI).

What it can and can't do

Can, as Webflow documents it as of October 2026:

- Edit text, images, layouts and styles across breakpoints; work with components and variants

- Create CMS collections, bulk-update items, and publish or unpublish single items

- Create pages, bulk-update page settings and add schema markup

- Update meta titles, descriptions and Open Graph tags across pages

- Compress images and audit for broken links and missing alt text

- Build GSAP-based interactions; read and write custom code

- Publish the whole site or individual pages

- Read Webflow Analyze traffic, if you have that paid add-on

(Webflow docs, Webflow Help Center)

Can't:

- Build or edit Classic (non-GSAP) interactions

- Create new CMS items in a second language (it can update existing ones)

- Add users or change roles

- Control some CMS binding settings, such as conditional visibility

- Use page branches, unless you're on Enterprise

- Take snapshots or act on your current selection unless the site is open in the Designer with the MCP Bridge App running (Webflow docs)

Webflow MCP 2.1: what shipped on September 21, 2026

Announced at Webflow Conf on September 2 and shipped September 21 (Webflow update):

- Interactions built on IX3 and GSAP, with scroll, hover, load and click triggers

- CMS sorting, filtering and paging, including custom and reference fields, in one request

- Deploy, status checks and debugging for Webflow Cloud apps

- Branch pull, merge, staging preview and conflict check. Enterprise plans only.

For marketers, the CMS change matters most: "every Fintech case study without a meta description" is now one request. Releases, Webflow's whole-site branching, isn't part of 2.1 and is due in beta later this year (Webflow blog).

Safety settings before the first edit

1. Have an owner or admin authorize, for active sites only. Not the whole Workspace.

2. Keep "Needs approval" on. Never switch a live site to "Always allow."

3. Publish to staging only. A site-wide publish pushes "all staged content across your entire site" (Webflow docs), including a teammate's unfinished work. Have the agent publish to your webflow.io domain only, as Webflow's FAQ advises, and a person publish to the custom domain (Webflow Help Center).

4. Write Agent Instructions. Rules apply to every action; skills guide specific tasks. Start from Webflow's "SEO defaults" rule template; new rules stay off until you toggle them on (Webflow Help Center). Webflow says third-party tools vary in how reliably they follow them, so ask the agent to read them first.

5. Make a restore point before each session: Command + Shift + S in the Designer (Control + Shift + S on Windows). Site managers on a paid Site or Workspace plan can restore any backup; otherwise free Starter sites keep only the two most recent (Webflow Help Center).

6. Use the smallest role that does the job. An agent can do only what its user can do in the Designer, and Webflow enforces roles per site, CMS collection, page and locale (Webflow update).

7. Ask for the plan first, and keep a record. "List what you'll change and wait for my yes." Enterprise teams get the Site Activity Log; on other plans, ask the agent to end each session by listing every change it made.

Prompts that work

Each ends with a check. Swap in your own names. In ChatGPT, start each prompt with @Webflow.

1. Audit, no changes Audit [site name]: list pages and Blog Posts items with a missing meta description or one over 155 characters, and images with no alt text. Give me a table. Don't change anything. Verify: check three rows in the Designer; where alt text is empty, confirm the image is meant to be decorative.

2. Instructions and scope check Read this site's Agent Instructions and list the rules that are on. Then tell me which sites you can access. Verify: the rules match the Instructions panel, and the sites match what you authorized.

3. Hero rewrite On /demo, change the hero headline and subhead to [copy]. Show me current and new text side by side first. Text only, no styles. Don't publish. Verify: both elements keep their classes and nothing else on the page changed.

4. Meta descriptions in bulk, staging only For every Blog Posts item with an empty Meta Description field, draft one under 155 characters. Write them after I say yes, change nothing else, then publish to the webflow.io staging domain only. Verify: view source on three staging URLs; your custom domain is unchanged.

5. New case study as a draft Create a draft Case Studies item from this doc [paste]: name, slug, a summary under 160 characters, body, and the asset "[file name]" as thumbnail with alt text. Leave it as a draft. Verify: the CMS panel shows it as a draft, and its URL isn't live on staging.

6. Tablet-only style fix Reduce the homepage hero's top padding at the tablet breakpoint only, and keep the phone layout as it is. First tell me the class and breakpoint you'll edit, and every element using that class. Verify: desktop is unchanged, and every listed element still looks right on staging.

7. Broken links Find broken and http:// links across pages and CMS items. Show a table of each one's location and your proposed fix. Fix only rows I approve. Verify: click three flagged links yourself; in our work, one agent read of a footer flagged 17 broken links when 4 were.

When "done" isn't done: what we've seen on real Webflow sites

An agent saying "done" is not the same as the page being right. These come from our own Webflow production work in July and August 2026, not the docs.

1. The publish that never happened. A long style value was cut short when the agent wrote it, leaving one invalid CSS rule. After that, every publish reported success and nothing reached the live site. Only the Designer's publish dialog showed the error. Fix: check the live page after every publish; if it didn't land, read that dialog.

2. The canonical URL that didn't save. The agent's write to a page's canonical URL was accepted, and the field stayed empty. We set it by hand in the Designer. Fix: after publishing, view the page source and search for "canonical."

3. The head code that disappeared. Page head code added through the agent vanished from 7 of 8 pages once those pages' settings were saved in the Designer, which wrote back the older code it had loaded. Fix: make Designer page-settings changes first and agent code changes last.

4. The text that never arrived. Asked to add a text block, the agent created the element but dropped the text, leaving Webflow's placeholder: "This is some text inside of a div block." Fix: search new sections on staging for "This is some text."

5. The tablet fix that hit every screen. A style change meant for tablet went through without an error, but landed on the base desktop style, which flows down to every smaller screen. Fix: name the breakpoint in your prompt, then check desktop, tablet and phone.

6. The style change that landed somewhere else. An update aimed at one element's combo class (a variant such as is-next) changed a different element with a same-named combo, because the tool matched by name. Fix: have the agent list every element using a class before editing it.

7. The plan limit that wasn't. Creating a CMS item failed with "You've created all the items in your CMS Database allowed on your current plan," on a paid plan with fewer than 100 items. It failed three times over about 20 minutes, then worked with no plan change. Fix: wait and retry one small item before you upgrade or open a ticket.

Our checklist: judge the staging URL, not the agent's summary; wait a minute after publishing, since we've seen the old version served for up to 45 seconds; check every breakpoint; view the source for title, description and canonical; one person owns publishing to the custom domain.

Your first 30 days on Webflow

• Week 1, read only. Connect, write and turn on Agent Instructions, and audit meta descriptions, alt text and links. No writes. Decide who owns publishing.

• Week 2, drafts and staging. New posts and case studies as draft CMS items; bulk SEO fields written with approval and published to webflow.io only.

• Week 3, small live edits. Hero copy, CTAs and SEO fields: restore point, approval, staging, the checklist, then a person publishes live.

• Week 4, a routine. One weekly list of changes the agent proposes, one review, one staging check, one publish.

What still needs a designer or developer

• New page designs, sections and components. An agent can build them, but matching your design system at every breakpoint is design work (see case 5).

• What the MCP server can't do: Classic interactions, new localized CMS items, some CMS bindings, users and roles.

• Designer-only settings we hit in practice, such as the canonical URL and new page folders.

• Tracking scripts and site-wide custom code. One bad line affects every page.

• Large launches. Page branches through the MCP server need Enterprise.

• Diagnosing silent failures like the ones above.

The goal isn't zero designers or developers. It's nobody waiting in a queue for a headline change.

FAQ

Can Claude edit my Webflow site? Yes. Add the official Webflow connector in Claude (any plan, including Free, as of October 2026) and authorize your sites. Claude can then edit pages, CMS items, SEO fields and styles within your Webflow role, asking before each action.

Does the Webflow MCP work with ChatGPT? Yes. Webflow has an official app in ChatGPT, listed under Plugins, and the same plugin works in Codex. ChatGPT asks you to approve every Webflow action by default.

What is Webflow MCP 2.1? The update Webflow shipped on September 21, 2026: GSAP-based interactions, CMS filtering on custom and reference fields, Webflow Cloud deploy tools, and branch merging for Enterprise plans only. It builds on MCP 2.0 (July 21, 2026), which added Agent Instructions.

Is the Webflow MCP free? On Webflow's side, yes, as of October 2026: every Site plan, including free Starter, with no Webflow AI credits. Your Claude or ChatGPT plan sets your usage limits. Analyze data needs a paid add-on, and page branches need Enterprise (Webflow Help Center).

Is it safe to let AI edit a live Webflow site? AI edits can introduce errors, so reduce the risk with approvals on, staging-only publishing, a restore point before each session and a check of the page yourself. Our Framer guide applies the same rules on Framer.

Want it set up for you? Our team connects your Webflow site to your team's assistant, sets the review rules and trains your team. Talk to us

Changelog: October 5, 2026, first published.