Webflow's MCP server

A Node.js server implementing Model Context Protocol (MCP) for Webflow using the Webflow JavaScript SDK. Enable AI agents to interact with Webflow APIs. Learn more about Webflow's Data API in the developer documentation.

![npm shield](https://www.npmjs.com/package/webflow-mcp-server)
!Webflow

Prerequisites

- Node.js
- NPM
- A Webflow Account

🚀 Remote installation

Get started by installing Webflow's remote MCP server. The remote server uses OAuth to authenticate with your Webflow sites, and a companion app that syncs your live canvas with your AI agent.

$3

- Node.js 22.3.0 or higher

> Note: The MCP server currently supports Node.js 22.3.0 or higher. If you run into version issues, see the Node.js compatibility guidance.

$3

#### Add MCP server to Cursor

1. Go to Settings → Cursor Settings → MCP & Integrations.
2. Under MCP Tools, click + New MCP Server.
3. Paste the following configuration into .cursor/mcp.json (or add the webflow part to your existing configuration):

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

> Tip: You can create a project-level mcp.json to avoid repeated auth prompts across multiple Cursor windows. See Cursor’s docs on configuration locations.

4. Save and close the file. Cursor will automatically open an OAuth login page where you can authorize Webflow sites to use with the MCP server.

#### Open the Webflow Designer

- Open your site in the Webflow Designer, or ask your AI agent:

`text Give me a link to open in the Webflow Designer`

#### Open the MCP Webflow App

1. In the Designer, open the Apps panel (press E). 2. Launch your published "Webflow MCP Bridge App". 3. Wait for the app to connect to the MCP server.

#### Write your first prompt

Try these in your AI chat:

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

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

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

`$3`

#### Add MCP server to Claude desktop

1. Enable developer mode: Help → Troubleshooting → Enable Developer Mode. 2. Open developer settings:File → Settings → Developer. 3. ClickGet Started or edit the configuration to open claude_desktop_config.json and add:

`json { "mcpServers": { "webflow": { "command": "npx", "args": ["mcp-remote", "https://mcp.webflow.com/sse"] } } }`

4. Save and restart Claude Desktop (Cmd/Ctrl + R). An OAuth login page will open to authorize sites.

#### Open the Webflow Designer

- Open your site in the Webflow Designer, or ask your AI agent:

`text Give me a link to open in the Webflow Designer`

#### Open the MCP Webflow App

1. In the Designer, open the Apps panel (press E). 2. Launch your published "Webflow MCP Bridge App". 3. Wait for the app to connect to the MCP server.

#### Write your first prompt

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

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

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

`$3`

To reset your OAuth token, run the following command in your terminal.

`bash rm -rf ~/.mcp-auth`

`$3`

Please see the Node.js compatibility guidance on Webflow's developer docs.

---

`Local Installation`

You can also configure the MCP server to run locally. This requires:

- Creating and registering your own MCP Bridge App in a Webflow workspace with Admin permissions - Configuring your AI client to start the local MCP server with a Webflow API token

`$3`

Before connecting the local MCP server to your AI client, you must create and publish the Webflow MCP Bridge App in your workspace.

`$3`

1. Register a Webflow App - Go to your Webflow Workspace and register a new app. - Follow the official guide: Register an App.

2. Get the MCP Bridge App code - Option A: Download the latestbundle.zipfrom the releases page. - Option B: Clone the repository and build it:`bash git clone https://github.com/virat21/webflow-mcp-bridge-app cd webflow-mcp-bridge-app`- Then build the project following the repository instructions.

3. Publish the Designer Extension - Go to Webflow Dashboard → Workspace settings → Apps & Integrations → Develop → Your App. - Click “Publish Extension Version”. - Upload your builtbundle.zip file.

4. Open the App in Designer - Once published, open the MCP Bridge App from the Designer → Apps panel in a site within your workspace.

`$3`

#### Cursor

Add to .cursor/mcp.json:

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

#### Claude desktop

Add to claude_desktop_config.json:

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

`$3`

- Open your site in the Webflow Designer. - Open the Apps panel (pressE) and launch your published “Webflow MCP Bridge App”. - Wait for the app to connect to the MCP server, then use tools from your AI client. - If the Bridge App prompts for a local connection URL, call theget_designer_app_connection_info tool from your AI client and paste the returned http://localhost: URL.

`$3`

`bash WEBFLOW_TOKEN="" npx -y webflow-mcp-server@latest`

`powershell

`PowerShell`


$env:WEBFLOW_TOKEN=""
npx -y webflow-mcp-server@latest


$3
To reset your OAuth token, run the following command in your terminal.

`bash rm -rf ~/.mcp-auth`

`$3`

Please see the Node.js compatibility guidance on Webflow's developer docs.

`❓ Troubleshooting`

If you are having issues starting the server in your MCP client e.g. Cursor or Claude Desktop, please try the following.

`$3`

1. Go to Webflow's API Playground, log in and generate a token, then copy the token from the Request Generator 2. ReplaceYOUR_WEBFLOW_TOKENin your MCP client configuration with the token you copied 3. Save and restart your MCP client

`$3`

- Node.js - NPM

Run the following commands to confirm you have Node and NPM installed:

`shell node -v npm -v`

`$3`

Sometimes clearing your NPM cache can resolve issues with npx.

`shell npm cache clean --force`

`$3`

If npm -v doesn't work for you but sudo npm -v does, you may need to fix NPM global package permissions. See the official NPM docs for more information.

Note: if you are making changes to your shell configuration, you may need to restart your shell for changes to take effect.

`🛠️ Available tools`

See the ./tools directory for a list of available tools

`🗣️ Prompts & resources`

This implementation doesn't include prompts or resources from the MCP specification. However, this may change in the future when there is broader support across popular MCP clients.

`📄 Webflow developer resources`

- Webflow API Documentation - Webflow JavaScript SDK

`⚠️ Known limitations`

`$3`

The pages_update_static_content` endpoint currently only supports updates to localized static pages in secondary locales. Updates to static content in the default locale aren't supported and will result in errors.

Webflow's MCP server

![npm shield](https://www.npmjs.com/package/webflow-mcp-server)
!Webflow

Prerequisites

- Node.js
- NPM
- A Webflow Account

🚀 Remote installation

Get started by installing Webflow's remote MCP server. The remote server uses OAuth to authenticate with your Webflow sites, and a companion app that syncs your live canvas with your AI agent.

$3

- Node.js 22.3.0 or higher

> Note: The MCP server currently supports Node.js 22.3.0 or higher. If you run into version issues, see the Node.js compatibility guidance.

$3

#### Add MCP server to Cursor

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

> Tip: You can create a project-level mcp.json to avoid repeated auth prompts across multiple Cursor windows. See Cursor’s docs on configuration locations.

4. Save and close the file. Cursor will automatically open an OAuth login page where you can authorize Webflow sites to use with the MCP server.

#### Open the Webflow Designer

- Open your site in the Webflow Designer, or ask your AI agent:

`text Give me a link to open in the Webflow Designer`

#### Open the MCP Webflow App

1. In the Designer, open the Apps panel (press E). 2. Launch your published "Webflow MCP Bridge App". 3. Wait for the app to connect to the MCP server.

#### Write your first prompt

Try these in your AI chat:

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

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

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

`$3`

#### Add MCP server to Claude desktop

`json { "mcpServers": { "webflow": { "command": "npx", "args": ["mcp-remote", "https://mcp.webflow.com/sse"] } } }`

4. Save and restart Claude Desktop (Cmd/Ctrl + R). An OAuth login page will open to authorize sites.

#### Open the Webflow Designer

- Open your site in the Webflow Designer, or ask your AI agent:

`text Give me a link to open in the Webflow Designer`

#### Open the MCP Webflow App

1. In the Designer, open the Apps panel (press E). 2. Launch your published "Webflow MCP Bridge App". 3. Wait for the app to connect to the MCP server.

#### Write your first prompt

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

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

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

`$3`

To reset your OAuth token, run the following command in your terminal.

`bash rm -rf ~/.mcp-auth`

`$3`

Please see the Node.js compatibility guidance on Webflow's developer docs.

---

`Local Installation`

You can also configure the MCP server to run locally. This requires:

- Creating and registering your own MCP Bridge App in a Webflow workspace with Admin permissions - Configuring your AI client to start the local MCP server with a Webflow API token

`$3`

Before connecting the local MCP server to your AI client, you must create and publish the Webflow MCP Bridge App in your workspace.

`$3`

1. Register a Webflow App - Go to your Webflow Workspace and register a new app. - Follow the official guide: Register an App.

4. Open the App in Designer - Once published, open the MCP Bridge App from the Designer → Apps panel in a site within your workspace.

`$3`

#### Cursor

Add to .cursor/mcp.json:

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

#### Claude desktop

Add to claude_desktop_config.json:

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

`$3`

`bash WEBFLOW_TOKEN="" npx -y webflow-mcp-server@latest`

`powershell

`PowerShell`


$env:WEBFLOW_TOKEN=""
npx -y webflow-mcp-server@latest


$3
To reset your OAuth token, run the following command in your terminal.

`bash rm -rf ~/.mcp-auth`

`$3`

Please see the Node.js compatibility guidance on Webflow's developer docs.

`❓ Troubleshooting`

If you are having issues starting the server in your MCP client e.g. Cursor or Claude Desktop, please try the following.

`$3`

- Node.js - NPM

Run the following commands to confirm you have Node and NPM installed:

`shell node -v npm -v`

`$3`

Sometimes clearing your NPM cache can resolve issues with npx.

`shell npm cache clean --force`

`$3`

If npm -v doesn't work for you but sudo npm -v does, you may need to fix NPM global package permissions. See the official NPM docs for more information.

Note: if you are making changes to your shell configuration, you may need to restart your shell for changes to take effect.

`🛠️ Available tools`

See the ./tools directory for a list of available tools

`🗣️ Prompts & resources`

This implementation doesn't include prompts or resources from the MCP specification. However, this may change in the future when there is broader support across popular MCP clients.

`📄 Webflow developer resources`

- Webflow API Documentation - Webflow JavaScript SDK