mcp

This MCP server implements Webflow integration for the Model Context Protocol, allowing AI agents to interact with Webflow APIs through the Webflow MCP Bridge. The server uses Webflow's JavaScript SDK to enable actions such as reading site data, managing content, and driving Designer-related tasks via the MCP interface. Your AI agent can connect to the MCP stream, authorize with a Webflow token, and then issue prompts that trigger Webflow API calls through the bridge app. The included remote installation flow shows how to run the server via npx and how to configure a local token for authentication. Tools available through the MCP interface include querying site structure, retrieving and updating CMS items, and leveraging the Webflow Designer integration prompts to generate or modify page content. The design emphasizes OAuth-based authentication and a bridge app that syncs your live canvas with the AI agent, enabling seamless workflows across Webflow projects.

Prerequisites:

• Node.js (v22.3.0 or higher)
• NPM
• A Webflow account with API access and a Webflow API token

Local installation steps:

1. Install prerequisites (Node.js and NPM) from their official sources.
2. Install or run the MCP server via npm using the remote package:

   # Run directly (Remote MCP server)
   npx -y webflow-mcp-server@latest
   

3. Obtain a Webflow API token:
   • Generate a token from Webflow API Playground and copy it.
   • Set the token in your MCP client configuration or environment:
     • For Cursor: include WEBFLOW_TOKEN in the mcp.json under env.
     • For Claude Desktop: include WEBFLOW_TOKEN in claude_desktop_config.json under env.
4. Start the MCP server with token access:

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

5. If you’re integrating with Cursor or Claude Desktop, configure the MCP server entry as shown in the README example to point to the remote server and pass the token.
6. Open the Webflow Designer and the MCP Bridge App as described to connect and begin using the MCP capabilities.

Prerequisites recap:

• A valid Webflow API token
• Node.js and NPM installed
• Access to a client (Cursor, Claude Desktop, or other MCP-enabled tool) configured to use the webflow-mcp-server

Tips and tips:

• Ensure your Webflow API token has the necessary permissions for the actions you plan to perform.
• When using local development, keep your token secure and do not commit it to public repos.
• If you encounter connectivity prompts in the MCP client, re-authenticate via the OAuth flow in the browser that opens from the client.
• The Node.js compatibility guidance in Webflow's docs is the reference for compatible runtimes; a newer Node.js version may be required for some features.
• If you encounter issues with tokens or authentication, reset the OAuth token with the provided rm -rf ~/.mcp-auth command and re-authenticate.
• For Cursor and Claude Desktop configurations, ensure the mcp.json or claude_desktop_config.json includes the correct command and token environment variable as shown in the README snippets.