MCP Server

Getting started

The Webflow MCP server connects your AI agent directly to your Webflow projects. In this guide, you’ll install the remote MCP server, authorize 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 MCP server to Claude Desktop, Cursor, or Windsurf
  2. Authorize sites - Connect the MCP server to your Webflow account via OAuth
  3. Launch companion app - Open the bridge app in the Webflow Designer for real-time syncing
  4. Start prompting - Use natural language to interact with your sites

What you’ll need

Estimated time: 5 minutes

Companion app installation

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

For local installation options, see the NPM package documentation.

Installation

Select your AI tool below to begin:

1

Enable developer mode

In the menu bar, click Help -> Troubleshooting -> Enable Developer Mode

2

Open the developer tools

In the menu bar, click File -> Settings. Then in the Claude Desktop window, select Developer

From here click Get Started or Edit Config to open the configuration file in your code editor.

Claude Desktop MCP
3

Add the MCP server to the configuration

Open the claude_desktop_config.json file in a code editor and paste the following configuration (or add the webflow part to your existing configuration):

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

Save and restart Claude Desktop

Save the file and restart Claude Desktop (command/ctrl + R).

5

Authorize the MCP server and app

When Claude restarts, it will automatically open a new browser window showing an OAuth login page where you can authorize the Webflow sites you want the MCP server 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
6

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
7

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

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.