MCP Server

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

What you’ll need

Estimated time: 5 minutes

For local installation options, see the NPM package documentation.

Installation

Select your AI tool below to begin:

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.

Add connector option in the drop-down list
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.

Add connector option in the drop-down list
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.
Webflow MCP Bridge App
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

Enable developer mode

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

2

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.

3

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}
4

Restart Claude Desktop

Save the file and restart Claude Desktop.

5

Grant access

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

6

Select sites or Workspaces

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

Add connector option in the drop-down list
7

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.
Webflow MCP Bridge App
8

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
MCP Bridge App installation

The MCP Bridge App installs automatically during OAuth authorization. It’s not available on the public Webflow App marketplace.

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.

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.

Review available tools

See the complete list of Data API and Designer API tools you can use with your AI agent.

Learn how it works

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