Cursor | Webflow Developer Documentation

Webflow provides a plugin that provides Cursor with direct access to the Webflow MCP server. If you prefer, you can connect manually, as described in Connecting Cursor manually.

Using the Cursor plugin

Find the Webflow plugin

In the Cursor Marketplace, find the Webflow plugin and install it.

Add the plugin to Cursor

Click Add to Cursor.

Grant access

The first time you use the Cursor plugin, grant Cursor access to your Webflow account and log in to your Webflow account if you are prompted to do so.

Select sites or Workspaces

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

Open the Webflow MCP Bridge App

In the designer, open the Apps panel by pressing the E key.
Launch the “Webflow MCP Bridge App”. This app was automatically installed during the OAuth authorization process.
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

Connecting Cursor manually

To connect Cursor manually, click the Add to Cursor button below or follow the instructions below:

Install the MCP server on Cursor

Go to Settings → Cursor Settings → MCP & Integrations
Under MCP Tools, click + New MCP Server/Add Custom MCP
Paste the following configuration into .cursor/mcp.json (or add the webflow part to your existing configuration):
.cursor/mcp.json
```
1 {
2   "mcpServers": {
3     "webflow": {
4       "url": "https://mcp.webflow.com/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 prevents repeated authentication prompts when opening multiple Cursor windows without being authenticated.
Save and close the file

Authorize the MCP server and app

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

Limit authorized sites

Limit the number of sites for security and performance. To reauthorize, click Logout by expanding Webflow MCP.

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 MCP Webflow App

In the designer, open the Apps panel by pressing the E key.
Launch the “Webflow MCP Bridge App”. This app was automatically installed during the OAuth authorization process.
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

Start with a fresh project for better MCP performance

MCP servers perform more efficiently with smaller codebases. In Cursor, create a project when using the MCP server to reduce tool call overhead and improve response times.

Re-authenticating to Cursor

You can re-authenticate and choose different sites and Workspaces to access later by following these steps:

In the Cursor settings, click Tools & MCP.
In the Webflow MCP server, expand the list of tools to reveal the Logout button:
Click Logout. Cursor logs out of the MCP server and shows a Connect button.
Click Connect and follow the prompts to log in to your Webflow account and connect sites and Workspaces again.