Webflow Integration Service for AI Agents (Model Context Protocol)

This Node.js implementation adheres to the Model Context Protocol (MCP) specification, facilitating interaction with Webflow through its JavaScript SDK (Webflow SDK Link). It serves as the crucial link allowing autonomous AI systems to manipulate Webflow sites.

Refer to the official Webflow Data API documentation for comprehensive API details.

Prerequisites for Operation

To establish this connection, the following environment components are necessary:

• A functional installation of Node.js
• Node Package Manager (NPM)
• An active Webflow Account (Registration Link)

🚀 Remote Deployment & Authorization

Initiate the service via a remote connection. This approach leverages OAuth for authenticating against your designated Webflow properties, requiring a supplementary application running within the Webflow Designer to synchronize the live interface with the AI execution context.

Minimum Environment Specification

• Node.js runtime version 22.3.0 or superior.

Compatibility Notice: Strict adherence to Node.js 22.3.0+ is enforced. For version resolution guidance, consult Webflow's AI Tools compatibility documentation.

Configuration for Cursor IDE

1. Navigate within Cursor to Settings → Cursor Settings → MCP & Integrations.
2. Locate the MCP Tools section and select + New MCP Server.
3. Inject the following configuration structure into your .cursor/mcp.json file (or merge it into an existing configuration):

{ "mcpServers": { "webflow": { "url": "https://mcp.webflow.com/sse" } } }

Configuration Tip: Utilizing a project-specific mcp.json file can circumvent repetitive authorization dialogues across multiple Cursor instances. Review Cursor's configuration location documentation.

1. Persist the file changes. Cursor should automatically prompt an OAuth flow to grant permissions to your Webflow properties.

Accessing the Webflow Design Environment

Access the site within the Webflow Designer, or instruct your AI assistant:

text Provide a direct URL to launch within the Webflow Designer.

Activating the MCP Bridge Application

1. In the Designer interface, invoke the Applications panel (shortcut: E).
2. Execute the pre-published "Webflow MCP Bridge App".
3. Await confirmation that the Bridge App has successfully established a connection with the remote MCP service.

Initial AI Interaction Examples

Execute these sample commands via the AI chat interface:

text Scrutinize my five most recent articles and propose three novel content themes, complete with target SEO terminology.

text Identify preceding publications covering analogous subjects and insert relevant internal hyperlinks into my newest article.

text Design a responsive introductory card component on the homepage, incorporating a clear Call-To-Action (CTA) button.

Configuration for Claude Desktop

1. Enable advanced diagnostics: Help → Troubleshooting → Enable Developer Mode.
2. Access developer configuration settings: File → Settings → Developer.
3. Initiate setup or modify claude_desktop_config.json by adding:

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

1. Save and relaunch Claude Desktop (Cmd/Ctrl + R). An OAuth dialog will appear for site authorization.

Navigating to the Webflow Designer (Claude)

• Open your designated site in the Webflow Designer, or prompt the AI agent:

text Generate an access URL for in the Webflow Designer.

Launching the MCP Webflow App (Claude)

1. In the Designer, open the application sidebar (key E).
2. Start the "Webflow MCP Bridge App" deployment.
3. Confirm connectivity between the Bridge App and the MCP server endpoint.

Example Prompts for Claude

text Analyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords

text Find older blog posts that mention similar topics and add internal links to my latest post

text Create a hero section card on my home page with a CTA button and responsive design

Revoking OAuth Credentials

To invalidate the current OAuth session token, execute the following command in your operating system's terminal:

bash rm -rf ~/.mcp-auth

Node.js Version Alignment

Consult the official Webflow documentation for the most current Node.js dependency matrix.

---

🖥️ Local Deployment Methodology

Alternatively, you can orchestrate the MCP service execution on your local machine. This necessitates:

• Creation and formal registration of a custom MCP Bridge Application within an authorized Webflow workspace.
• Configuration of your AI environment to point to the locally hosted MCP service, utilizing a valid Webflow API Authentication Token.

Phase 1: Establishing and Deploying the MCP Bridge Application

Prior to linking the local MCP server to your AI client, the Webflow MCP Bridge App must be built and published within your workspace.

Execution Sequence

1. Webflow Application Registration
2. Initiate a new application within your Webflow Workspace settings.

3. Adhere strictly to the formal procedure: Application Registration Guide.

4. Acquiring the Bridge Application Source Code

5. Method A (Pre-compiled): Download the latest bundle.zip package from the project releases archive.

6. Method B (Compilation from Source): Clone the repository and compile locally: bash git clone https://github.com/virat21/webflow-mcp-bridge-app cd webflow-mcp-bridge-app

   • Subsequently, follow the compilation instructions detailed within that repository.

7. Publishing the Designer Extension

8. Navigate to: Webflow Dashboard → Workspace settings → Apps & Integrations → Develop → Locate Your App.
9. Select the option “Publish Extension Version”.

10. Upload the compiled bundle.zip file you generated.

11. Loading the Application in the Designer

12. Once publishing is complete, initiate the MCP Bridge App via the Designer → Apps panel for any site in your workspace.

Phase 2: Configuring the Host AI Client

Cursor Client Configuration

Update .cursor/mcp.json with the following, ensuring the WEBFLOW_TOKEN is supplied:

{ "mcpServers": { "webflow": { "command": "npx", "args": ["-y", "webflow-mcp-server@latest"], "env": { "WEBFLOW_TOKEN": "" } } } }

Claude Desktop Client Configuration

Update claude_desktop_config.json similarly:

{ "mcpServers": { "webflow": { "command": "npx", "args": ["-y", "webflow-mcp-server@latest"], "env": { "WEBFLOW_TOKEN": "" } } } }

Phase 3: Utilizing the Local MCP Service with Webflow

• Open the Webflow Designer for the target site.
• Open the application interface (key E) and launch the established “Webflow MCP Bridge App”.
• Confirm the Bridge App signals a successful connection to the local MCP endpoint.
• If the Bridge App specifically requests a local host connection address, invoke the get_designer_app_connection_info tool from your AI client and input the returned http://localhost:<port> value.

Optional: Direct Command-Line Execution

Execute the server directly from the shell, injecting the token as an environment variable:

Bash/Zsh: bash WEBFLOW_TOKEN="" npx -y webflow-mcp-server@latest

PowerShell: powershell $env:WEBFLOW_TOKEN="" npx -y webflow-mcp-server@latest

Invalidation of Authentication Credentials

To force a re-authentication sequence, delete the stored authorization file via terminal command:

bash rm -rf ~/.mcp-auth

Node.js Version Adherence

Ensure your Node.js environment complies with Webflow’s specified requirements, detailed in the developer guidance link.

❓ Troubleshooting Common Failures

If the MCP service fails to initialize within your MCP client (e.g., Cursor or Claude Desktop), attempt the following diagnostic steps.

Verify Webflow API Token Validity

1. Access the Webflow API Authorization Portal, authenticate, and retrieve a valid token from the Request Generator interface.
2. Substitute the placeholder YOUR_WEBFLOW_TOKEN in your client configuration file with the copied credential.
3. Save the configuration and reinitiate your MCP client application.

Confirm Node and NPM Installation

Verify core runtime prerequisites are present:

• Node.js Check
• NPM Check

Execute these checks in your terminal:

shell node -v npm -v

Cache Resolution

Stale entries in the NPM cache can interfere with package resolution via npx. Clear the cache if problems persist:

bash npm cache clean --force

Resolving Global Package Permission Errors

If executing npm -v fails but sudo npm -v succeeds, global permission ownership may be misconfigured. Consult the official NPM documentation on resolving permission errors for remediation. (Note: Shell configuration changes often require a shell restart to become active.)

🛠️ Toolset Inventory

Inspect the ./tools directory within the project source to view the full catalogue of implemented functionalities.

🗣️ Prompts & Auxiliary Information

This specific integration package excludes boilerplate prompts or static resources defined in the base MCP specification. Future iterations may incorporate these elements pending wider adoption across primary MCP client ecosystems.

📄 Webflow Developer Assets

• Official Webflow Data API Specification
• Webflow SDK Source Repository

⚠️ Current Operational Constraints

Limitations on Static Page Content Updates

The pages_update_static_content endpoint currently only processes modifications for static page elements located in secondary (non-default) language locales. Updates targeting default locale static content will result in API failures.