Webflow MCP Server
This MCP server lets Claude query Webflow site information through the Webflow API.
List all Webflow sites accessible to the authenticated user.
Retrieve detailed information for a specific Webflow site by ID.
View site details such as names, IDs, workspace, creation/update/publish dates, preview URL, timezone, custom domains, locales, and data collection settings.
Allows Claude to interact with Webflow's APIs to retrieve site information including site details, custom domains, localization settings, and data collection configurations.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Webflow MCP Server show me all my Webflow sites"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Webflow MCP Server
This MCP server enables Claude to interact with Webflow's APIs.
Prerequisites
Node.js (v22 or higher)
Claude Desktop App
Webflow Account
Webflow API Token (Site token or OAuth Acces Token)
Related MCP server: Webflow MCP Server
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 with the
sites:readscope (the only scope this server needs)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 and build:
npm cinpm ci installs the exact dependency versions from package-lock.json and builds the server into dist/.
3. Configure Environment Variables
For running the server outside Claude Desktop (for example, local testing), create a .env file in the project root. It is gitignored, so it won't be committed:
WEBFLOW_API_TOKEN=your-api-tokenThen start the server with:
npm startClaude Desktop does not read .env; it gets the token from its own config (next step).
4. Configure Claude Desktop
Open your Claude Desktop configuration file:
For MacOS:
code ~/Library/Application\ Support/Claude/claude_desktop_config.jsonFor Windows:
code %AppData%\Claude\claude_desktop_config.jsonAdd or update the configuration:
{
"mcpServers": {
"webflow": {
"command": "node",
"args": [
"/ABSOLUTE/PATH/TO/webflow-mcp-server/dist/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 claudeAvailable 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*.logFor Windows:
Get-Content -Path "$env:AppData\Claude\Logs\mcp*.log" -Wait -Tail 20Environment 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.
Available Tools
2 toolsTool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
TDQS
Scored across 2 tools
The two tools have clearly distinct purposes: get_site retrieves detailed information for a specific site by ID, while get_sites lists all accessible sites. There is no overlap in functionality, making it easy for an agent to choose the correct tool based on whether it needs a single site's details or a list of sites.
Both tools follow a consistent verb_noun naming pattern (get_site and get_sites), using the same verb 'get' and singular/plural forms of 'site' to indicate scope. This predictable naming makes the tool set easy to understand and use.
With only 2 tools, the server feels severely under-scoped for a Webflow integration, which typically involves managing sites, collections, items, and other resources. This limited set will likely cause agents to hit dead ends when trying to perform common operations like creating or updating sites.
The tool set is incomplete for Webflow's domain, covering only read operations (get) for sites. It lacks essential CRUD operations such as create_site, update_site, delete_site, and tools for managing collections, items, or other Webflow resources, creating significant gaps that will hinder agent workflows.
Maintenance
Related MCP Connectors
AI-powered design and management for Webflow Sites
Read, write, translate and sync WordPress and Webflow blog articles from Claude.
Connect Claude or any MCP client to Wireflow, the AI canvas for image, video and audio workflows. List, build, inspect and run your workflows and published apps, browse templates, check models, prices and credits, edit a video node's timeline, and plan or schedule social posts. Drafts and edits cost no credits; run tools spend the user's credits.
Read, edit, publish, and preview your pepita websites from Claude.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceEnables Claude to interact with Webflow's APIs, allowing access to site information, collections, and other Webflow resources.4,083 npmMIT
- AlicenseCqualityDmaintenanceEnables AI agents to interact with Webflow APIs for managing sites, pages, components, CMS collections, and custom code.324,083 npmMIT
- AlicenseNot gradedqualityAmaintenanceEnables AI agents to interact with Webflow's Data API and Designer, supporting site content management, design updates, and OAuth or API-token authentication through natural language.512 npmMIT
- AlicenseNot gradedqualityAmaintenanceEnables AI agents to interact with the Webflow Data API to manage sites, CMS content, and Designer app connections through natural language.512 npmMIT
Appeared in Searches
- Resources for Designing a Website
- A server for organizing tasks in Cursor UI for website and trading software development
- A website design and development platform
- A platform for website design and development using Webflow
- A service for building modern, dynamic, and visually appealing websites with trending UI designs