Webflow

- **Analyze CMS content and suggest new topics**— Ask the AI to review recent blog posts and propose topic ideas with SEO keywords. - **Add internal links across blog posts**— Request the AI to find older posts mentioning similar topics and insert internal links into a specified post. - **Create page sections with responsive design**— Instruct the AI to build a hero section card on a page, complete with a CTA button and responsive layout. - **Retrieve the local bridge connection URL**— Use`get_designer_app_connection_info`to get the localhost URL needed when the Bridge App prompts for a connection. 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](https://github.com/webflow/js-webflow-api)[developer documentation. 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. Note: The MCP server currently supports Node.js 22.3.0 or higher. If you run into version issues, see the](https://developers.webflow.com/data/reference)[Node.js compatibility guidance. - Go to`Settings → Cursor Settings → MCP & Integrations`. - Under MCP Tools, click`+ New MCP Server`. - Paste the following configuration into`.cursor/mcp.json`(or add the`webflow`part to your existing configuration): ``` `{ "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](https://developers.webflow.com/data/v2.0.0/docs/ai-tools#nodejs-compatibility)[configuration locations. - 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 your site in the Webflow Designer, or ask your AI agent: ``` `Give me a link to open <MY_SITE_NAME> in the Webflow Designer` ``` - In the Designer, open the Apps panel (press`E`). - Launch your published "Webflow MCP Bridge App". - Wait for the app to connect to the MCP server. ``` `Analyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords` ``` ``` `Find older blog posts that mention similar topics and add internal links to my latest post` ``` ``` `Create a hero section card on my home page with a CTA button and responsive design` ``` - Enable developer mode:`Help → Troubleshooting → Enable Developer Mode`. - Open developer settings:`File → Settings → Developer`. - Click`Get Started`or edit the configuration to open`claude_desktop_config.json`and add: ``` `{ "mcpServers": { "webflow": { "command": "npx", "args": ](https://docs.cursor.com/en/context/mcp#configuration-locations)["mcp-remote", "https://mcp.webflow.com/sse"] } } }` ``` - Save and restart Claude Desktop (`Cmd/Ctrl + R`). An OAuth login page will open to authorize sites. - Open your site in the Webflow Designer, or ask your AI agent: ``` `Give me a link to open <MY_SITE_NAME> in the Webflow Designer` ``` - In the Designer, open the Apps panel (press`E`). - Launch your published "Webflow MCP Bridge App". - Wait for the app to connect to the MCP server. ``` `Analyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords` ``` ``` `Find older blog posts that mention similar topics and add internal links to my latest post` ``` ``` `Create a hero section card on my home page with a CTA button and responsive design` ``` To reset your OAuth token, run the following command in your terminal. Please see the Node.js[compatibility guidance on Webflow's developer docs. 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. - Go to your Webflow Workspace and register a new app. - Follow the official guide:](https://developers.webflow.com/data/v2.0.0/docs/ai-tools#nodejs-compatibility)[Register an App. - Option A: Download the latest`bundle.zip`from the](https://developers.webflow.com/data/v2.0.0/docs/register-an-app)[releases page. - Option B: Clone the repository and build it: ``` `git clone https://github.com/virat21/webflow-mcp-bridge-app cd webflow-mcp-bridge-app` ``` - Then build the project following the repository instructions. - Go to**Webflow Dashboard → Workspace settings → Apps & Integrations → Develop → Your App**. - Click**“Publish Extension Version”**. - Upload your built`bundle.zip`file. - Once published, open the MCP Bridge App from the**Designer → Apps panel**in a site within your workspace. ``` `{ "mcpServers": { "webflow": { "command": "npx", "args": ](https://github.com/virat21/webflow-mcp-bridge-app/releases)["-y", "webflow-mcp-server@latest"], "env": { "WEBFLOW_TOKEN": "<YOUR_WEBFLOW_TOKEN>" } } } }` ``` ``` `{ "mcpServers": { "webflow": { "command": "npx", "args": ["-y", "webflow-mcp-server@latest"], "env": { "WEBFLOW_TOKEN": "<YOUR_WEBFLOW_TOKEN>" } } } }` ``` ### 3. Use the MCP server with the Webflow Designer - Open your site in the Webflow Designer. - Open the Apps panel (press`E`) 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 the`get_designer_app_connection_info`tool from your AI client and paste the returned`http://localhost:<port>`URL. ``` `WEBFLOW_TOKEN="<YOUR_WEBFLOW_TOKEN>" npx -y webflow-mcp-server@latest` ``` ``` `# PowerShell $env:WEBFLOW_TOKEN="<YOUR_WEBFLOW_TOKEN>" npx -y webflow-mcp-server@latest` ``` To reset your OAuth token, run the following command in your terminal. Please see the Node.js[compatibility guidance on Webflow's developer docs. If you are having issues starting the server in your MCP client e.g. Cursor or Claude Desktop, please try the following. ### Make sure you have a valid Webflow API token - Go to](https://developers.webflow.com/data/v2.0.0/docs/ai-tools#nodejs-compatibility)[Webflow's API Playground, log in and generate a token, then copy the token from the Request Generator - Replace`YOUR_WEBFLOW_TOKEN`in your MCP client configuration with the token you copied - Save and**restart**your MCP client ### Make sure you have the Node and NPM installed Run the following commands to confirm you have Node and NPM installed: Sometimes clearing your](https://developers.webflow.com/data/reference/token/authorized-by)[NPM cachecan resolve issues with`npx`. 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](https://docs.npmjs.com/cli/v8/commands/npm-cache)[NPM docsfor more information. Note: if you are making changes to your shell configuration, you may need to restart your shell for changes to take effect. See the`./tools`directory for a list of available tools 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. - ](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally)[Webflow API Documentation - ](https://developers.webflow.com/data/reference)[Webflow JavaScript SDK 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 runs an official remote MCP server — connect over a hosted URL instead of installing this one locally. Apify-hosted MCP server for Webflow with 22+ tools. Sites, CMS collections, pages, content management, and publishing. No local setup needed. Publish complete websites directly from any AI client via API — no hosting setup, CMS, or configuration required. Interact with Contentstack's Content Management API to manage your CMS content. Interact with and manage your Ghost CMS blog, including posts, users, and members, through an LLM interface. Integrate Hygraph directly into MCP-compatible tools like Claude and Cursor, executing content operations via natural language Create articles on a Joomla website using its API. Official remote MCP server for Lolipop Rental Server by GMO Pepabo. Manage domains, subdomains, free SSL, and WordPress via natural language. An MCP server for interacting with the Prismic headless CMS. An MCP server for interacting with the Webflow API to manage sites and content. An MCP server for interacting with WordPress sites via the REST API, allowing you to manage posts, pages, and media.](https://github.com/webflow/js-webflow-api)