Webflow MCP Server Integration

What does “Webflow” MCP Server do?

The Webflow MCP Server is an integration layer that enables AI assistants, such as Claude, to interact with Webflow’s APIs. By connecting AI models to Webflow, this server allows developers and AI-powered tools to access, query, and manipulate Webflow site data programmatically. Key features include retrieving detailed information about Webflow sites, such as site names, IDs, domains, localization settings, and more. This enhances development workflows by enabling automated site management, data analysis, and contextual interactions directly from AI platforms, making it easier for teams to integrate Webflow resources into their broader toolchains and automation pipelines.

List of Prompts

No prompt templates are mentioned in the repository.

List of Resources

No explicit resources are listed in the available documentation or codebase.

List of Tools

• get_sites

  • Retrieves a list of all Webflow sites accessible to the authenticated user. Returns details such as display name, short name, site and workspace IDs, creation and update dates, preview URL, time zone, custom domains, localization settings, and data collection preferences.

• get_site

  • Retrieves detailed information about a specific Webflow site, identified by its siteId. Returns the same set of detailed information as get_sites but for a single site.

Use Cases of this MCP Server

• Webflow Site Discovery
  • Developers or AI agents can quickly list all Webflow sites associated with an account, making it easier to manage multiple web projects.
• Automated Site Management
  • Retrieve and monitor metadata (such as publication dates, custom domains, and locales) for one or more Webflow sites, enabling streamlined administration tasks.
• Contextual AI Interactions
  • AI assistants can pull detailed site information to answer user queries or drive automation flows based on current site configurations.
• Integration with CI/CD Pipelines
  • Use site information as part of automated deployment, publishing, or analytics workflows in broader development pipelines.

How to set it up

Windsurf

No Windsurf-specific instructions are provided in the repository.

Claude

1. Prerequisites
   • Ensure Node.js (v16+) is installed.
   • Have the Claude Desktop App installed.
   • Obtain a Webflow API Token.
2. Install dependencies
   • Run: npm install
3. Configure Environment Variables
   • Create a .env file with the following content:

     WEBFLOW_API_TOKEN=your-api-token
     

4. Configure Claude Desktop
   • Open the Claude config file:
     • For MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json
     • For Windows: %AppData%\Claude\claude_desktop_config.json
   • Add/update:

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

   • Save and restart Claude Desktop.

Securing API Keys (env example):

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

Cursor

No Cursor-specific instructions are provided in the repository.

Cline

No Cline-specific instructions are provided in the repository.

Installing via Smithery

• Run:

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

How to use this MCP inside flows

Using MCP in FlowHunt

To integrate MCP servers into your FlowHunt workflow, start by adding the MCP component to your flow and connecting it to your AI agent:

Click on the MCP component to open the configuration panel. In the system MCP configuration section, insert your MCP server details using this JSON format:

{
  "webflow": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

Once configured, the AI agent is now able to use this MCP as a tool with access to all its functions and capabilities. Remember to change “webflow” to whatever the actual name of your MCP server is and replace the URL with your own MCP server URL.

Overview

Based on the two tables, the Webflow MCP Server provides clear and useful tooling for Webflow/AI integration, but lacks prompt templates, resource definitions, and explicit support for roots or sampling. The setup and documentation are solid for Claude, but other platforms are not documented.

MCP Score