How do you connect Claude to Webflow MCP?

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

If you manage a Webflow site and you're still copying content into the CMS by hand, this guide will change how you work. The Webflow MCP server lets Claude read and write directly to your Webflow workspace, so you can update blog posts, push new collection items, and edit page content through a conversation instead of through the Designer.

This is a practical walkthrough for B2B SaaS teams who want faster publishing workflows and fewer context switches. By the end, you'll have the integration running and understand exactly what Claude can and can't do inside Webflow. If you're also evaluating broader growth support around content systems and publishing operations, SaaS Hackers also curates the best B2B SaaS content marketing agencies.

What Is the Webflow MCP Server?

The Webflow MCP server is a first-party integration built by Webflow that implements the Model Context Protocol standard. MCP is an open protocol that lets AI tools like Claude connect to external services with structured, permissioned access.

In plain terms: instead of Claude guessing how your Webflow site is structured, the MCP server gives it real-time access to your actual workspace data. Claude can query your CMS collections, read existing items, create new entries, and trigger updates through the same APIs a developer would use.

Webflow's MCP server is hosted and maintained by Webflow directly, which means it uses the official Data API and Designer API rather than a third-party workaround.

What Can Claude Actually Do Inside Webflow?

Before you set anything up, be clear about the scope. Claude with Webflow MCP can:

• Read CMS collections and list existing items with their field data
• Create new CMS collection items with text, rich text, images, and reference fields
• Update existing collection items including staged and published content
• Publish items to your live site
• Query site structure including pages, collections, and field schemas
• Apply structural and system-level updates through the Designer API

Claude cannot visually design pages the way a human would in the Webflow Designer canvas. Think of it as a powerful CMS operator and content publisher, not a visual design tool. Teams that need support on the visual layer as well may want to compare B2B SaaS web design agencies or specialist B2B SaaS webdesign UX experts.

What You Need Before You Start

• A Webflow account with at least one site (any plan with CMS access)
• Claude Desktop installed, or access to Claude Code
• A Webflow API token with the correct scopes
• Node.js installed locally (version 18 or above)

How to Connect Claude to Webflow MCP: Step by Step

Step 1: Generate Your Webflow API Token

1. Log into your Webflow dashboard
2. Go to Account Settings, then Integrations
3. Scroll to API Access and generate a new token
4. Select the scopes you need: CMS read/write, Sites read, and Pages read/write are the core ones for content workflows
5. Copy the token and store it somewhere secure

Step 2: Configure the MCP Server in Claude Desktop

Claude Desktop uses a configuration file to know which MCP servers to connect to. Open the config file at:

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

Add the following block inside the mcpServers object:

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

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

Step 3: Restart Claude Desktop

Save the config file and fully quit Claude Desktop, then reopen it. Claude will load the MCP server on startup. You'll see a small hammer icon in the chat interface when MCP tools are available.

Step 4: Verify the Connection

Type this in Claude:

"List the Webflow sites connected to my account."

If the connection is working, Claude will return your site names and IDs. If it errors, double-check the token scopes and that Node.js is installed correctly.

Using Claude for Claude Code Instead

If you're working in a terminal environment or prefer Claude Code over Claude Desktop, the setup is slightly different.

Run this command to start the MCP server manually:

WEBFLOW_TOKEN=your-api-token npx -y @webflow/mcp-server

Then configure your Claude Code environment to point to that running server. The Webflow GitHub repository for the MCP server (webflow/mcp-server) has the full reference for environment variables and advanced configuration options.

Practical Workflows: What to Actually Do With This

Pushing a New Blog Post to Your CMS

Once connected, you can create a new CMS item with a single prompt. For example:

"Create a new item in my Blog Posts collection. Title: 'How SaaS Teams Use AI for Faster Onboarding'. Slug: how-saas-teams-use-ai-faster-onboarding. Set the status to Draft."

Claude will call the CMS API, create the item with the correct field mapping, and return the item ID. You can then ask it to populate the body field with content you've already written or have Claude draft it inline. If AI-assisted publishing is becoming a bigger part of your workflow, SaaS Hackers also explores adjacent themes like the impact of AGI on marketing, business, and software development.

Updating an Existing CMS Item

"Find the blog post titled 'Product Update: Q1 2025' and update the excerpt field to: 'A summary of everything we shipped in Q1, including the new onboarding flow and API rate limit increases.'"

Claude will query the collection, find the matching item, and patch the field. You don't need to know the item ID in advance.

Publishing a Staged Item

"Publish the blog post with slug 'how-saas-teams-use-ai-faster-onboarding' to the live site."

This triggers the publish action through the API. The item moves from staged to live without you opening the Designer.

Auditing Your CMS for Missing Fields

"Check all items in my Case Studies collection and list any that are missing the 'Client Logo' or 'Industry' fields."

This is a genuinely useful workflow for content QA. Claude reads every item in the collection and returns a list of gaps, which would take significant manual effort to do through the Webflow UI.

Permissions and What to Watch Out For

A few things worth knowing before you run this in production:

Token scope matters. A token with write access can create and overwrite content. If you're experimenting, generate a read-only token first to explore your site structure without risk.

Publishing is immediate. When Claude publishes an item, it goes live. There's no staging confirmation step in the API. Build a habit of checking staged content before issuing publish commands.

CMS field types have constraints. Reference fields, option fields, and image fields have specific formats the API expects. If Claude returns an error on a create or update, ask it to describe the collection schema first so it maps fields correctly.

Rate limits apply. The Webflow Data API has rate limits per plan. For bulk operations (updating 50+ items), Claude will need to handle pagination and you may hit limits on lower-tier plans.

Why B2B SaaS Teams Should Care About This

Content velocity is a real constraint for most SaaS marketing teams. A typical blog publish cycle involves writing, editing, formatting in the CMS, adding metadata, and hitting publish. Each step is manual and slow.

With the Claude Webflow MCP setup, a writer can hand off a finished draft and let Claude handle the CMS entry, field population, slug creation, and publish trigger. That's 20-30 minutes of mechanical work removed from every post.

For teams managing localized content, product update pages, or high-volume resource libraries, the time savings compound fast. Claude can process a batch of updates in a single session that would otherwise take an afternoon. For companies scaling these workflows across acquisition channels, it can also help to review specialist partners across B2B SaaS SEO agencies, B2B SaaS PPC agencies, and B2B SaaS performance marketing agencies.

SaaS Hackers covers this kind of workflow automation as part of a broader series on using Claude for B2B SaaS operations. The goal is always the same: remove the mechanical work so your team can focus on the decisions that actually require human judgment. If you want to explore more vetted partners and operators, you can also browse all top agencies, top experts, or resources.

FAQs

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

The Webflow MCP server is an official integration that implements the Model Context Protocol, letting Claude connect directly to your Webflow workspace. It gives Claude structured access to your CMS collections, pages, and site data through the Webflow API. You configure it once in Claude Desktop or Claude Code, and Claude can then read and write Webflow content through natural language prompts.

Can Claude design pages visually in Webflow using MCP?

No. Claude with Webflow MCP operates through the API layer, not the visual Designer canvas. It can create and update CMS content, manage collection items, and apply system-level changes, but it does not drag, drop, or visually arrange elements the way a designer would. Use it for content operations, not visual design.

Is the Webflow MCP server safe to use with a production site?

Yes, with the right precautions. Use a scoped API token with only the permissions your workflow needs. Avoid giving write and publish access during initial testing. Publishing through the API is immediate, so treat publish commands the same way you would treat publishing manually through the Designer.

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

No coding is required for the basic setup or for running content workflows. You need to edit a JSON config file and have Node.js installed, but both steps are straightforward. The Webflow MCP server runs via npx, so there's nothing to build or maintain.

What Webflow plan do I need for MCP access?

The Webflow MCP server uses the Data API, which is available on plans that include CMS access. Check your current plan's API access details in your Webflow account settings. The Designer API features may have additional plan requirements depending on what actions you need.