Resources

MCP server and AI tools

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

The Model Context Protocol (MCP) server connects your AI tools directly to your Webflow projects. Prompt an AI agent to update designs, manage site data, and work with the CMS from your preferred AI environment.

For developers using AI-powered tools like Cursor or Claude Desktop, the MCP server enhances an agent’s understanding of your Webflow projects. It’s built on Webflow’s APIs, exposing them as tools your AI agent can use to create 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 companion app that syncs your live 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}
    Use project-specific MCP configuration to avoid repeated auth prompts

    Configure mcp.json per project instead of using Cursor’s global settings. This prevents repeated authentication prompts when opening multiple Cursor windows without being authenticated.

  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 companion 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 companion 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
Start with a fresh project for better MCP performance

MCP servers perform more efficiently with smaller codebases. In Cursor, create a new project when using the MCP server to reduce tool call overhead and improve response times.

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 implements Anthropic’s Model Context Protocol specification to standardize communication between AI agents and Webflow’s APIs.

Architecture

The server acts as a translation layer that exposes Webflow’s APIs as MCP tools. Built as an open-source package, it wraps Webflow’s REST and Designer APIs into a format that any MCP-compatible AI agent can understand and execute.

Remote deployment

The server runs remotely to enable OAuth authentication, allowing you to:

  • Authorize multiple Webflow sites without storing API keys locally
  • Maintain secure, token-based access to your projects

This architecture eliminates the need to manage API credentials in your local environment while providing secure access to your Webflow projects.

Remote authorization is currently experimental

Remote authorization relies on the mcp-remote npm package, which is currently considered experimental.

Available tools

The MCP server exposes Data and Designer APIs as MCP tools. See the complete list of available tools and their parameters in the MCP server repository.

Data API tools access your site’s content and structure for bulk operations and content synchronization:

  • CMS operations: Create, read, update, and delete collection items
  • Asset management: Upload, organize, and manage media files
  • Site metadata: Access site settings, domains, and configuration

LLMS.txt documentation

With Webflow’s LLMS.txt file, you can access Webflow’s documentation in your AI client without needing to load the webpage in your browser. This optimized structure helps LLMs respond with accurate code snippets and multi-step sequences.

Using LLMS.txt docs with 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 companion 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 companion 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.