Webflow MCP server

Webflow's MCP Server provides a protocol implementation that allows AI agents to interact with Webflow APIs through the Model Context Protocol. This server enables AI assistants to manage your Webflow sites, pages, collections, and custom code through natural language commands.

Prerequisites

• Node.js
• NPM
• A Webflow Account

Hosted Setup (Cloudflare Workers)

For Cursor

1. Go to Settings → Cursor Settings → MCP
2. Click + Add New Global MCP Server
3. Add the following configuration:

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

4. Save and Cursor will open an OAuth login for authorizing Webflow sites access.

For Claude Desktop

1. Open Settings → Developer
2. Click Edit Config
3. In claude_desktop_config.json, add:

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

4. Save and restart Claude (command/ctrl + R) to open the OAuth login.

For Windsurf

1. Navigate to Windsurf - Settings → Advanced Settings
2. Scroll to the Cascade section → Add Server → Add custom server +
3. Add the configuration:

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

4. Click Save to open the OAuth login.

Reset OAuth Tokens

If you experience issues, reset your OAuth tokens with:

rm -rf ~/.mcp-auth

Local Installation

Step 1: Get your Webflow API token

1. Go to Webflow's API Playground
2. Log in and generate a token
3. Copy the token from the Request Generator

Step 2: Configure your AI editor

Use this configuration template:

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["-y", "[email protected]"],
      "env": {
        "WEBFLOW_TOKEN": "<YOUR_WEBFLOW_TOKEN>"
      }
    }
  }
}

For Cursor:

1. Go to Settings → Cursor Settings → MCP
2. Click + Add New Global MCP Server
3. Paste the configuration
4. Replace <YOUR_WEBFLOW_TOKEN> with your token
5. Save and restart Cursor

For Claude Desktop:

1. Open Settings → Developer
2. Click Edit Config
3. Open claude_desktop_config.json and paste the configuration
4. Replace <YOUR_WEBFLOW_TOKEN> with your token
5. Save and restart Claude

Troubleshooting

Verify API Token

1. Go to Webflow's API Playground
2. Generate a new token
3. Update your configuration
4. Restart your MCP client

Check Node.js & NPM Installation

Verify both are installed by running:

node -v
npm -v

Clear NPM Cache

npm cache clean --force

Fix NPM Permissions

If you need to use sudo for npm commands, follow the NPM docs to fix permissions.

Available Tools

Sites Management

sites - list; // List all sites
sites - get; // Get site details
sites - publish; // Publish site changes

Pages Management

pages - list; // List all pages
pages - get - metadata; // Get page metadata
pages - update - page - settings; // Update page settings
pages - get - content; // Get page content
pages - update - static - content; // Update page content

CMS Management

collections - list; // List collections
collections - get; // Get collection details
collections - create; // Create a collection
collection - fields - create - static; // Create a static field
collection - fields - create - option; // Create an option field
collection - fields - create - reference; // Create a reference field
collection - fields - update; // Update a custom field
collections - items - create - item - live; // Create items
collections - items - update - items - live; // Update items
collections - items - list - items; // List collection items
collections - items - create - item; // Create collection items (staged)
collections - items - update - items; // Update collection items (staged)
collections - items - publish - items; // Publish collection items

Custom Code Management

custom code - add - inline - site - script // Register an inline script for a site
custom code - get - registered - site - script - list // List all scripts registered to a site
custom code - get - applied - site - script - list //Get all scripts applied to a site
custom code - delete site custom code // Remove scripts from a site 

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 are not supported and will result in errors.

How to add this MCP server to 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 > MCP and click "Add new global MCP server".

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

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

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 explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.