Webflow MCP Server

Developer ToolsTypeScript

Interact with Webflow's APIs to manage sites and content

Available Tools

get_sites

Retrieves a list of all Webflow sites accessible to the authenticated user, including details like site display name, ID, workspace ID, creation date, last updated date, last published date, preview URL, time zone settings, custom domains, and localization settings.

get_site

Retrieves detailed information about a specific Webflow site by ID, including site display name, workspace ID, creation date, last updated date, last published date, preview URL, time zone settings, custom domains, and localization settings.

siteId

The Webflow MCP server enables AI assistants to interact with Webflow's APIs, allowing for seamless management of Webflow sites and content. With this integration, you can retrieve detailed information about your Webflow sites including display names, IDs, custom domains, localization settings, and more. This server bridges the gap between AI assistants and your Webflow projects, making it possible to access and manage your web content directly through conversational interfaces. It's particularly useful for web designers and developers who want to streamline their Webflow workflow.

Overview

The Webflow MCP server allows AI assistants to interact with Webflow's APIs, providing access to your Webflow sites and their configuration details. This integration enables you to retrieve information about your sites without leaving your AI assistant interface.

Prerequisites

Before setting up the Webflow MCP server, ensure you have:

Node.js (v16 or higher)
Claude Desktop App
A Webflow account
A Webflow API Token (Site token or OAuth Access Token)

Creating a Webflow API Token

To use this MCP server, you'll need to generate an API token from your Webflow account:

Log in to your Webflow account
Navigate to Site Settings > Apps & Integrations
Generate a new API token
Copy the token value (note that you won't be able to see it again)

Alternatively, you can generate an OAuth Access Token if you prefer.

Installation Options

Option 1: Install via Smithery (Recommended)

The easiest way to install the Webflow MCP server is through Smithery:

npx -y @smithery/cli install @kapilduraphe/webflow-mcp-server --client claude

During installation, you'll be prompted to enter your Webflow API token.

Option 2: Manual Installation

If you prefer to set up the server manually:

Clone the repository:

git clone https://github.com/kapilduraphe/webflow-mcp-server.git
cd webflow-mcp-server

Install dependencies:
```
npm install
```
Build the project:
```
npm run build
```

Configure Claude Desktop by editing your configuration file:

For MacOS:

code ~/Library/Application\ Support/Claude/claude_desktop_config.json

For Windows:

code %AppData%\Claude\claude_desktop_config.json

Add or update the configuration:

{
    "mcpServers": {
        "webflow": {
            "command": "node",
            "args": [
                "/ABSOLUTE/PATH/TO/YOUR/build/index.js"
            ],
            "env": {
                "WEBFLOW_API_TOKEN": "your-api-token"
            }
        }
    }
}

Save the file and restart Claude Desktop.

Troubleshooting

Common Issues

If the tools aren't appearing in Claude:

Check Claude Desktop logs
Verify your WEBFLOW_API_TOKEN is set correctly
Ensure the path to index.js is absolute and correct

For authentication errors:

Verify your API token is valid
Check if the token has the necessary permissions
Ensure the token hasn't expired

Viewing Logs

To view server logs:

For MacOS/Linux:

tail -n 20 -f ~/Library/Logs/Claude/mcp*.log