Webflow MCP Server

What is Webflow MCP Server about?

Enables Claude Desktop to interact with Webflow's REST API. The server exposes two primary tools – get_sites (list all accessible Webflow sites) and get_site (fetch detailed data for a specific site) – allowing AI‑driven workflows to query and manage Webflow projects.

How to use Webflow MCP Server?

1. Prerequisites – Install Node.js v16+, have Claude Desktop installed, and obtain a Webflow API token (site token or OAuth token).
2. Install the server via Smithery (recommended) or clone the repo and run npm install.

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

3. Configure environment – create a local .env file containing WEBFLOW_API_TOKEN=your-api-token.
4. Add to Claude Desktop – edit claude_desktop_config.json and register the MCP server (use the absolute path to the built index.js or rely on the npx‑based command shown in serverConfig).
5. Start Claude Desktop – the tools appear under the “webflow” namespace and can be invoked by Claude agents.

Key Features

• get_sites: Returns a comprehensive list of sites with IDs, workspace IDs, timestamps, preview URLs, time‑zone, custom domains, locale settings, and data‑collection flags.
• get_site: Retrieves the same detailed payload for a single site identified by siteId.
• Strong TypeScript definitions for responses and errors.
• Built‑in error handling for missing or invalid WEBFLOW_API_TOKEN.
• Clear troubleshooting guide (log locations, common issues, authentication fixes).
• Security‑focused recommendations (environment variable usage, token rotation).

Use Cases

• AI‑assisted website management: Let Claude draft content, publish updates, or audit site settings without manual API calls.
• Reporting & analytics: Pull site metadata for dashboards or compliance checks.
• Automation pipelines: Combine with other MCP servers to sync Webflow data with CMSs, CRMs, or e‑commerce platforms.
• Developer prototyping: Rapidly test Webflow API interactions from a local AI agent.

FAQ

• Why don’t the tools appear in Claude?

  • Verify the path to index.js is absolute and the server is running.
  • Ensure WEBFLOW_API_TOKEN is correctly set in the environment.
  • Check Claude Desktop logs for startup errors.

• What if I get authentication errors?

  • Confirm the token is valid and has the required scopes.
  • Regenerate the token in Webflow’s Apps & Integrations page.
  • Make sure the token has not expired.

• How are logs accessed?

  • macOS/Linux: tail -n 20 -f ~/Library/Logs/Claude/mcp*.log
  • Windows: Get-Content -Path "$env:AppData\Claude\Logs\mcp*.log" -Wait -Tail 20

• Can I use a different token type (OAuth)?

  • Yes. Place the OAuth access token in WEBFLOW_API_TOKEN the same way as a site token.

• Is there a way to run the server without building from source?

  • Install via the npx command provided in serverConfig which pulls the pre‑built package directly.

Webflow MCP Server

This MCP server enables Claude to interact with Webflow's APIs.

Prerequisites

• Node.js (v16 or higher)
• Claude Desktop App
• Webflow Account
• Webflow API Token (Site token or OAuth Acces Token)

Setup Instructions

1. Create a Webflow API Token

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

Alternatively, you can also generate an OAuth Access Token.

2. Initial Project Setup

Install dependencies:

npm install

3. Configure Environment Variables

Create a .env file for local development (don't commit this file):

WEBFLOW_API_TOKEN=your-api-token

4. Configure Claude Desktop

Open your Claude Desktop 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.

Installing via Smithery

To install Webflow MCP Server for Claude Desktop automatically via Smithery:

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

Available Tools

The server currently provides the following tools:

get_sites

Retrieves a list of all Webflow sites accessible to the authenticated user. Returns detailed information including:

• Site Display Name and Short Name
• Site ID and Workspace ID
• Creation, Last Updated, and Last Published Dates
• Preview URL
• Time Zone settings
• Custom Domains configuration
• Localization settings (primary and secondary locales)
• Data collection preferences

get_site

Retrieves detailed information about a specific Webflow site by ID. Requires a siteId parameter and returns the same detailed information as get_sites for a single site.

Type Definitions

interface WebflowApiError {
    status?: number;
    message: string;
    code?: string;
}

interface WebflowCustomDomain {
    id: string;
    url: string;
    lastPublished: string;
}

interface WebflowLocale {
    id: string;
    cmsLocaleId: string;
    enabled: boolean;
    displayName: string;
    redirect: boolean;
    subdirectory: string;
    tag: string;
}

interface WebflowSite {
    id: string;
    workspaceId: string;
    createdOn: string;
    displayName: string;
    shortName: string;
    lastPublished: string;
    lastUpdated: string;
    previewUrl: string;
    timeZone: string;
    parentFolderId?: string;
    customDomains: WebflowCustomDomain[];
    locales: {
        primary: WebflowLocale;
        secondary: WebflowLocale[];
    };
    dataCollectionEnabled: boolean;
    dataCollectionType: string;
}

Error Handling

The server handles various error scenarios:

Environment Errors

• Missing WEBFLOW_API_TOKEN
• Invalid API token

Troubleshooting

Common Issues

Tools not appearing in Claude

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

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

For Windows:

Get-Content -Path "$env:AppData\Claude\Logs\mcp*.log" -Wait -Tail 20

Environment Variables

If you're getting environment variable errors, verify:

• WEBFLOW_API_TOKEN: Should be a valid API token

Security Considerations

• Keep your API token secure
• Don't commit credentials to version control
• Use environment variables for sensitive data
• Regularly rotate API tokens
• Monitor API usage in Webflow
• Use minimum required permissions for API token

Support

If you encounter any issues:

• Check the troubleshooting section above
• Review Claude Desktop logs
• Examine the server's error output
• Check Webflow's API documentation

License

MIT License - See LICENSE file for details.