webflow/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.
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.
Requirements
- 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.
Cursor
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):
> 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:
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:
Claude desktop
Add MCP server to Claude desktop
1. Enable developer mode: Help → Troubleshooting → Enable Developer Mode.
2. Open developer settings: File → Settings → Developer.
3. Click Get Started or edit the configuration to open claude_desktop_config.json and add:
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:
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
Reset your OAuth token
To reset your OAuth token, run the following command in your terminal.
Node.js compatibility
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
1. Create and publish the MCP bridge app
Before connecting the local MCP server to your AI client, you must create and publish the **Webflow MCP Bridge App** in your workspace.
Steps
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 latest bundle.zip from the releases page.
- Option B: Clone the repository and build it:
- Then build the project following the repository instructions.