How do you connect Claude to Webflow?

Quick Answer: Claude connects to Webflow through Webflow's official MCP (Model Context Protocol) server, giving it direct access to your CMS, Designer API, and site data. You can push content updates, manage CMS collections, and publish pages by describing what you want in plain language inside Claude Desktop or Claude Code, with no manual editor work required.

B2B SaaS teams waste hours on repetitive Webflow edits: updating pricing copy, pushing new blog posts, refreshing CMS data across dozens of pages. The Claude Webflow MCP integration cuts that loop short.

This tutorial walks you through exactly how to connect Claude to Webflow using the MCP server, what you can actually do once it's set up, and where the integration earns its place in a real content workflow. By the end, you will know whether this belongs in your stack and how to get it running today.

What Is the Claude Webflow MCP Integration?

The Webflow MCP server is an official, first-party connector that gives Claude direct access to your Webflow workspace through the Model Context Protocol. MCP is an open standard that lets AI models connect to external tools and data sources in a structured, permissioned way.

Once connected, Claude can read your site structure, query CMS collections, write new content, update existing items, and trigger publishing, all from a conversation interface. You describe the change; Claude executes it through the Webflow API.

This is not a third-party workaround. Webflow ships and maintains the MCP server itself, which means it stays in sync with the Webflow API and carries the same reliability expectations as the platform.

What You Need Before You Start

Before running a single command, make sure you have the following in place:

• A Webflow account with at least one live site
• A Webflow API token with CMS and Designer permissions (generate this inside your Webflow workspace under Account Settings > API Access)
• Claude Desktop (Mac or Windows) or Claude Code installed and running
• Node.js 18+ installed on your machine (required to run the MCP server)
• A Webflow site ID for the site you want Claude to manage

If you are using Claude Code rather than Claude Desktop, the setup process is nearly identical. The configuration file location differs slightly, covered below.

How to Connect Claude to Webflow Using the MCP Server

Step 1: Install the Webflow MCP Server

Open your terminal and run:

npx @webflow/mcp-server

This pulls the official Webflow MCP server package from npm. You do not need to clone a repo or manage a separate process manually. The npx command handles execution each time Claude calls it.

Step 2: Configure Claude Desktop

Claude Desktop reads MCP server configurations from a JSON file. Open that file now:

• Mac: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

Add the following configuration block inside the mcpServers object:

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

Replace your-webflow-api-token-here with the API token you generated in step one. Save the file.

Step 3: Configure Claude Code (if using Claude Code instead)

If you are running Claude Code, add the MCP server via the CLI:

claude mcp add webflow \
  -e WEBFLOW_TOKEN=your-webflow-api-token-here \
  -- npx -y @webflow/mcp-server

This registers the Webflow server globally across your Claude Code sessions.

Step 4: Restart Claude and Verify the Connection

Fully quit and reopen Claude Desktop. In a new conversation, type:

List all the sites in my Webflow workspace

If the connection is working, Claude will return your site names and IDs. If it returns an error, double-check your API token and confirm Node.js is installed correctly by running node --version in your terminal.

What Can Claude Actually Do in Webflow?

Once connected, Claude has access to a defined set of actions through the Webflow MCP server. Here is what that covers in practice for B2B SaaS content teams:

CMS Content Management

• Read CMS collections: Ask Claude to list all items in a collection, pull specific fields, or summarise existing content
• Create new CMS items: Describe a new blog post, case study, or product update and Claude will create the item with the fields you specify
• Update existing items: Change copy, swap out metadata, update slugs, or edit rich text fields across one or multiple items
• Delete items: Remove outdated content from collections without opening the editor

Page and Site Management

• Query site structure: Ask Claude which pages exist, what their slugs are, and how they are organised
• Update page metadata: Change SEO titles, descriptions, and Open Graph fields through conversation
• Apply Designer API changes: Make structural and style-level updates where the Webflow Designer API supports them

Publishing

• Publish sites: Tell Claude to publish your site to staging or production after making changes
• Publish specific pages: Target individual pages for publishing rather than pushing the entire site

Real Workflow Examples for B2B SaaS Teams

These are the scenarios where the Claude Webflow MCP integration saves the most time for SaaS marketing and content teams. If your team is already comparing specialists across B2B SaaS content marketing agencies or broader B2B SaaS digital marketing agencies, this is the kind of workflow efficiency worth asking about.

Pushing a New Blog Post from a Brief

Instead of manually creating a CMS item, filling in every field, and formatting the content:

Create a new blog post in Webflow with the title "How SaaS Teams Use AI to Cut Support Costs", 
slug "saas-ai-support-costs", and the following body content: [paste content]. 
Set the author to "Sarah Chen", add tags "AI" and "Customer Support", 
and mark it as a draft.

Claude creates the item, maps all the fields, and confirms the draft is saved. You review and publish when ready.

Updating Pricing Page Copy Across Multiple Items

When a pricing tier changes, updating every reference manually is slow:

In my Webflow CMS, find all collection items that mention "Starter plan $49/month" 
and update that text to "Starter plan $59/month"

Claude queries the collection, identifies the affected items, and applies the update across all of them in one pass.

Refreshing Meta Descriptions Before a Campaign

Before a paid campaign goes live, you want every landing page meta description to match the campaign angle:

Update the meta description on the page with slug "product/analytics" to: 
"See every user action in real time. SaaS analytics built for growth teams. 
Start free, no credit card required."

Claude makes the change and can publish the page immediately if you ask it to. For teams pairing content updates with acquisition, this kind of workflow sits naturally alongside support from B2B SaaS PPC agencies, B2B SaaS SEO agencies, or B2B SaaS performance marketing agencies.

Publishing After a Content Audit

After reviewing a batch of CMS updates you have queued as drafts:

Publish the Webflow site ID [your-site-id] to production

One line. Done.

What the Claude Webflow MCP Integration Does Not Do

Being clear about the limits saves time. The MCP server does not:

• Replace the Webflow Designer for visual layout work. Complex component creation, new page templates, or animation changes still require the editor.
• Handle custom code or Webflow Logic flows through conversation.
• Automatically infer your content strategy. Claude acts on what you tell it. The editorial judgement stays with your team.
• Bypass Webflow's API rate limits. Large batch operations across hundreds of CMS items will hit the same limits as any other API client.

For content updates, CMS management, and publishing, the integration covers the full workflow. For design-heavy work, the editor remains the right tool.

Is the Claude Webflow MCP Integration Worth It for B2B SaaS Teams?

For teams publishing content regularly in Webflow, the answer is yes, with a clear use case.

The integration earns its place when your team:

• Manages a high-volume CMS (blog posts, case studies, changelogs, help articles)
• Runs frequent copy updates tied to campaigns or product changes
• Wants to give non-technical team members a way to push content without editor access
• Is already using Claude for content creation and wants to remove the manual step of copying output into Webflow

The setup takes under 15 minutes. The time saved on the first batch content update pays that back immediately.

At SaaS Hackers, we treat this integration as a practical example of where AI agents move from interesting to operational. It is not a demo feature. It is a repeatable workflow that fits directly into how SaaS content teams already work. If you want more proven operators, tools, and partners in this space, explore the wider SaaS Hackers resource hub or browse the full blog.

FAQs

What is the Webflow MCP server and how does it work with Claude?

The Webflow MCP server is an official connector built by Webflow that uses the Model Context Protocol standard to give Claude direct access to your Webflow workspace. Once configured, Claude can read and write CMS data, update page metadata, and publish content by calling the Webflow API on your behalf through a structured, permissioned connection.

Do I need to know how to code to use Claude with Webflow MCP?

No. The setup requires running two terminal commands and editing a JSON config file, but once it is configured, you interact entirely through plain language in Claude. Non-technical content managers can push CMS updates and publish pages without writing any code.

Is the Webflow MCP integration safe to use on a live production site?

Yes, with appropriate caution. The MCP server uses your Webflow API token, so it operates with whatever permissions that token carries. For production sites, consider generating a token scoped to the minimum permissions your workflow needs (CMS read/write, for example) rather than a full-access token. Always review changes before publishing to production.

What is the difference between using Claude Desktop and Claude Code for Webflow MCP?

Both work with the same Webflow MCP server. Claude Desktop is the consumer-facing chat application and suits content and marketing teams who want a conversational interface. Claude Code is the developer-focused CLI tool and suits engineers who want to script or automate Webflow operations as part of a larger workflow. The configuration method differs slightly, but the available actions are identical.

Can I use Claude to bulk-update hundreds of Webflow CMS items at once?

Claude can handle batch operations across CMS collections, but Webflow's API rate limits apply. For very large collections (hundreds of items), you may need to run updates in batches and monitor for rate limit responses. For typical SaaS content volumes (tens to low hundreds of items), bulk updates work without issues.