> This page is for MCP Server.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Windsurf

> Install and configure Webflow's MCP server in Windsurf so your AI coding agent can build, manage, and update your Webflow sites directly from the editor.

To connect Windsurf to the Webflow MCP server, follow these steps.

#### 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`**

   ```json mcp_config.json
   {
     "mcpServers": {
       "webflow": {
         "serverUrl": "https://mcp.webflow.com/mcp"
       }
     }
   }
   ```

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](/mcp/reference/how-it-works#webflow-mcp-bridge-app).

> **Limit authorized sites**
>
> Limit the number of sites for security and performance.

#### 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](/mcp/examples)

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

#### [Use skills](/mcp/reference/skills)

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

#### [Learn how it works](/mcp/reference/how-it-works)

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