Beta server

Install Claude Code CLI

If you haven’t installed Claude Code yet, follow the installation guide.

Verify the installation:

$
claude --version

Add the Webflow Beta MCP server

Use the CLI to add the Webflow Beta MCP server:

$
claude mcp add --transport http webflow-beta https://mcp.webflow.com/beta/mcp

This command adds the Webflow Beta MCP server to your Claude Code configuration.

Authorize the MCP server and app

Start Claude Code:

$
claude

When Claude Code is running, use the /mcp command to manage MCP servers:

$
/mcp list

Select the Webflow Beta MCP server from the list. If you haven’t authenticated yet, Claude Code automatically opens a browser window that shows an OAuth login page where you can authorize the Webflow sites you want the MCP server to access and install the MCP Bridge App.

Open the Webflow Designer

Open your site in the Webflow Designer.

Or, type this prompt in Claude Code:

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

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.

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

Add the Beta MCP server to Cursor

1. Go to Settings → Cursor Settings → MCP & Integrations.

2. Under MCP Tools, click + New MCP Server/Add Custom MCP.

3. Paste the following configuration into .cursor/mcp.json (or add the webflow-beta entry to your existing configuration):

   .cursor/mcp.json

   1
   {
   2
     "mcpServers": {
   3
       "webflow-beta": {
   4
         "url": "https://mcp.webflow.com/beta/mcp"
   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 configuration prevents repeated authentication prompts when opening multiple Cursor windows without being authenticated.

4. Save and close the file.

Authorize the MCP server and app

1. Go to Settings → Cursor Settings → MCP & Integrations.
2. Authorize the Webflow Beta MCP server by clicking the Connect button.
3. Cursor automatically opens an OAuth login page where you authorize the Webflow sites you want to access and install the companion app.
4. When authorization is complete, the Webflow MCP indicator turns green.

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

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 companion app to connect to the MCP Server.

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