Webflow MCP

How to Install and Use Webflow MCP

Webflow MCP is a tool that lets you use AI to work with your Webflow websites through APIs. This guide will show you in a few easy steps how to install and run Webflow MCP, including how to set it up with examples of the code you will need.

Prerequisites

Before you start, you need to have some things ready. You must have Node.js installed on your computer, version 22.3.0 or higher. Also, install NPM (Node package manager), which comes with Node.js. Finally, make sure you have a Webflow account to connect to.

Installing Webflow MCP Remotely

First, let’s set up the Webflow MCP server remotely. This way, you don’t have to run the server on your computer.

Here’s what to do next:

1. Open your MCP client like Cursor.
2. Go to Settings → Cursor Settings → MCP & Integrations.
3. Click + New MCP Server.
4. Add this configuration in your .cursor/mcp.json file:

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

Save the file. Your MCP client will open an OAuth login page. Log in and allow Webflow site access.

Using Webflow MCP in the Designer

Once you connect the MCP server, you can open your Webflow Designer.

• Open your site in the Webflow Designer or ask your AI agent to:

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

• In the Designer, press E to open the Apps panel.
• Find and launch your published Webflow MCP Bridge App.
• Wait for the app to connect to the MCP server.

After this, you are ready to start sending commands to the AI.

Writing Your First Commands

Try these sample prompts in your AI chat to begin:

Analyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords

Find older blog posts that mention similar topics and add internal links to my latest post

Create a hero section card on my home page with a CTA button and responsive design

Local Installation (Optional)

If you want to run Webflow MCP locally on your machine, follow these main steps:

Step 1: Create and Publish MCP Bridge App

• Register a new Webflow App in your Workspace.
• Download or clone the MCP Bridge App code from its repository.
• Publish the app version via the Webflow Dashboard under Apps & Integrations.

Step 2: Configure Your AI Client

Add this configuration to .cursor/mcp.json or claude_desktop_config.json:

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["-y", "webflow-mcp-server@latest"],
      "env": {
        "WEBFLOW_TOKEN": "<YOUR_WEBFLOW_TOKEN>"
      }
    }
  }
}

Make sure to replace <YOUR_WEBFLOW_TOKEN> with the actual Webflow API token.

Step 3: Use MCP Server in Webflow Designer

• Open the Designer for your Webflow site.
• Launch the MCP Bridge App from the Apps panel.
• Wait for the app to connect to the local MCP server.
• If asked for a connection URL, run the tool get_designer_app_connection_info in your AI client and paste the provided http://localhost:<port> URL.

To run locally from your terminal, you can also type:

WEBFLOW_TOKEN="<YOUR_WEBFLOW_TOKEN>" npx -y webflow-mcp-server@latest

Resetting Your OAuth Token

If you have login problems, reset your OAuth token by running:

rm -rf ~/.mcp-auth

---

By following these steps, you will have Webflow MCP installed and connected, allowing you to use AI tools to interact with your Webflow sites smoothly.