Webflow MCP server

Webflow's MCP server enables AI agents to interact with Webflow APIs, allowing them to perform tasks like analyzing blog posts, creating content, and managing site elements through the Webflow JavaScript SDK.

Remote Installation

Requirements

• Node.js 22.3.0 or higher

Note: If you encounter version issues, see the Node.js compatibility guidance.

Setting Up With Cursor

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

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

Tip: You can create a project-level mcp.json to avoid repeated auth prompts across multiple Cursor windows.

4. Save and close the file. Cursor will automatically open an OAuth login page for authorization.

Setting Up With Claude Desktop

1. Enable developer mode: Help → Troubleshooting → Enable Developer Mode
2. Open developer settings: File → Settings → Developer
3. 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"]
    }
  }
}

4. Save and restart Claude Desktop (Cmd/Ctrl + R). An OAuth login page will open for authorization.

Connecting to Webflow

For both Cursor and Claude Desktop:

1. Open your site in the Webflow Designer
2. Open the Apps panel (press E)
3. Launch your published "Webflow MCP Bridge App"
4. Wait for the app to connect to the MCP server

Sample Prompts

Try these prompts with your AI agent:

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

Resetting Your OAuth Token

If needed, reset your OAuth token with:

rm -rf ~/.mcp-auth

Local Installation

You can also run the MCP server locally, which requires:

• Creating and registering your own MCP Bridge App in a Webflow workspace
• Configuring your AI client with a Webflow API token

Creating the MCP Bridge App

1. Register a Webflow App

   • Go to your Webflow Workspace and register a new app
   • Follow the Register an App guide

2. Get the MCP Bridge App code

   • Download the latest bundle.zip from the releases page, or
   • Clone and build the repository following instructions

3. Publish the Designer Extension

   • Go to Webflow Dashboard → Workspace settings → Apps & Integrations → Develop → Your App
   • Click "Publish Extension Version" and upload your bundle.zip file

4. Open the App in Designer

   • Launch the MCP Bridge App from the Designer → Apps panel

Configuring Your AI Client

Cursor Configuration

Add to .cursor/mcp.json:

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

Claude Desktop Configuration

Add to claude_desktop_config.json:

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

Running Via Shell (Optional)

WEBFLOW_TOKEN="<YOUR_WEBFLOW_TOKEN>" npx -y webflow-mcp-server@latest

PowerShell:

$env:WEBFLOW_TOKEN="<YOUR_WEBFLOW_TOKEN>"
npx -y webflow-mcp-server@latest

Troubleshooting

Webflow API Token Issues

1. Go to Webflow's API Playground
2. Log in and generate a token
3. Copy the token from the Request Generator
4. Update your configuration and restart your MCP client

Node.js and NPM Installation

Ensure Node.js and NPM are installed:

node -v
npm -v

NPM Cache Issues

Clear your NPM cache if needed:

npm cache clean --force

Permission Issues

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

Known Limitations

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.

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