Getting started

The Webflow MCP server connects your AI agent directly to your Webflow projects. Webflow provides plugins that connect several popular agents directly to the MCP server, but you can also connect agents to the MCP server manually.

Then, you can authorize your agent to access your sites and start building with natural language prompts.

Setup overview

The installation process takes about 5 minutes and includes:

1. Configure your AI tool - Add the Webflow connector to Claude Desktop, the Webflow plugin to Cursor, or add the MCP server manually to other tools like Claude Code or Windsurf
2. Authorize sites - Connect the MCP server to your Webflow account via OAuth
3. Launch Bridge App - To give the agent access to the Webflow Designer, open the Webflow MCP Bridge app in the Webflow Designer
4. Start prompting - Use natural language to interact with your sites

For local installation options, see the NPM package documentation.

Installation

Select your AI tool below to begin:

Claude Desktop

Claude Code

Cursor

Postman

Windsurf

Webflow provides a connector that provides Claude Desktop with direct access to the Webflow MCP server. If you prefer, you can connect manually, as described in Connecting Claude Desktop manually.

Using the Claude connector

1

Open the list of connectors

In the Claude chat window, click the + symbol and then click Add connectors.

2

Find the Webflow connector

Search for the Webflow connector by name. You may need to select All instead of Featured to see it.

3

Select the Webflow connector

Click the Webflow connector and then click Connect to install it.

4

Grant access

Grant Claude access to your Webflow account and log in to your Webflow account if you are prompted to do so.

5

Select sites or Workspaces

Select the Webflow sites and Workspaces to give Claude access to and then click Authorize App.

6

Open the Webflow MCP Bridge 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 App to connect to the MCP Server.

7

Write your first prompt

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

List all my collections and show me their field structures

Audit my site for broken links, missing alt text, and incomplete meta descriptions

Create a responsive hero section with a headline, description, and CTA button

Connecting Claude Desktop manually

To add the MCP server to Claude Desktop manually, follow these steps:

1

Install prerequisites

Install Node.js 22.3.0 or later.

2

Enable developer mode

In the menu bar, click Help -> Troubleshooting -> Enable Developer Mode to enable developer mode.

3

Open the configuration file

Open the configuration file in a text editor.

You can find the configuration file by opening the Claude Desktop settings, going to Developer, and clicking Edit Config. You may need to create the file if it does not exist.

4

Add the MCP server URL

Add the Webflow MCP server to the mcpServers section of the configuration file, as in this example:

1
{
2
  "mcpServers": {
3
    "webflow": {
4
      "command": "npx",
5
      "args": ["mcp-remote", "https://mcp.webflow.com/mcp"]
6
    }
7
  }
8
}

5

Restart Claude Desktop

Save the file and restart Claude Desktop.

6

Grant access

Grant Claude access to your Webflow account and log in to your Webflow account if you are prompted to do so.

7

Select sites or Workspaces

Select the Webflow sites and Workspaces to give Claude access to and then click Authorize App.

8

Open the Webflow MCP Bridge 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 App to connect to the MCP Server.

9

Write your first prompt

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

List all my collections and show me their field structures

Audit my site for broken links, missing alt text, and incomplete meta descriptions

Create a responsive hero section with a headline, description, and CTA button

Connecting to the MCP server manually

If Webflow does not provide a connector or plugin for your agent, or if you want to connect to the MCP server manually, you can use the server URL https://mcp.webflow.com/mcp.

If you use the mcp-remote NPM package to connect manually, Node.JS 22.3.0 or later is required.

Managing multiple Claude Code connections

You can set up separate projects in Claude Code to manage authentication and settings for different sites. For example, if you are working on multiple Webflow sites, you can create a separate project for each, which keeps the authentication for each project separate and can help you track your token usage for each site.

Follow these general steps to set up projects in Claude Code and give them access to specific Webflow sites or Workspaces:

1. Create a folder on your computer for the Claude Code project. This project doesn’t need to have any site-related code in it; instead, it holds the Claude Code configuration for the project.

2. In the project folder, open Claude Code and run this command to connect to the Webflow MCP server in a configuration file that is limited to this folder:

   $
   claude mcp add --transport http $PROJECT_NAME https://mcp.webflow.com/mcp -s project

   Replace the variable $PROJECT_NAME with a name for the project, such as webflow-1 or my-webflow-site.

   The -s project argument tells Claude Code to add this MCP server to a configuration file that is scoped to this folder, instead of adding the server to the global Claude Code configuration.

3. Reload Claude Code:

   • If you are using Claude Code in a terminal window, exit and reopen Claude Code.

   • If you are using Claude Code in an IDE, reload the IDE window. For example, if you are using VSCode, press Ctrl+Shift+P and run the command Developer: Reload Window.

   Claude Code does not have access to the updated local configuration until you reload Claude Code.

4. In a Claude Code window, run the command /mcp to list the MCP servers.

5. Select the Webflow MCP server and authenticate to it as usual, including selecting the Webflow sites or Workspaces to give the Claude Code project access to.

   Be sure to select the MCP server in the project and not one of the default servers in the claude.ai domain.

   For example, this screenshot shows the project-specific MCP server configuration in VSCode:

   

   Similarly, this screenshot shows the project-specific MCP server configuration in Claude Code in a terminal window:

   

6. Verify that the instance of Claude Code has access to only the scope that you authenticated it to, such as by asking it to list the sites it has access to or the CMS collections in that site.

Now you can create multiple project folders, each with different access permissions to Webflow sites and workspaces.

Next steps

Now that you’ve installed the MCP server, explore what you can do:

Explore the prompt library

Browse ready-to-use prompts for image optimization, SEO audits, style refactoring, and more.

Use skills

Install skills that help you accomplish common Webflow tasks through natural language.

Review available tools

See information about what you can do through your AI agent, including using the Data API and Designer API.

Learn how it works

Understand the architecture, authentication, and how the MCP server connects to Webflow’s APIs.

Connecting to the Beta server

The Beta MCP server contains functionality that is being developed and may change. Access to the server will be available soon.