Webflow MCP Server

🚀 Webflow MCP Server

A Webflow Model Context Protocol (MCP) server implemented in Node.js, leveraging the Webflow JavaScript SDK, enabling AI agents to interact with the Webflow API. For more information, visit Webflow's Developer Documentation.

🚀 Quick Start

Prerequisites

• Operating System: Any operating system supporting Node.js (Linux or macOS recommended).
• Node.js: Version 14 or higher.
• npm: The default package manager installed with Node.js.
• Webflow Account: A Webflow account is required to obtain an API access token.

Steps

1. Clone the repository and install dependencies:

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

2. Configure the Webflow token:

   • Create a .env file and add the following content, replacing <YOUR_WEBFLOW_TOKEN> with your actual token:

     # .env
     WEBFLOW_TOKEN=<YOUR_WEBFLOW_TOKEN>
     

3. Start the development server:

   npm start
   

🛠️ Troubleshooting

Common Issues

• Issue: Unable to obtain a Webflow API access token.
  Solution: Ensure you are logged in to Webflow and have created a project in the Developer Documentation. Then, follow the guide to generate an access token.

• Issue: The server fails to start.
  Solution: Check if the .env file exists in the project root directory and ensure the WEBFLOW_TOKEN value is correct. Additionally, confirm that all dependencies are installed.

💻 Available Tools

Site Management

• Site-related commands:

  sites - list;           # List all sites
  sites - get;            # Get site details
  sites - publish;        # Publish site changes
  

• Page-related commands:

  pages - list;           # List all pages
  pages - get - metadata; # Get page metadata
  pages - update - page - settings; # Update page settings
  pages - get - content;  # Get page content
  pages - update - static - content; # Update static content
  

CMS Management

• Collection-related commands:

  collections - list;         # List all collections
  collections - get;          # Get collection details
  collections - create;       # Create a new collection
  collection - fields - create - static; # Create static fields
  collection - fields - create - option; # Create option fields
  collection - fields - create - reference; # Create reference fields
  collection - fields - update; # Update custom fields
  collections - items - create - item - live; # Create a live item
  collections - items - update - items - live; # Update live items
  collections - items - list - items; # List collection items
  collections - items - create - item; # Create a new item (staging)
  collections - items - update - items; # Update items (staging)
  collections - items - publish - items; # Publish items
  

🛠️ Development Mode

If you wish 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. Configure the Webflow token:

   • Create a .env file and add the following content, replacing <YOUR_WEBFLOW_TOKEN> with your actual token:

     # .env
     WEBFLOW_TOKEN=<YOUR_WEBFLOW_TOKEN>
     

3. Start the development server:

   npm start
   

📚 Webflow Development Resources

• Webflow API Documentation
• Webflow JavaScript SDK