How to Connect Webflow MCP with Site using Cursor

What is Webflow MCP?

MCP stands for “Model Context Protocol,” which is just a technical name for a connector that lets an AI see your site structure, CMS items, and settings in a clear, organized way or we can say that MCP is the bridge that lets you talk to your Webflow site in plain language through an AI (for example, “update all blog posts to have this new category”) and have those changes actually happen in Webflow.

Before we get into the steps, let us know about what cursor ai is:

Cursor AI is an AI-powered coding assistant designed to help developers write, improve, and debug code more efficiently. For non-developers, it can be understood as a smart helper that understands coding instructions given in natural language and generates or fixes code automatically, saving time and reducing errors. Instead of writing lines of code manually, developers can talk to Cursor AI and get working code snippets, animations, or website features that can be instantly tested and updated in real time.

Steps to Connect with Webflow:

Step 1: firstly, Install the node js in you system, here is the link for downloading node js packet - https://nodejs.org/en/download

‍

Step 2:

Install Cursor App for desktop

‍

Step 3:

Install this below code from cursor to config file,

{"mcpServers": {"webflow": {"url": "https://mcp.webflow.com/sse"}}}

Here is guide how to do that:

• First copy the code from above or from https://developers.webflow.com/mcp/reference/getting-started

• Next, open the Cursor app and click the settings icon. Navigate to the Tools & MCP tab, then select New MCP Server. This will open the mcp.json file—paste the code there.

‍

Step 4:

Next, click the settings icon in Cursor AI and navigate to Installed MCP Servers. Locate the Webflow entry and click Connect. A popup will appear with Open and Copy Link options—once the browser opens, approve access in Webflow, then authorize the specific workspace or website.

After authorizing, return to the Installed MCP Server section where you will see the Webflow connection confirmed with a green button.

‍

Step 5:

In Webflow Designer, press CMD + E and type "Webflow MCP Bridge App." A popup will appear indicating whether the MCP connection is active.

‍

Step 6:

Now, open the Cursor AI app and click the Toggle AI Pane icon near the settings in the top right corner to open the chatbot.

‍