{
  "markdown": "# Webflow's MCP server\n\nA Node.js server implementing Model Context Protocol (MCP) for Webflow using the [Webflow JavaScript SDK](https://github.com/webflow/js-webflow-api). Enable AI agents to interact with Webflow APIs. Learn more about Webflow's Data API in the [developer documentation](https://developers.webflow.com/data/reference).\n\n[![npm shield](https://img.shields.io/npm/v/webflow-mcp-server)](https://www.npmjs.com/package/webflow-mcp-server)\n![Webflow](https://img.shields.io/badge/webflow-%23146EF5.svg?style=for-the-badge&logo=webflow&logoColor=white)\n\n## Prerequisites\n\n- [Node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n- [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n- [A Webflow Account](https://webflow.com/signup)\n\n## 🚀 Remote installation\n\nGet 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.\n\n### Requirements\n\n- Node.js 22.3.0 or higher\n\n> 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.](https://developers.webflow.com/data/v2.0.0/docs/ai-tools#nodejs-compatibility)\n\n### Cursor\n\n#### Add MCP server to Cursor\n\n1. Go to `Settings → Cursor Settings → MCP & Integrations`.\n2. Under MCP Tools, click `+ New MCP Server`.\n3. Paste the following configuration into `.cursor/mcp.json` (or add the `webflow` part to your existing configuration):\n\n```json\n{\n  \"mcpServers\": {\n    \"webflow\": {\n      \"url\": \"https://mcp.webflow.com/sse\"\n    }\n  }\n}\n```\n\n> 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.](https://docs.cursor.com/en/context/mcp#configuration-locations)\n\n4. 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.\n\n#### Open the Webflow Designer\n\n- Open your site in the Webflow Designer, or ask your AI agent:\n\n```text\nGive me a link to open <MY_SITE_NAME> in the Webflow Designer\n```\n\n#### Open the MCP Webflow App\n\n1. In the Designer, open the Apps panel (press `E`).\n2. Launch your published \"Webflow MCP Bridge App\".\n3. Wait for the app to connect to the MCP server.\n\n#### Write your first prompt\n\nTry these in your AI chat:\n\n```text\nAnalyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords\n```\n\n```text\nFind older blog posts that mention similar topics and add internal links to my latest post\n```\n\n```text\nCreate a hero section card on my home page with a CTA button and responsive design\n```\n\n### Claude desktop\n\n#### Add MCP server to Claude desktop\n\n1. Enable developer mode: `Help → Troubleshooting → Enable Developer Mode`.\n2. Open developer settings: `File → Settings → Developer`.\n3. Click `Get Started` or edit the configuration to open `claude_desktop_config.json` and add:\n\n```json\n{\n  \"mcpServers\": {\n    \"webflow\": {\n      \"command\": \"npx\",\n      \"args\": [\"mcp-remote\", \"https://mcp.webflow.com/sse\"]\n    }\n  }\n}\n```\n\n4. Save and restart Claude Desktop (`Cmd/Ctrl + R`). An OAuth login page will open to authorize sites.\n\n#### Open the Webflow Designer\n\n- Open your site in the Webflow Designer, or ask your AI agent:\n\n```text\nGive me a link to open <MY_SITE_NAME> in the Webflow Designer\n```\n\n#### Open the MCP Webflow App\n\n1. In the Designer, open the Apps panel (press `E`).\n2. Launch your published \"Webflow MCP Bridge App\".\n3. Wait for the app to connect to the MCP server.\n\n#### Write your first prompt\n\n```text\nAnalyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords\n```\n\n```text\nFind older blog posts that mention similar topics and add internal links to my latest post\n```\n\n```text\nCreate a hero section card on my home page with a CTA button and responsive design\n```\n\n### Reset your OAuth token\n\nTo reset your OAuth token, run the following command in your terminal.\n\n```bash\nrm -rf ~/.mcp-auth\n```\n\n### Node.js compatibility\n\nPlease see the Node.js [compatibility guidance on Webflow's developer docs.](https://developers.webflow.com/data/v2.0.0/docs/ai-tools#nodejs-compatibility)\n\n---\n\n\n## Local Installation\n\nYou can also configure the MCP server to run locally. This requires:\n\n- Creating and registering your own MCP Bridge App in a Webflow workspace with Admin permissions\n- Configuring your AI client to start the local MCP server with a Webflow API token\n\n### 1. Create and publish the MCP bridge app\n\nBefore connecting the local MCP server to your AI client, you must create and publish the **Webflow MCP Bridge App** in your workspace.\n\n### Steps\n\n1. **Register a Webflow App**\n   - Go to your Webflow Workspace and register a new app.  \n   - Follow the official guide: [Register an App](https://developers.webflow.com/data/v2.0.0/docs/register-an-app).\n\n2. **Get the MCP Bridge App code**\n   - Option A: Download the latest `bundle.zip` from the [releases page](https://github.com/virat21/webflow-mcp-bridge-app/releases).\n   - Option B: Clone the repository and build it:\n     ```bash\n     git clone https://github.com/virat21/webflow-mcp-bridge-app\n     cd webflow-mcp-bridge-app\n     ```\n     - Then build the project following the repository instructions.\n\n3. **Publish the Designer Extension**\n   - Go to **Webflow Dashboard → Workspace settings → Apps & Integrations → Develop → Your App**.\n   - Click **“Publish Extension Version”**.\n   - Upload your built `bundle.zip` file.\n\n4. **Open the App in Designer**\n   - Once published, open the MCP Bridge App from the **Designer → Apps panel** in a site within your workspace.\n\n### 2. Configure your AI client\n\n#### Cursor\n\nAdd to `.cursor/mcp.json`:\n\n```json\n{\n  \"mcpServers\": {\n    \"webflow\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"webflow-mcp-server@latest\"],\n      \"env\": {\n        \"WEBFLOW_TOKEN\": \"<YOUR_WEBFLOW_TOKEN>\"\n      }\n    }\n  }\n}\n```\n\n#### Claude desktop\n\nAdd to `claude_desktop_config.json`:\n\n```json\n{\n  \"mcpServers\": {\n    \"webflow\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"webflow-mcp-server@latest\"],\n      \"env\": {\n        \"WEBFLOW_TOKEN\": \"<YOUR_WEBFLOW_TOKEN>\"\n      }\n    }\n  }\n}\n```\n\n### 3. Use the MCP server with the Webflow Designer\n\n- Open your site in the Webflow Designer.\n- Open the Apps panel (press `E`) and launch your published “Webflow MCP Bridge App”.\n- Wait for the app to connect to the MCP server, then use tools from your AI client.\n- If the Bridge App prompts for a local connection URL, call the `get_designer_app_connection_info` tool from your AI client and paste the returned `http://localhost:<port>` URL.\n\n### Optional: Run locally via shell\n\n```bash\nWEBFLOW_TOKEN=\"<YOUR_WEBFLOW_TOKEN>\" npx -y webflow-mcp-server@latest\n```\n\n```powershell\n# PowerShell\n$env:WEBFLOW_TOKEN=\"<YOUR_WEBFLOW_TOKEN>\"\nnpx -y webflow-mcp-server@latest\n```\n\n### Reset your OAuth Token\n\nTo reset your OAuth token, run the following command in your terminal.\n\n```bash\nrm -rf ~/.mcp-auth\n```\n\n### Node.js compatibility\n\nPlease see the Node.js [compatibility guidance on Webflow's developer docs.](https://developers.webflow.com/data/v2.0.0/docs/ai-tools#nodejs-compatibility)\n\n## ❓ Troubleshooting\n\nIf you are having issues starting the server in your MCP client e.g. Cursor or Claude Desktop, please try the following.\n\n### Make sure you have a valid Webflow API token\n\n1. Go to [Webflow's API Playground](https://developers.webflow.com/data/reference/token/authorized-by), log in and generate a token, then copy the token from the Request Generator\n2. Replace `YOUR_WEBFLOW_TOKEN` in your MCP client configuration with the token you copied\n3. Save and **restart** your MCP client\n\n### Make sure you have the Node and NPM installed\n\n- [Node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n- [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\nRun the following commands to confirm you have Node and NPM installed:\n\n```shell\nnode -v\nnpm -v\n```\n\n### Clear your NPM cache\n\nSometimes clearing your [NPM cache](https://docs.npmjs.com/cli/v8/commands/npm-cache) can resolve issues with `npx`.\n\n```shell\nnpm cache clean --force\n```\n\n### Fix NPM global package permissions\n\nIf `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](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally) for more information.\n\nNote: if you are making changes to your shell configuration, you may need to restart your shell for changes to take effect.\n\n## 🛠️ Available tools\n\nSee the `./tools` directory for a list of available tools\n\n# 🗣️ Prompts & resources\n\nThis 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.\n\n## 📄 Webflow developer resources\n\n- [Webflow API Documentation](https://developers.webflow.com/data/reference)\n- [Webflow JavaScript SDK](https://github.com/webflow/js-webflow-api)\n\n## ⚠️ Known limitations\n\n### Static page content updates\n\nThe `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.\n",
  "bytes": 9434,
  "sha": "8d8348f983341bed6cbddfae4e3ab4958da8946c2697307f014d91c3b0d97b7b",
  "repo_slug": "webflow/mcp-server",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_com_webflow_mcp_ac26d227/readme"
}