Webflow

What is Webflow MCP Server?

Webflow MCP Server is a tool that allows the Claude Desktop App to interact with Webflow's APIs. It acts as a bridge, enabling Claude to programmatically manage and retrieve information about Webflow sites.

How to use Webflow MCP Server?

To use Webflow MCP Server, you need Node.js (v16+), the Claude Desktop App, a Webflow account, and a Webflow API Token. The setup involves:

1. Creating a Webflow API Token: Generate a site token or OAuth Access Token from your Webflow account settings.
2. Initial Project Setup: Install dependencies using npm install.
3. Configure Environment Variables: Create a .env file with WEBFLOW_API_TOKEN=your-api-token.
4. Configure Claude Desktop: Update the claude_desktop_config.json file to include the mcpServers configuration, pointing to the server's build file and setting the WEBFLOW_API_TOKEN.

Alternatively, you can install it automatically via Smithery using npx -y @smithery/cli install @kapilduraphe/webflow-mcp-server --client claude.

Key Features of Webflow MCP Server

• API Integration: Seamlessly connects Claude with Webflow's APIs.
• Site Management Tools: Provides tools to retrieve information about Webflow sites.
  • get_sites: Retrieves a list of all accessible Webflow sites with detailed information (display name, ID, creation/update/publish dates, preview URL, time zone, custom domains, localization, data collection preferences).
  • get_site: Retrieves detailed information for a specific Webflow site by ID.
• Error Handling: Includes mechanisms for handling environment errors (missing/invalid API token) and authentication errors.
• Logging: Provides instructions for viewing server logs for troubleshooting.
• Security Considerations: Emphasizes secure handling of API tokens, environment variables, and regular token rotation.

Use Cases of Webflow MCP Server

• Automated Site Audits: Programmatically fetch details of multiple Webflow sites for auditing or reporting.
• Content Management: Integrate with Claude to automate certain content management tasks by retrieving site information.
• Development and Testing: Facilitate development workflows by providing programmatic access to site data for testing or integration purposes.
• Data Analysis: Collect site-specific data for analysis and insights.

FAQ from Webflow MCP Server

Q: Tools not appearing in Claude? A: Check Claude Desktop logs, verify WEBFLOW_API_TOKEN is set correctly, and ensure the path to index.js is absolute and correct.

Q: Authentication Errors? A: Verify your API token is valid, has necessary permissions, and hasn't expired.

Q: How to view server logs? A: Use tail -n 20 -f ~/Library/Logs/Claude/mcp*.log for MacOS/Linux or Get-Content -Path "$env:AppData\Claude\Logs\mcp*.log" -Wait -Tail 20 for Windows.

Q: What are the security considerations? A: Keep your API token secure, don't commit credentials, use environment variables, regularly rotate API tokens, monitor API usage, and use minimum required permissions.

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.