Webflow MCP server

Webflow MCP is a Node.js server that implements the Model Context Protocol (MCP) to enable AI agents to interact with Webflow APIs using the Webflow JavaScript SDK. It provides a bridge between AI tools and Webflow's data management capabilities.

Prerequisites

Before getting started, ensure you have:

• Node.js installed
• NPM installed
• A Webflow Account

Quick Start Guide

Get Your Webflow API Token

1. Visit Webflow's API Playground
2. Log in to your Webflow account
3. Generate a token
4. Copy the token from the Request Generator

Add to Your AI Editor

Add the following configuration to your AI editor:

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

For Cursor:

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

For Claude Desktop:

1. Open Settings → Developer
2. Click Edit Config
3. Open claude_desktop_config.json in a code editor
4. Paste the configuration
5. Replace <YOUR_WEBFLOW_TOKEN> with your actual token
6. Save and restart Claude

Troubleshooting

Verify Your Webflow API Token

1. Visit Webflow's API Playground
2. Log in and generate a new token
3. Replace the token in your MCP client configuration
4. Restart your MCP client

Check Node.js and NPM Installation

Confirm Node.js and NPM are properly installed:

node -v
npm -v

Clear NPM Cache

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

npm cache clean --force

Fix NPM Global Package Permissions

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

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

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.