MCP server and AI tools

Build faster with Webflow’s APIs using LLMs. Connect directly to your site data, access collection schemas, generate functional code, and solve development challenges with context from your Webflow projects.

Webflow’s official MCP server

For developers using AI-powered tools like Cursor or Claude Desktop, we provide a Model Context Protocol (MCP) server that enhances your AI agent’s understanding of your Webflow projects. The MCP server has tools that enable AI agents to access real-time information about your sites, collections, and other objects, enabling more accurate and contextual code suggestions and troubleshooting. To see a full list of tools, see the MCP server documentation.

Install Webflow’s official MCP server

Remote installation

Get started quickly by installing Webflow’s remote MCP server, which uses OAuth to authenticate with your Webflow sites. For local installation, see the local installation section below.

1
{
2
  "mcpServers": {
3
    "webflow": {
4
      "command": "npx mcp-remote https://mcp.webflow.com/sse"
5
    }
6
  }
7
}

Resetting your OAuth token

If you need to reset your OAuth token, you can run the following command before restarting your MCP client.

$
rm -rf ~/.mcp-auth

Local installation

If you prefer to install the MCP server locally, you can do so by following the steps below. Local installation requires Node.js and npm to be installed on your machine.

Prerequisites

• Node.js version 18 or higher
• npm version 10 or higher

Steps

1. Get a Webflow API token from the Webflow API Playground

   

2. Add the following snippet to your client’s configuration file:

   1
   {
   2
     "mcpServers": {
   3
       "webflow": {
   4
         "command": "npx",
   5
         "args": ["-y", "webflow-mcp-server"],
   6
         "env": {
   7
           "WEBFLOW_TOKEN": "YOUR_API_TOKEN"
   8
         }
   9
       }
   10
     }
   11
   }

   Remember to replace YOUR_API_TOKEN with your actual Webflow API token.

3. Add the MCP server to your AI client:

   Cursor

   Claude Desktop

   1Go to Settings → Cursor Settings → MCP

   2Click + Add New Global MCP Server

   3Paste configuration into .cursor/mcp.json

   

   4Save and verify server status

   

   5

   Start interacting with the MCP server
   
   In the “Chat” window, switch to “Agent Mode” and start interacting with the MCP server. You can ask the agent things like:

   • “When was my site last published?"
   • "What were the last 5 CMS items published to this site?"
   • "Based on my last 5 blog posts, can you generate some ideas for new blog posts?"
   • "What are the current SEO issues on my site and how can I fix them?”

   6

   Send us feedback!

   We’re just getting started with this, so we’d love to hear from you! If you’d like to see more tools or have any feedback, please log an issue on GitHub.

Documentation for LLMs

Webflow’s documentation is optimized for consumption by AI assistants, making it easier for these tools to generate accurate code examples and guidance.

• Use https://developers.webflow.com/llms.txt to access the LLM-readable documentation. This optimized structure helps LLMs respond with accurate code snippets and multi-step sequences.
• Additionally, you can access markdown versions of any documentation page to provide a more structured and context-rich experience for LLMs. To access the markdown version of a page, add .md to the end of the URL. For example, this current doc is available as a markdown file at https://developers.webflow.com/data/docs/ai-tools.md.

Installing docs on Cursor

Once configured, reference Webflow’s documentation by typing @Docs in your chat window and selecting “Webflow” from the list.

FAQs