Webflow MCP with Claude | Edit Designer and CMS Through Conversation

What Is the Webflow MCP Server — The Official AI Integration Gateway

The Webflow MCP Server is Webflow's officially published MCP (Model Context Protocol) implementation on GitHub. It bridges MCP clients — Claude Desktop, Claude Code, Cursor, Windsurf, and others — to the Webflow API. The repository is webflow/mcp-server, released under the MIT license. The latest version at the time of writing is 1.0.0 (released September 2025); check the releases page for the current version.

Internally it wraps Webflow's Data API and the Designer API via the JavaScript SDK, presenting the AI side with a consistent interface of "function calls against Webflow's site structure, CMS, and assets." This makes it possible to give Claude a single prompt and have it perform compound tasks such as "analyze related articles from the published blog, then add a new article draft with internal links."

What You Can Do: Designer API vs. Data API

Webflow MCP tools split into two main categories. Understanding the role of each removes uncertainty about what Claude can reach.

• Designer API tools: Operate on the Webflow Designer canvas in real time. Add or modify elements, apply style changes in bulk, configure responsive settings, and control components and CSS variables.
• Data API tools: Create, read, update, and delete CMS Items; upload and organize assets; edit page SEO settings and metadata. Works without Webflow Designer open.

A useful mental model: use Designer API tools when you want AI to assemble the site structure itself, and Data API tools when you want to streamline ongoing content operations. This makes it easier to decide where to focus (source: Webflow Developers Docs — AI Tools).

Setup in Claude Desktop

There are two ways to connect Claude Desktop to Webflow MCP. Under normal circumstances, choose Method A. Use Method B if you need to lock down the connection settings internally, roll it out to multiple machines, or combine it with automation scripts.

Method A (Recommended): OAuth via Connectors

Simply click the "+" icon → Add connectors and select Webflow. OAuth will run; log in as the Webflow site owner or administrator, select the target workspace and site, and authorize to complete the connection. No API token needs to be stored locally, making this the easiest and most secure approach.

Method B: Manually Add to Config

Add a configuration entry to the mcpServers section of claude_desktop_config.json.

1. Quit Claude Desktop.
2. Open claude_desktop_config.json and add the following settings.
3. Save the file and restart Claude Desktop.
4. Confirm that "webflow" appears in the MCP icon in the chat input area.

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["mcp-remote", "https://mcp.webflow.com/sse"]
    }
  }
}

mcp-remote (an npm package) is a bridge that allows a local MCP client to communicate with a remote server over HTTP. /sse refers to a Server-Sent Events endpoint, which lets the server push messages in real time. Node.js 22.3.0 or later is required, so check with node -v beforehand.

Connecting from Claude Code

In Claude Code (CLI version), you can register the same Remote MCP endpoint using the claude mcp add command. Running the following from the project root enables Webflow MCP only for sessions in that directory.

claude mcp add webflow npx mcp-remote https://mcp.webflow.com/sse

Calling it from Claude Code lets you complete operational tasks — generating and publishing CMS Items, updating site metadata — entirely within the terminal, running alongside code generation. On projects that consume Webflow CMS headlessly with Next.js or Astro, you can instruct Claude mid-implementation: "Replace the OG image and description for this article and publish it."

OAuth Authentication and Token Management

The standard connection method for Webflow MCP is OAuth, so there is no need to hardcode an API token locally. Access tokens are cached by Claude Desktop / Claude Code under ~/.mcp-auth/ and refreshed automatically when they expire.

When re-authorizing or switching accounts does not go smoothly, deleting the cache and re-authenticating is the quickest fix.

rm -rf ~/.mcp-auth

If internal policy requires using an API token, the local method (launching webflow-mcp-server via NPX and passing WEBFLOW_TOKEN as an environment variable) is an option. To minimize leakage risk, OAuth with the remote method is recommended as the default.

The Bridge App Is Required for Designer API

Designer API tools (editing canvas elements, changing styles, etc.) only work while the MCP Bridge App is running inside Webflow Designer. The rule is to open "Apps" → "Webflow MCP Bridge App" from the left sidebar in Designer, click Launch, and keep the target site open.

Data API tools are not subject to this restriction and can add CMS Items or publish articles even with Designer closed. If you ask Claude to perform Designer operations without the Bridge App running, the tools will fail silently and return a "cannot retrieve connection information" error. This is where people most often get tripped up in the first few attempts, so it is worth making a habit of checking the Bridge App status before any work that calls Designer API.

Practical Use Cases — Blog Operations, Bulk CMS Editing, SEO Configuration

Three areas where Webflow MCP delivers value right away after setup:

1. Blog operations: Extract related topics from existing articles, generate drafts, and register them directly as CMS Items. Have Claude write tags, categories, and OG images all at once.
2. Bulk CMS editing: Status changes, price table updates, unpublishing ended campaigns — finish loop-heavy Webflow UI work with a single prompt for batches of dozens of items.
3. SEO metadata correction: Have Claude audit the title, description, OG image, and canonical for each page, then write back only the missing pieces via the Data API.

Bulk CMS editing in particular eliminates the time spent opening records one by one in the Webflow admin panel, making it one of the areas where the reduction in operational workload is most noticeable.

Troubleshooting Checklist

When you cannot connect, cannot see tools, or edits are not being applied, work through the following in order:

1. Confirm Node.js is version 22.3.0 or later (node -v).
2. Fully quit Claude Desktop / Code, delete ~/.mcp-auth/, and re-authenticate.
3. Confirm the account has "site owner or administrator" permissions for the target site (view-only permission cannot authorize).
4. If calling Designer API, confirm the MCP Bridge App has been launched inside Webflow Designer.
5. Check whether you are hitting the spec limitation that creating new localized content is not supported (only updates are).

Points 3 and 5 in particular are classic cases where "settings are correct but tools fail silently" — the root cause is difficult to identify from error messages alone.

Pricing, Plans, and Usage Requirements

The Webflow MCP Server itself is free and open source under the MIT license. Costs arise from Webflow's own plans: both the Data API and Designer API are intended for use with paid workspaces (free workspaces have restrictions on API rate limits and publish capabilities).

On the Claude side, any plan that supports Remote MCP connections — Pro or above — covers all environments (web, Desktop, Code) with no additional charge. It is also worth noting for cost estimates that MCP operates within Webflow's standard API rate limits, not on an API token billing model.

Official information changes quickly, so it is recommended to recheck the steps and specifications in this article against the Webflow Developers Docs and the webflow/mcp-server release notes at least every six months.