How do you connect Claude to Webflow via MCP?

Quick Answer: Claude connects to Webflow via the official Webflow MCP server, giving you direct access to your site's CMS, Designer APIs, and data layer from inside Claude Desktop or Claude Code. You can push content updates, manage CMS collections, and make structural page edits without touching the Webflow interface.

You already know Claude can write. What most B2B SaaS teams haven't figured out yet is that Claude can also publish. With the Webflow MCP server connected, you stop copying and pasting content between tools and start pushing updates directly from your AI workflow into your live Webflow site.

This tutorial walks through exactly how to set that up, what you can do with it, and where the real workflow gains are for SaaS teams managing content at scale.

What Is the Webflow MCP Server?

The Webflow MCP server is a first-party integration built on Anthropic's Model Context Protocol (MCP), an open standard that lets AI models connect to external tools and data sources. Webflow's implementation gives Claude direct access to your site's CMS collections, Designer APIs, and content layer.

In plain terms: Claude stops being a writing assistant you copy from and becomes an agent that can read your Webflow site structure, create and update CMS items, and push changes without you leaving the conversation.

The integration is maintained by Webflow and works with Claude Desktop, Claude Code, Cursor, and Windsurf.

What You Can Do with Claude and Webflow MCP

Before setting anything up, it helps to understand what this integration actually supports. The Webflow MCP server exposes a defined set of actions Claude can take inside your workspace:

CMS operations:

• Create new CMS collection items
• Update existing item fields (text, rich text, images, references)
• Publish and unpublish items
• Query collection schemas to understand field structure

Site and page management:

• Read page structure and metadata
• Apply structural updates to pages
• Manage site settings and styles at a system level

What it does not do (yet):

• Visual drag-and-drop design (that stays in the Webflow Designer)
• Replace Webflow's publishing queue for complex multi-environment setups
• Handle custom code components without manual input

For B2B SaaS teams, the highest-value use cases are CMS content pushes, landing page copy updates, and bulk field edits across collection items. If your team is handling this kind of repeatable publishing work at scale, it often overlaps with broader B2B SaaS marketing operations responsibilities.

How to Connect Claude to Webflow via MCP

Step 1: Generate a Webflow API Token

1. Log into your Webflow account and open the site you want to connect
2. Go to Site Settings > Integrations > API Access
3. Generate a new API token with CMS read/write permissions
4. Copy the token and store it somewhere safe. You will not see it again after closing that screen.

If you are working across multiple Webflow sites, generate a separate token per site. Mixing tokens across workspaces creates permission errors that are annoying to debug.

Step 2: Install the Webflow MCP Server

The Webflow MCP server runs as a Node.js process on your machine. You need Node.js installed before this step.

Open your terminal and run:

npx @webflow/mcp-server

Alternatively, install it globally:

npm install -g @webflow/mcp-server

The server is open source and maintained in Webflow's official GitHub repository at webflow/mcp-server.

Step 3: Configure Claude Desktop to Use the MCP Server

Open your Claude Desktop configuration file. On macOS, this lives at:

~/Library/Application Support/Claude/claude_desktop_config.json

Add the Webflow MCP server to your configuration:

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["@webflow/mcp-server"],
      "env": {
        "WEBFLOW_API_TOKEN": "your-token-here"
      }
    }
  }
}

Replace your-token-here with the API token you generated in Step 1.

Save the file and restart Claude Desktop. You will see a hammer icon in the Claude interface confirming that MCP tools are active.

Step 4: Verify the Connection

Start a new conversation in Claude and ask:

"List the CMS collections available in my Webflow site."

Claude will call the Webflow MCP server and return your collection names and structures. If it returns an error, check that your API token has the correct permissions and that the config file JSON is valid (a missing comma breaks the whole file).

How to Push CMS Content Updates with Claude

Once connected, content operations follow a simple pattern: describe what you want, let Claude query the schema, then confirm the write action.

Updating an Existing CMS Item

Start by asking Claude to read the current state of an item:

"Find the blog post titled 'How to reduce churn in SaaS' in my Blog Posts collection and show me the current meta description and body content."

Claude will retrieve the item and display the fields. Then give your update instruction:

"Update the meta description to: 'Learn the five retention tactics used by SaaS teams with under 5% annual churn. Practical, no fluff.' Then publish the change."

Claude will write the update to Webflow and confirm the item status.

Creating a New CMS Item

This is where the workflow gets genuinely fast. Write your content brief in Claude, generate the content in the same conversation, then push it directly:

"Create a new item in the Blog Posts collection. Title: 'SaaS Pricing Page Teardown: What High-Converting Pages Have in Common'. Slug: saas-pricing-page-teardown. Set the status to Draft. Use the following content for the body field: [paste your content]."

Claude maps your inputs to the correct collection fields and creates the item. You can then open Webflow to review and publish, or ask Claude to publish it directly if your workflow allows it.

Bulk Field Updates Across a Collection

This is the use case most teams don't realise is possible. If you need to update a field across multiple CMS items, like improving title tags as part of an SEO cleanup or correcting repeated taxonomy errors, you can do it in one conversation:

"In my Case Studies collection, find all items where the 'Industry' field is empty and set it to 'B2B SaaS'."

Claude will query the collection, identify the matching items, and apply the update. What would take 20 minutes of manual clicking in Webflow takes under two minutes this way.

Practical Workflow: Publishing a Landing Page Update

Here is a real workflow a B2B SaaS marketing team would run through Claude with Webflow MCP connected.

Scenario: You have updated your homepage hero copy and want to push the change to Webflow without opening the Designer.

1. Query the current state: "Show me the current hero headline and subheadline on the Homepage CMS item."
2. Review and approve: Claude returns the current copy. You confirm it needs updating.
3. Write the update: "Update the hero headline to: 'Stop guessing. Start converting.' Update the subheadline to: 'SaaS Hackers helps B2B SaaS teams build the systems that turn signups into revenue.' Publish the changes."
4. Confirm: Claude confirms the fields are updated and the item is published.

Total time: under three minutes. No Designer session, no copy-pasting, no tab switching.

What B2B SaaS Teams Should Use This For

Not every content update needs to go through Claude and MCP. Here is where the setup pays off most clearly for SaaS teams:

High-value use cases:

• Updating SEO metadata across multiple landing pages before a campaign launch
• Publishing blog content that was drafted and edited inside Claude
• Running SEO audits and applying fixes (meta descriptions, title tags) in the same session
• Creating localised versions of CMS content for different markets
• Bulk-updating product feature descriptions after a release

Lower-value use cases (stick to Webflow directly):

• One-off visual design changes
• Layout restructuring that requires the Designer
• Changes that need stakeholder sign-off before publishing

Teams doing frequent metadata updates, content rollouts, or campaign launches may also end up combining this workflow with support from B2B SaaS content marketing agencies or specialist SEO partners.

Common Errors and How to Fix Them

"No tools available" in Claude Desktop Your config file has a syntax error or the MCP server failed to start. Validate your JSON at jsonlint.com and check that Node.js is installed correctly.

"Unauthorised" when Claude tries to write to Webflow Your API token does not have write permissions, or it was generated for the wrong site. Regenerate with full CMS permissions and update the config file.

Claude reads collections but cannot find specific items Collection item names are case-sensitive in the Webflow API. Ask Claude to list all items in the collection first, then reference the exact name it returns.

Changes appear in Webflow but are not live on the site The item was updated but not published. Add "and publish the item" to your instruction, or check the Webflow publishing queue manually.

FAQs

What is Claude Webflow MCP and how does it work? The Claude Webflow MCP integration connects Claude to your Webflow site using Anthropic's Model Context Protocol. Claude uses the Webflow MCP server to read and write to your CMS collections, page metadata, and site settings directly from a conversation. You authenticate via a Webflow API token, and Claude calls Webflow's APIs on your behalf.

Do I need to know how to code to use the Webflow MCP server? You need to be comfortable editing a JSON configuration file and running a single terminal command. Beyond that, the interaction is entirely conversational. You do not write code to push content updates. If you can describe what you want in plain English, Claude handles the API calls.

Is the Webflow MCP server safe to use with a live production site? Yes, with one precaution: always ask Claude to show you the current state of an item before writing changes, and confirm the update before asking Claude to publish. The MCP server writes directly to your live Webflow workspace, so there is no staging buffer unless you set one up in Webflow itself. Treat it like direct database access: deliberate and reviewed before committing.

What is the difference between using Claude with Webflow MCP versus the Webflow AI features built into the Designer? Webflow's native AI features work inside the Designer interface and focus on visual and layout assistance. The Claude Webflow MCP integration works outside the Designer and focuses on CMS operations, content publishing, and bulk data management. They serve different parts of the workflow. MCP is better for content teams managing large volumes of structured data.

Can I use the Webflow MCP server with Claude Code or Cursor, not just Claude Desktop? Yes. The Webflow MCP server works with Claude Desktop, Claude Code, Cursor, and Windsurf. The configuration method varies slightly by tool, but the API token and server setup are the same. Check each tool's MCP documentation for the specific config format.