Webflow

🚀 Webflow MCP Server

A Webflow Model Context Protocol (MCP) server implemented with Node.js, leveraging the Webflow JavaScript SDK. This server enables AI agents to interact with the Webflow API. For more information about the Webflow Data API, refer to the Developer Documentation.

🚀 Quick Start

Prerequisites

• Node.js
• NPM
• Webflow Account

Steps

1. Obtain a Webflow API Token You need a Webflow plan and generate an API token in the Webflow Dashboard.

2. Add Configuration to the AI Editor Copy the following content to the root directory of your project and name it config.json:

   {
     "token": "<YOUR_WEBFLOW_TOKEN>",
     "projectId": "<YOUR_PROJECT_ID>"
   }
   

3. Use in Cursor Add the following content to the MCP configuration in Cursor:

   const webflow = require('@webflow/mcp-server');
   
   module.exports = {
     providers: [
       webflow({
         token: process.env.WEBFLOW_TOKEN,
         projectId: process.env.WEBFLOW_PROJECT_ID
       })
     ]
   };
   

4. Use in Claude Desktop Add the following content to the mcp-config.json file:

   {
     "providers": [
       {
         "name": "webflow",
         "config": {
           "token": "<YOUR_WEBFLOW_TOKEN>",
           "projectId": "<YOUR_PROJECT_ID>"
         }
       }
     ]
   }
   

🔧 Technical Details

Development Mode

If you want to run the server in development mode, follow these steps:

1. Clone the repository and install dependencies:

   git clone git@github.com:webflow/mcp-server.git
   cd mcp-server
   npm install
   

2. Create a .env file in the project root directory and add your Webflow token:

   # .env
   WEBFLOW_TOKEN=<YOUR_WEBFLOW_TOKEN>
   

3. Start the development server:

   npm start
   

📚 Documentation

• Webflow API Documentation
• Webflow JavaScript SDK