Connect Claude to Webflow with the MCP Server

Four specific assets are required to bridge the gap between local execution and the Webflow Designer API.

The Webflow MCP server acts as a translator, allowing Claude Sonnet 5.5 to execute authenticated requests against your site’s schema rather than merely suggesting code for you to copy-paste.

Without these components, the Claude Desktop app lacks the permissions to modify your CMS or publish changes. These assets include:

Prerequisites for connecting Claude to Webflow via MCP

The Webflow MCP server acts as a translator, allowing Claude Sonnet 5.5 to execute authenticated requests against your site’s schema rather than merely suggesting code for you to copy-paste.

• Webflow API Token (v2)
• Claude Desktop app installed
• Node.js (v18+) for the MCP runner
• Specific Site ID from your Webflow dashboard settings

These credentials restrict the model to the correct environment. After gathering them, you can move from the chat interface to the site editor.

Generating your Webflow V2 API Key

Navigate to the Webflow Apps & Integrations page to find the interface for generating a V2 API Key. This is the only token type that supports the granular scopes required by the MCP server.

You must select the specific site or workspace the token will access, as a broad token without defined permissions will cause the MCP server to return 401 Unauthorized errors.

Unlike v1 tokens, these v2 credentials allow you to limit Claude's access to "CMS Read/Write" or "Site Content Read." This prevents the model from deleting site projects if it misinterprets a prompt.

Copy this string immediately. Webflow will not display the full secret again, meaning a lost key requires a full reconfiguration of your local JSON settings.

Locating your Site and Workspace IDs

Look within the URL of your project’s Dashboard or Designer view to find the Site ID and Workspace ID. These serve as the unique routing addresses for every API call the model makes.

The Site ID is the alphanumeric string following /sites/ in your browser's address bar. Providing this to Claude prevents it from attempting to push updates to the wrong project in a multi-site account.

While tools like Activepieces can automate data flow between apps, the MCP connection requires you to hardcode these IDs into your local configuration file to establish a direct, low-latency link.

Software dependencies: Node.js and Claude Desktop

The MCP server runs as a local process. It requires the Node.js runtime environment (version 18 or higher) to execute the JavaScript-based server files.

You must also use the Claude Desktop app rather than the web-based chat interface, as the browser version lacks the system-level permissions to communicate with local MCP servers via the filesystem.

Installing Node.js provides the npx command, which Claude uses to fetch and run the latest Webflow MCP package without requiring you to manually manage package versions.

Configure the Webflow MCP server connection

The Claude Desktop configuration file is the central registry for Model Context Protocol (MCP) servers. It defines the environment variables and executable paths necessary for the client to initiate a connection.

Accessing the Claude Desktop configuration file

Locating the config.json file requires navigating to the application data directory for your operating system. On macOS, the Library folder under Application Support holds this file, while Windows users must access the AppData Roaming directory.

Standard file paths for configuration

The specific path for macOS users is ~/Library/Application Support/Claude/claude_desktop_config.json. You can reach this by opening Finder, selecting Go to Folder, and pasting the path directly into the prompt.

Windows users will find their configuration file at %APPDATA%\Claude\claude_desktop_config.json. Entering this string into the File Explorer address bar will jump directly to the hidden directory where the JSON file resides.

Opening this file in a dedicated text editor ensures that the script contains no hidden formatting characters. In the Claude Desktop interface, this direct file access is the only method for registering new servers.

Injecting the Webflow server JSON block

Insert a specific JSON object into the mcpServers section of the configuration file to enable the connection. This block specifies the command to run, typically npx, and includes the @modelcontextprotocol/server-webflow package name as an argument.

You must also include an environment variable labeled WEBFLOW_API_TOKEN containing your site’s secret key. Failure to nest this key correctly within the env object results in an authentication error.

To ensure Claude targets the correct project, you must also define the WEBFLOW_SITE_ID and WEBFLOW_WORKSPACE_ID within the same environment object. These variables act as the static routing instructions that bind the MCP server to your specific Webflow instance.

{
 "mcpServers": {
 "webflow": {
 "command": "npx",
 "args": [
 "-y",
 "@modelcontextprotocol/server-webflow"
 ],
 "env": {
 "WEBFLOW_API_TOKEN": "YOUR_V2_TOKEN_HERE",
 "WEBFLOW_SITE_ID": "YOUR_SITE_ID_HERE",
 "WEBFLOW_WORKSPACE_ID": "YOUR_WORKSPACE_ID_HERE"
 }
 }
 }
}

Verifying the server status in the Claude UI

Validation occurs within the Claude Desktop interface by checking for the hammer icon located in the bottom right corner of the chat input field. Hovering over this icon displays a list of active MCP servers.

The Webflow server must appear here with a green status indicator showing a live connection. Only when the UI confirms this status can models like Claude Sonnet 5.5 or Gemini 3.8 Flash interact with your Webflow collections to perform live updates.

Testing Webflow CMS read and write capabilities

Testing the connection requires executing a sequence of operations that confirm the Model Context Protocol (MCP) server can both interpret the Webflow schema and commit data to its database.

Fetching your site structure with 'list-sites'

The list-sites command is the primary diagnostic tool for verifying that your API token has the correct scope permissions to view the project hierarchy.

When you issue this command, the model retrieves a JSON payload containing the unique identifiers for every site associated with your account. You must confirm that the site ID returned matches the specific project you intend to edit.

Creating a Webflow CMS item with Claude prompts

Writing to the CMS involves sending a structured request that matches the specific field requirements of your target collection. You can instruct a model like Claude Opus 5.5 or Gemini 3.8 Flash to generate a new entry by describing the content in plain English.

For this to work, the prompt must include every required field defined in your Webflow collection settings. The prompt needs the site_id obtained from the initial discovery step.

Validating changes in the Webflow Designer

In the Webflow Designer, manual verification is the only way to ensure that the MCP server has correctly mapped the model’s output to the site’s database fields. Open the CMS Collections panel and locate the specific collection you targeted to check for the new entry.

You must publish the site or refresh the Designer view to see these updates. The Webflow interface does not always poll for external API changes in real-time.

Technical constraints of the Webflow MCP implementation

The Webflow MCP server restricts Claude’s operational authority to the CMS Data API, preventing the model from altering the visual CSS or DOM structure of a site.

CMS-only scope: What the MCP cannot edit

Claude cannot modify site styles, classes, or interactions because the current implementation lacks access to the Designer APIs. Because the MCP server is scoped to the Webflow Data API, the model cannot adjust a padding value or change a flexbox property.

Webflow API rate limits for queries and filters

Strict rate limits that vary by site plan govern API throughput, forcing Claude to batch its operations or face 429 "Too Many Requests" errors.

Plan Type	Requests Per Minute
Starter/Basic	60
CMS/Business/Premium	120
Site Publish	1

Webflow specifies that beyond request frequency, the Data API imposes specific complexity constraints on every individual query: 10 filter terms.

Webflow's analysis puts the limit for sort fields at 3 terms, preventing Claude from building overly complex logical chains and requiring the user to simplify search criteria.

According to Webflow, this limit restricts the granularity of how Claude can organize data views to 2 text-search terms.

Security considerations for API key exposure

Storing a plaintext Webflow Data API Token in your local claude_desktop_config.json file creates a single point of failure for site security.

To mitigate this risk, administrators must use Site-Specific Tokens rather than Workspace Tokens. This ensures that a compromised key only grants access to a single project instead of the entire client portfolio.

Scaling Webflow operations with Activepieces automation

Moving from manual prompts to automated triggers

Activepieces runs as a per-project MCP server, allowing Claude or Cursor to build and modify automation flows directly without the user ever touching a separate builder interface.

This setup grants the assistant genuine CRUD authority through an open protocol, moving beyond a simple chat widget that only explains a UI it cannot control.

You can verify this by connecting Claude Desktop to the server endpoint and observing the tool calls and resulting flow changes in the run trace.

This shift removes the latency inherent in manual oversight. By deploying a self-hosted instance of Activepieces, an administrator retains full control over the execution environment.

A "New Row in Google Sheets" trigger connects to an "Activepieces" hub, which then pushes a "Create Live Item" action to the Webflow API, bypassing the need for manual Claude interaction.

Syncing external data to Webflow CMS without MCP prompts

Every connector in Activepieces is an agent tool, meaning a integration registered once functions both as a flow step and as a schema on the per-project MCP server.

This allows Claude or an agent you built to reach the same catalog used by companies like MoneyGram and FundingSocieties without a separate export step.

There is no need to wire up integrations twice or perform a second migration to make your Webflow data reachable by AI.

Instead of asking a model to "Sync these five products," an administrator configures an "Integration" to map specific fields from a source directly to Webflow CMS Collection fields.

Google Sheets acts as a lightweight data entry portal for non-technical staff to trigger site updates. The Webflow API receives structured POST requests to the "Create Collection Item" endpoint to reflect external changes.

Frequently asked questions about Webflow MCP setup

Why is my Webflow MCP server failing to start?

Malformed entries in the claudedesktopconfig.json file typically cause server startup failures, which prevents the Claude Desktop application from initializing the Node.js environment.

If the JSON syntax contains a missing comma or an unclosed quote, the application will silently fail to load the server, leaving the Model Context Protocol (MCP) icon inactive in the interface.

You must also verify that the WEBFLOW_API_TOKEN environment variable is scoped correctly within the configuration object. If it is not, the server will encounter a 401 Unauthorized error during the handshake process.

Because the Webflow API requires a valid Bearer token, any mismatch in the permission scopes assigned to the token will result in the server process terminating immediately to prevent insecure data calls.

Can I use the Webflow MCP server with ChatGPT or Gemini?

The Webflow MCP server is currently restricted to the Claude Desktop client. It cannot be utilized by OpenAI’s GPT-6 Astra or Google’s Gemini 3.8 Flash.

While the Model Context Protocol is designed as an open standard, the specific implementation required to bridge local server processes with a cloud-based LLM is only functional within the Anthropic ecosystem.

Attempting to point other model interfaces at the local MCP directory will result in a connection timeout. Those platforms lack the local bridge architecture necessary to communicate with your machine's file system.

Consequently, users must rely on Claude Sonnet 5.5 or Claude Opus 5.5 to execute site edits through this specific server implementation.

How do I update the MCP server to the latest version?

Updates are managed through the Node Package Manager (npm) by executing the install command with the global flag.

1. Running npm install -g @modelcontextprotocol/server-webflow replaces the existing binaries with the most recent build.
2. This is necessary to maintain compatibility as Webflow updates its API endpoints.
3. After the update is complete, you must restart the Claude Desktop application to force the environment to reload the new server logic.

Failing to update regularly can lead to "Method not found" errors when the Claude client attempts to call a function that has been renamed or deprecated by the Webflow backend.

Does the MCP server support Webflow Ecommerce collections?

Support for Webflow Ecommerce is currently limited to basic CRUD operations on collection items. It does not extend to order management or payment gateway settings.

You can use the server to update product descriptions or inventory counts, but you cannot modify the underlying site tax settings or shipping zones through the MCP interface.

The Webflow Data API treats Ecommerce settings as a distinct administrative layer separate from the standard CMS collections.

If your workflow requires modifying SKU-level metadata, ensure your API token has "Products" permissions enabled. Otherwise, the server will return a forbidden status code when attempting to access those specific tables.

Related reading

• How to Connect the Klaviyo MCP Server in 2026
• Connect Ramp to Claude for Automated Expense Auditing
• Twilio MCP Server Setup for Claude and AI Agents 2026

References

• Webflow