Webflow MCP Server
OfficialWebflow's official MCP server: agents manage CMS, pages and the live Designer canvas via OAuth at mcp.webflow.com.
Add to your client
Copy the config for your MCP client and paste it into its config file.
npx mcp-remote https://mcp.webflow.com/ssePaste into ~/Library/Application Support/Claude/claude_desktop_config.json
{
"mcpServers": {
"webflow-mcp-server": {
"command": "npx",
"args": [
"-y",
"mcp-remote",
"https://mcp.webflow.com/sse"
]
}
}
}Claude Desktop connects to remote servers through the `mcp-remote` proxy (installed on first run via npx). Restart Claude Desktop after saving.
Step-by-step guides: Add to Claude Desktop · Add to Cursor · Add to Windsurf
Before you start
- Node.js 22.3.0 or higher and npm
- A Webflow account with at least one site you can authorize
- For Designer-canvas work: the Webflow MCP Bridge App opened in the Designer's Apps panel
- Local mode only: a Webflow API token (from the API Playground) and your own registered bridge app
About Webflow MCP Server
Webflow runs the hosted endpoint at mcp.webflow.com/sse. Cursor connects with a one-line config ({"url": "https://mcp.webflow.com/sse"}), which triggers an OAuth page where you pick the sites to authorize; Claude Desktop, lacking native SSE support in its config, uses the documented npx mcp-remote https://mcp.webflow.com/sse bridge. Node.js 22.3.0+ is a hard requirement — the README links compatibility guidance because older Node versions are a known failure mode.
The Designer integration is what separates this from a plain Data-API wrapper. You publish/launch a small "Webflow MCP Bridge App" in your workspace (for remote mode it's the companion app; for local mode you build it from virat21/webflow-mcp-bridge-app and publish it as a Designer extension), open it in the Designer's Apps panel, and it syncs the live canvas with your AI agent. That enables visual work — building sections, restyling components — not just CMS row edits, with the README's own examples ranging from 'analyze my last 5 blog posts and suggest topics' to 'create a hero section card with a CTA button'.
Local mode swaps OAuth for a WEBFLOW_TOKEN: npx -y webflow-mcp-server@latest with the token in env, generated from Webflow's API Playground. It's more setup (you register your own app and bridge extension) but keeps everything on your machine and works with plain API-token permissions. Tool implementations live in the repo's ./tools directory rather than a README list; one tool the docs call out by name is get_designer_app_connection_info, used to wire the bridge app to a local server.
Rough edges: the static-page content limitation (default-locale updates error; only secondary-locale localized pages work), OAuth state that occasionally needs a rm -rf ~/.mcp-auth reset, and npx cache weirdness the troubleshooting section addresses with npm cache clean --force. MIT-licensed, and prompts/resources from the MCP spec are deliberately not implemented yet.
Tools & capabilities (1)
get_designer_app_connection_infoReturn the localhost connection URL that pairs the Designer bridge app with a locally running server
When to use it
- Content operations: analyze recent blog posts, generate new drafts, and add internal links across CMS items
- Visual building: create or restyle sections on a page while watching changes land in the open Designer canvas
- SEO passes: audit page titles/descriptions and update them across a site conversationally
- Localization edits: update static content on secondary-locale pages (the one static-page path that's supported)
Quick setup
- 1Cursor: add `{"mcpServers": {"webflow": {"url": "https://mcp.webflow.com/sse"}}}` to .cursor/mcp.json, save, and complete the OAuth page that opens
- 2Claude Desktop: use `{"command": "npx", "args": ["mcp-remote", "https://mcp.webflow.com/sse"]}` in claude_desktop_config.json, then restart
- 3Open your site in the Webflow Designer, press E for the Apps panel, and launch the Webflow MCP Bridge App
- 4Wait for the bridge to connect, then prompt away; run `rm -rf ~/.mcp-auth` if OAuth ever gets stuck
- 5Local alternative: `WEBFLOW_TOKEN=<token> npx -y webflow-mcp-server@latest` after registering your own bridge app
Security notes
The remote server authenticates via OAuth and can create, edit and publish content on any site you authorize; the local token cache lives in ~/.mcp-auth (delete it to reset auth). Local mode instead puts a Webflow API token in the config env — scope that token to only the sites the agent should touch.
Webflow MCP Server FAQ
Is the Webflow MCP server free and official?
Yes — it's published by Webflow itself (github.com/webflow/mcp-server, MIT license) and free to use with any Webflow account; site-plan limits still govern what you can publish. OAuth scopes access to only the sites you authorize during connect.
Remote or local — which mode should I use?
Remote (https://mcp.webflow.com/sse with OAuth) for almost everyone: no token handling, per-site authorization, works in Cursor natively and in Claude Desktop via mcp-remote. Local mode (npx webflow-mcp-server + WEBFLOW_TOKEN) is for API-token workflows or when you need to run and modify the server yourself — it requires registering your own bridge app.
Can it edit what I see in the Webflow Designer?
Yes, through the MCP Bridge App: open it from the Designer's Apps panel and it syncs the live canvas with your agent, so created sections and style changes appear as they happen. Without the bridge app you still get Data API capabilities (CMS, pages metadata), but not live canvas manipulation.
Alternatives to Webflow MCP Server
Compare all alternatives →
Control Blender from Claude and other LLMs for prompt-assisted 3D modeling, scene creation, and asset generation.
Popular community server that feeds Figma layout data to coding agents via a Figma API token.
Generate beautiful, modern UI components from natural-language descriptions inside your IDE.
Compare Webflow MCP Server with: