Resources

MCP server and AI tools

Work with Webflow's APIs using our official MCP server and AI tools
MCP Hero Image

Webflow’s Model Context Protocol (MCP) server lets you connect your AI tools directly to your projects. With the MCP server, you can prompt an AI agent to update designs, manage site data, and work with the CMS all from your preferred AI environment.

For developers using AI-powered tools like Cursor or Claude Desktop, the Webflow MCP server enhances your agent’s understanding of your projects. It builds on Webflow’s APIs, exposing them as tools your AI agent can call. These tools let you design elements, styles, and variables on the canvas, as well as manage collections, custom code, assets, and other site data.

See the full list of available tools in the MCP server documentation.

Installation

Get started by installing Webflow’s remote MCP server, which uses OAuth to authenticate with your Webflow sites, and a bridge app to connect your open canvas with your AI agent.

For local installation, please refer to the instruction in the NPM package documentation.

Requirements

Node.js version 22.3.0 or higher.

Node.js Version Management

Currently, the MCP server only supports Node.js version 22.3.0 or higher. See the Node.js compatibility section for more information on troubleshooting Node.js issues.


1

Install the MCP server on 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 (or add the webflow part to your existing configuration):

    .cursor/mcp.json
    1{
    2  "mcpServers": {
    3    "webflow": {
    4      "command": "npx mcp-remote https://mcp.webflow.com/sse"
    5    }
    6  }
    7}

  4. Save and close the file

2

Authorize the MCP server and app

Cursor automatically opens an OAuth login page where you authorize the Webflow sites you want to access and install the bridge app.

Limit authorized sites

Limit the number of sites for security and performance. To refresh your OAuth token, run:

$rm -rf ~/.mcp-auth
3

Open the Webflow Designer

Open your site in the Webflow Designer.

Or, type this prompt in your AI chat window:

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

Open the MCP Webflow App

  1. In the designer, open the Apps panel by pressing the E key.
  2. Launch the “Webflow MCP Bridge App”. This app was automatically installed during the OAuth authorization process.
  3. Wait for the bridge app to connect to the MCP Server
5

Write your first prompt

Start interacting with the MCP server in your AI agent’s chat window. Try prompts like:

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 you need to reset your OAuth token, you can run the following command before restarting your MCP client.

$rm -rf ~/.mcp-auth

Node.js compatibility

Currently, the MCP server only supports Node.js version 22.3.0 or higher. If you encounter issues with Node.js you can try the below approaches to troubleshoot:

To use version 22.3.0 as your default Node.js version, follow these steps:

1

Install nvm

If you don’t have nvm installed, you can install it with the following command (or download from nvm releases).

$curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
2

Restart your terminal

Restart your terminal or run:

$source ~/.bashrc
3

Install Node.js 22.3.0

Run the following command to install Node.js 22.3.0:

$nvm install 22.3.0
4

Set 22.3.0 as the default Node.js version

Run the following command in your terminal to set 22.3.0 as the default Node.js version:

$nvm use 22.3.0
>nvm alias default 22.3.0
5

Clear your npx cache

Run the following command to clear your npx cache:

$rm -rf ~/.npm/_npx
6

Verify installation

Run the following command to verify your Node.js installation:

$ node --version
> npm --version
7

Restart your AI Client

Restart your AI client and verify the MCP server is working.

To use Node Version Switcher (nvs) with the MCP server, follow these steps:

1

Install nvs

Install Node Version Switcher using one of these methods:

$git clone https://github.com/jasongin/nvs ~/.nvs && ~/.nvs/nvs.sh install
2

Install Node.js 22.3.0

Install the required Node.js version with nvs by running the following command in your terminal:

$nvs add 22.3.0
3

Use version 22.3.0

Use the version 22.3.0 with nvs by running the following command in your terminal:

$nvs use 22.3.0
4

Install mcp-remote

Install the MCP remote package using nvm with Node.js 22.3.0:

$nvm use 22.3.0
>npm install -g mcp-remote
5

Get required paths

Get the paths needed for your MCP configuration:

Node.js path:

$nvs which 22.3.0

mcp-remote path:

$which mcp-remote
6

Configure MCP server

Add this configuration to your AI client’s MCP settings, replacing the paths with your actual paths:

1{
2  "mcpServers": {
3    "webflow": {
4      "command": "/path/to/your/nvs/node/22.3.0/bin/node",
5      "args": [
6        "/path/to/your/mcp-remote",
7        "https://mcp.webflow-sai.com/sse"
8      ]
9    }
10  }
11}
7

Verify installation

Restart your AI client and verify the MCP server is working.

Many thanks to @jessehouwing for the inspiration and guidance on using nvs with the MCP server.

How the MCP server works

The Webflow MCP server follows Anthropic’s Model Context Protocol specification to provide a standardized interface between AI agents and Webflow’s APIs.

The MCP server exposes Webflow’s APIs as MCP tools. It’s built as an open-source package that takes Webflow’s API capabilities and presents them as tools that any agent using the Model Context Protocol can understand and use.

Remote deployment: Additionally, the server runs remotely, which enables OAuth, giving users the ability to authorize multiple sites and removing the need to store API keys locally. The mcp-remote npm package handles the connection between your AI client and the remote server.

Available tools

The MCP server provides tools for two main Webflow APIs:

Data API tools: These tools use Webflow’s REST APIs to manage site data, CMS collections, and assets. Your AI agent can create, read, update, and delete content through standard HTTP requests. Note: not all Data API endpoints are available in the MCP server.

Designer API tools: These tools let your AI agent work directly in the Webflow Designer. They connect through a “Bridge App” that runs within the Designer interface, giving your AI agent the ability to see and modify your Webflow canvas in real-time.

See a full list of available tools in the MCP server repository.

Designer bridge app

The Designer API tools work through a bridge app that automatically installs when you authorize the MCP server:

  • Automatic installation: The bridge app is automatically installed and configured during OAuth authorization
  • Designer connection: The app must remain open in the Webflow Designer for the MCP server to access Designer API tools
  • Real-time communication: The bridge app maintains a persistent connection between the MCP server and your active design session
MCP Bridge App
Webflow's remote MCP server is currently experimental

These installation methods rely on the mcp-remote npm package, which is currently considered experimental.

LLMS.txt documentation

Webflow’s documentation is optimized for consumption by AI assistants, making it easier for these tools to generate accurate code examples and guidance.

  • Use https://developers.webflow.com/llms.txt to access the LLM-readable documentation. This optimized structure helps LLMs respond with accurate code snippets and multi-step sequences.
  • Additionally, you can access markdown versions of any documentation page to provide a more structured and context-rich experience for LLMs. To access the markdown version of a page, add .md to the end of the URL. For example, this current doc is available as a markdown file at https://developers.webflow.com/data/docs/ai-tools.md.

Installing docs on Cursor

1In the chat, click the @ button
2Find the “Docs” option
3Click “Add new doc”
4Paste in the following link: https://developers.webflow.com/llms.txt

Once configured, reference Webflow’s documentation by typing @Docs in your chat window and selecting “Webflow” from the list.

FAQs and troubleshooting

Installation and authentication

After installing the MCP server, you may need to restart your AI client to see the new server. Additionally, check to see that your client (for example, Cursor, Claude Desktop) is updated to the latest version.

To authenticate a different Webflow site, you’ll need to remove the existing authentication token by running the following command in your terminal:

$rm -rf ~/.mcp-auth

After executing the command, a new authentication screen should appear, allowing you to select the site you want to authenticate with.

You may receive an 500 error when loading the remote MCP server.

  1. Try refreshing your OAuth token with the following command and then restart your AI client:

    $rm -rf ~/.mcp-auth

  2. Check your current Node.js version to ensure you’re using version 22.3.0 or higher:

    $node --version

    If you can’t use versions 22.3.0 or higher as your default Node.js version, follow the Node.js compatibility section to troubleshoot compatibility issues.

Ensure Node.js and NPM are properly installed

  1. Verify Node.js and NPM installation by running: 
    $node -v
    >npm -v
  2. If you encounter issues with npx, try clearing your NPM cache: 
    $npm cache clean --force
  3. If npm -v only works with sudo, you may need to fix NPM global package permissions. See the official NPM docs for more information.

If the issue persists, see the Node.js compatibility section above for version requirements.

If you make changes to your shell configuration, you may need to restart your shell for changes to take effect.

Currently, only site owners and admins can authorize the MCP server and app. If you aren’t a site owner or admin, you can’t authorize the MCP server and app.

Tools and prompts

To use the MCP server with the Webflow Designer, open the “MCP Bridge App” from the Apps panel. Once open, the app will automatically connect to the MCP server.

You must keep the MCP Bridge App open in the Webflow Designer for the MCP server to connect.

The open-source MCP server package includes tools for AI agents. View the complete list in the GitHub repository.

Currently, the MCP server supports a limited set of tools for the Data and Designer APIs.

If you have specific endpoints and methods you would like to see supported, please open an issue or contact the Developer Relations team at developers@webflow.com.

If you’re only using the Data API tools, you can use the MCP server to update content even if Webflow isn’t open in the browser.

If you’re using the Designer API tools, you need to keep the bridge app open in the Webflow Designer for the MCP server to work.

Currently, the MCP server supports localizing static content, and updating existing localized CMS items. However, the MCP server doesn’t support creating new localized CMS items.

If you have specific endpoints and methods you would like to see supported, please open an issue or contact the Developer Relations team at developers@webflow.com.