Webflow MCP server for AI agents

Webflow's MCP server allows AI agents to interact with Webflow APIs, enabling you to manage your Webflow sites through AI-powered assistants. This implementation uses the Webflow JavaScript SDK to provide a seamless connection between AI tools and your Webflow account.

Prerequisites

Node.js (version 22.3.0 or higher)
NPM
A Webflow Account

Remote Installation

Setting Up in Cursor

Go to Settings → Cursor Settings → MCP & Integrations
Under MCP Tools, click + New MCP Server
Paste the following configuration into .cursor/mcp.json:

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

Save and close the file. Cursor will open an OAuth login page where you can authorize Webflow sites.

Setting Up in Claude Desktop

Enable developer mode: Help → Troubleshooting → Enable Developer Mode
Open developer settings: File → Settings → Developer
Click Get Started or edit the configuration to open claude_desktop_config.json and add:

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

Save and restart Claude Desktop (Cmd/Ctrl + R). An OAuth login page will open to authorize sites.

Using the MCP Server

Opening the Webflow Designer

Open your site in the Webflow Designer, or ask your AI agent:

Give me a link to open <MY_SITE_NAME> in the Webflow Designer

Connecting the MCP Webflow App

In the Designer, open the Apps panel (press E)
Launch your published "Webflow MCP Bridge App"
Wait for the app to connect to the MCP server

Example Prompts

Try these prompts with your AI assistant:

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

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

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

Troubleshooting

Resetting Your OAuth Token

To reset your OAuth token, run:

rm -rf ~/.mcp-auth

Common Issues

Webflow API Token Issues

Go to Webflow's API Playground
Log in and generate a token, then copy it from the Request Generator
Replace YOUR_WEBFLOW_TOKEN in your MCP client configuration
Save and restart your MCP client

Verifying Node.js and NPM Installation

Check your installed versions:

node -v
npm -v

Clearing NPM Cache

If you encounter issues with npx, try clearing your NPM cache:

npm cache clean --force

Fixing NPM Permissions

If npm -v requires sudo, you may need to fix permissions following the NPM documentation.

Known Limitations

Static Page Content Updates

The pages_update_static_content endpoint currently only supports updates to localized static pages in secondary locales. Updates to static content in the default locale aren't supported and will result in errors.

Additional Resources

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

claude mcp add-json "webflow" '{"command":"npx","args":["mcp-remote","https://mcp.webflow.com/sse"]}'

See the official Claude Code MCP documentation for more details.

For Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > Tools & Integrations and click "New MCP Server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

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

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

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

2. Add this to your configuration file:

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

3. Restart Claude Desktop for the changes to take effect