Windsurf

Add the MCP server to the configuration

1. Navigate to Windsurf > Settings > Windsurf Settings.

2. Scroll down to the Cascade section and click Open MCP Marketplace.

3. In the Installed MCPs section, click the gear icon to open the configuration file.

4. Paste the following configuration (or add the webflow part to your existing configuration):

   mcp_config.json

   1
   {
   2
     "mcpServers": {
   3
       "webflow": {
   4
         "serverUrl": "https://mcp.webflow.com/mcp"
   5
       }
   6
     }
   7
   }

5. Save and close the file. Windsurf automatically opens a browser window that shows an OAuth login page.

Authorize the MCP server

Authorize the Webflow sites you want the MCP server to access. Authorizing a Webflow site also automatically installs the MCP Bridge App.

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