# Webflow MCP MCP Server > **Webflow MCP MCP Server** is a hosted, multitenant Model Context Protocol (MCP) server run by **MewCP** (https://mewcp.com), giving AI agents managed access to Webflow MCP. > > MewCP takes care of all MCP infrastructure for you — credential storage, OAuth flows, > token refresh, and production-grade auto-scaling — so your AI agents can connect to > third-party services and run freely without you managing any MCP server yourself. > > Server page: https://mewcp.com/mcp/webflow-mcp > MewCP docs: https://docs.mewcp.com > Full catalog: https://mewcp.com/llms.txt --- ## About Build and manage Webflow websites with AI agents—create and update CMS content, manage site assets and collections, inspect site data, and automate website workflows through MCP. --- ## Details - Server ID: `webflow-mcp` - Version: 2.1.0 - Tools: 34 - Authentication: OAuth, managed by MewCP - Transport: http --- ## Access The gateway URL below serves your **entire MewCP toolset**, not this server on its own. Pasting a config snippet is not enough — Webflow MCP has to be in the toolset first. In order: 1. Add Webflow MCP to your toolset at https://mewcp.com/mcp/webflow-mcp 2. Connect your Webflow MCP account (OAuth); MewCP stores the credential and attaches it to each call 3. Copy your MewCP API key from the dashboard (Developer) 4. Configure your client with the snippet for it below Once connected, an agent does **not** see this server's tools as top-level tools. It sees four meta-tools and reaches everything through them: - `search(query)` — find tools by keyword across the toolset - `get_schema(tools)` — full description and arguments for the tools you picked - `list_accounts(provider)` — only when one app has several connected accounts - `call_tool(server_maskedId, tool_name, args)` — execute So the list below is what `search` can return for this server, not a set of callable tool names on their own. --- ## Tools (34) Descriptions are truncated to 160 characters; call `get_schema` for the full text and the argument schema. Where a tool is annotated, its type is shown — treat `destructive` as irreversible. - `ask_webflow_ai` _(read)_ — Ask Webflow AI about anything related to Webflow API. - `data_agent_instructions_tool` _(destructive)_ — Data tool - Manage and generate agent instructions (rules and skills) for a site. Actions: search_instructions, read_instruction, create_instruction,… - `data_analyze_tool` _(read)_ — Read Webflow Analyze report data for a site, including traffic timeseries, ranked pages, ranked dimensions, ranked engagement events, and aggregate or bucketed… - `data_apps_tool` _(destructive)_ — Inspect and manage Webflow Cloud apps, GitHub sources, environments, variable metadata, deployments, domains, and logs, including destructive lifecycle changes… - `data_campaigns_tool` _(destructive)_ — Campaign Hub sites, campaigns, page-variation personalization, and campaign analytics. Discover sites via list_campaign_hub_sites (workspace from… - `data_cms_tool` _(destructive)_ — Data tool - CMS tool to manage collections, collection fields (static/option/reference), collection field groups, and collection items (list, create, update,… - `data_localization_tool` _(destructive)_ — Data tool for localizing pages and components into secondary locales. Read and update static page content, component content, and component property overrides… - `data_pages_tool` _(destructive)_ — Data tool - Pages tool to perform actions like list pages, get page metadata, update page settings, create a page, bulk update page settings, manage page… - `data_scripts_tool` _(destructive)_ — Data tool - Scripts tool to manage custom code scripts. Register, apply, update, and remove scripts at the site or page level, and read or write freeform… - `data_sites_tool` _(destructive)_ — Data tool - Sites tool to perform actions like list sites, get site details, and publish sites - `data_comments_tool` _(write)_ — Data tool - A comment in Webflow is user feedback attached to a specific element or page inside the Designer, stored as a top-level thread with optional… - `data_enterprise_tool` _(destructive)_ — Data tool - Enterprise tool to perform actions like manage 301 redirects, manage robots.txt and more. This tool only works if User's workspace plan is… - `data_forms_tool` _(destructive)_ — Data tool - Read forms and manage form submissions on a site. Actions: list_forms, get_form, list_site_form_submissions, list_form_submissions,… - `data_fonts_tool` _(destructive)_ — Data tool - Manage a site's uploaded custom fonts: list and inspect them, register new fonts and replace their files (a two-step upload flow), update font… - `data_webhook_tool` _(destructive)_ — Data tool - Webhook tool to perform actions like list webhooks, create webhooks, get webhook details, and delete webhooks for a Webflow site. - `data_sitemap_tool` _(destructive)_ — Data tool - Manage sitemap indexing status for CMS collection items and static pages. Read and update whether pages and collection items appear in a site's… - `data_assets_tool` _(destructive)_ — Data tool - Manage Webflow site assets and asset folders via the Data API. Creates asset metadata entries and returns presigned S3 upload information… - `get_asset_preview` _(read)_ — Get an image preview of a site asset by its asset ID. Fetches the asset's metadata, downloads the smallest available image variant (or the original file when… - `data_style_tool` _(destructive)_ — Data Tool - Style tool to perform actions like get all styles, create a new style, update a style, query styles, remove a style, and manage style variable modes - `data_component_tool` _(destructive)_ — Data tool - Component tool to manage component definitions and instances: create, query, transform, insert, unlink. - `data_component_props_tool` _(destructive)_ — Data tool - Component props tool to manage prop definitions and set or reset prop values on component instances. - `data_component_variants_tool` _(destructive)_ — Data tool - Component variants tool to manage variants and per-variant style overrides. - `data_variable_tool` _(destructive)_ — Data Tool - Variable tool to perform actions like create variable, get all variables, query variables, update variable, rename and delete variables, and… - `data_interactions_tool` _(destructive)_ — Manage IX3 interactions (animations) on a site: list, get, create, update, and delete. Creates take the full definition (object-format triggers and inline… - `data_element_tool` _(destructive)_ — Inspect and modify elements on a Webflow page: query the element tree, move or remove elements, and edit text, styles, links, images, heading levels,… - `data_element_settings_tool` _(destructive)_ — Read and write element settings and data bindings on a Webflow page: get or set settings, discover bindable sources, and set tag, visibility, and DOM id via… - `data_element_builder` _(write)_ — Data Tool - Element builder to create elements on a page via the public-mcp headless surface. - `data_whtml_builder` _(write)_ — Data Tool - WHTML builder to insert elements from HTML and CSS strings on a page via the public-mcp headless surface. Accepts HTML markup and optional raw CSS… - `data_component_builder` _(write)_ — Data Tool - Component builder to insert component instances on a page via the public-mcp headless surface. Supports inserting into an element… - `asset_tool` _(write)_ — Designer Tool - Upload an image from a publicly accessible URL as a Webflow asset. Other asset and folder management is handled by data_assets_tool. - `element_snapshot_tool` _(read)_ — Designer Tool - Element snapshot tool to perform actions like get element snapshot. helpful to get element snapshot for debugging and more and visual feedback. - `designer_tool` _(write)_ — Interact with the user's live Webflow Designer session — select an element on the canvas or read which element is currently selected, navigate the canvas… - `webflow_guide_tool` _(read)_ — Provides essential guidelines and best practices for effectively using the Webflow tools. Call this tool to understand recommended workflows and important… - `get_more_tools` _(read)_ — Check for additional tools whenever your task might benefit from specialized capabilities - even if existing tools could work as a fallback. --- ## Connect Gateway URL: https://gateway.mewcp.com/personal/mcp Every request carries one header: Authorization: Bearer Replace `API_KEY` with your own key from the dashboard (Developer). ## Apps ### Claude Desktop Mac & Windows app - macOS: `~/Library/Application Support/Claude/claude_desktop_config.json` - Windows: `%APPDATA%\Claude\claude_desktop_config.json` ```json { "mcpServers": { "mewcp": { "command": "npx", "args": [ "-y", "mcp-remote@latest", "https://gateway.mewcp.com/personal/mcp", "--header", "Authorization: Bearer API_KEY" ] } } } ``` Already have an "mcpServers" section in your config? Just add the server entry inside it. 1. Open Claude Desktop → Settings → Developer → "Edit Config" 2. Paste the snippet inside the outer { } of the config file (merge with your existing "mcpServers" section if you have one) 3. Save the file and restart Claude Desktop 4. Start a new conversation — your tool will be available ### VS Code Copilot / Cline - Command Palette → "MCP: Open User Configuration" (opens mcp.json). For one project only, use .vscode/mcp.json instead. ```json { "mcp.servers": { "mewcp": { "type": "http", "url": "https://gateway.mewcp.com/personal/mcp", "headers": { "Authorization": "Bearer API_KEY" } } } } ``` Already have a "servers" section in your mcp.json? Just add the server entry inside it. 1. Open VS Code → Command Palette (Cmd+Shift+P / Ctrl+Shift+P) 2. Run "MCP: Open User Configuration" to open your mcp.json 3. Paste the snippet and save 4. Start the server when prompted (or from the MCP servers view) and use it in Copilot Chat ### Cursor AI-first editor - macOS: `~/.cursor/mcp.json` - Windows: `%USERPROFILE%\.cursor\mcp.json` ```json { "mcpServers": { "mewcp": { "url": "https://gateway.mewcp.com/personal/mcp", "headers": { "Authorization": "Bearer API_KEY" } } } } ``` Already have an "mcpServers" section in your mcp.json? Just add the server entry inside it. 1. Open Cursor → Settings → Cursor Settings → MCP 2. Click "Add new global MCP server" 3. Paste the snippet and save 4. Restart Cursor ### Codex OpenAI's CLI agent - Add the snippet to your Codex MCP config or your standard MCP config file for the CLI tool you use. ```json { "mcpServers": { "mewcp": { "type": "http", "url": "https://gateway.mewcp.com/personal/mcp", "headers": { "Authorization": "Bearer API_KEY" } } } } ``` Codex generally reads a standard MCP server block, so you can add this alongside your other configured servers. 1. Open your Codex MCP config or project-level config file 2. Paste the MewCP server block inside the config JSON/TOML structure your tool expects 3. Save the file and restart Codex 4. Verify the tool is available inside a fresh session ### Claude Code Anthropic's CLI agent - ~/.claude.json (user scope) or .mcp.json in your project root — create it if it doesn't exist. Or skip the file and use the CLI command below. ```json { "mcpServers": { "mewcp": { "type": "http", "url": "https://gateway.mewcp.com/personal/mcp", "headers": { "Authorization": "Bearer API_KEY" } } } } ``` Already have an "mcpServers" section in your config? Just add the server entry inside it. 1. Open ~/.claude.json (or .mcp.json in your project root) in a text editor 2. Paste the snippet inside the outer { } (merge with your existing "mcpServers" section if you have one) 3. Save the file and start (or restart) Claude Code 4. Or skip the file entirely and run the CLI command below instead ### OpenCode Open-source terminal agent - ~/.config/opencode/opencode.json (global) or opencode.json in your project root — create it if it doesn't exist. ```json { "$schema": "https://opencode.ai/config.json", "mcp": { "mewcp": { "type": "remote", "url": "https://gateway.mewcp.com/personal/mcp", "enabled": true, "headers": { "Authorization": "Bearer API_KEY" } } } } ``` Already have an "mcp" section in your opencode.json? Just add the server entry inside it. 1. Open ~/.config/opencode/opencode.json (or opencode.json in your project root) in a text editor 2. Paste the snippet inside the outer { } (merge with your existing "mcp" section if you have one) 3. Save the file and start (or restart) OpenCode ### OpenClaw Self-hosted agent gateway - ~/.openclaw/openclaw.json — create it if it doesn't exist. ```json { "mcp": { "servers": { "mewcp": { "transport": "streamable-http", "url": "https://gateway.mewcp.com/personal/mcp", "enabled": true, "headers": { "Authorization": "Bearer API_KEY" } } } } } ``` Already have an "mcp" section in your openclaw.json? Just add the server entry inside "servers". 1. Open ~/.openclaw/openclaw.json in a text editor 2. Paste the snippet inside the outer { } (merge with your existing "mcp" section if you have one) 3. Save the file and restart OpenClaw ### Antigravity Google's agentic IDE - ~/.gemini/config/mcp_config.json (global) or .agents/mcp_config.json (workspace-local) — create it if it doesn't exist. ```json { "mcpServers": { "mewcp": { "serverUrl": "https://gateway.mewcp.com/personal/mcp", "headers": { "Authorization": "Bearer API_KEY" } } } } ``` Already have an "mcpServers" section in your config? Just add the server entry inside it. Remote servers must use the "serverUrl" field — the legacy "url"/"httpUrl" fields aren't supported. 1. In the editor's agent side panel, click "…" → "MCP Servers" → "Manage MCP Servers" → "View raw config" (Antigravity CLI: type /mcp instead to open the Interactive MCP Manager) 2. Paste the snippet inside the outer { } (merge with your existing "mcpServers" section if you have one) 3. Save the file — the server connects automatically ### Hermes Nous Research's CLI agent - config.yaml in your Hermes config directory (~/.hermes) — add this under a top-level "mcp_servers:" key. ```yaml mcp_servers: mewcp: url: "https://gateway.mewcp.com/personal/mcp" headers: Authorization: "Bearer API_KEY" ``` Already have an "mcp_servers" section in your config.yaml? Just add the server entry inside it. 1. Open config.yaml in your Hermes config directory 2. Paste the snippet under the top-level "mcp_servers:" key (merge with existing entries if you have any) 3. Save the file, then run /reload-mcp in Hermes (or start a fresh session) 4. Ask Hermes "Tell me which MCP-backed tools are available right now" to confirm it connected ### DeepSeek Harness DeepSeek's agent harness - cordis.yml in your DSH project — or the patch file you mount plugins from. ```yaml - id: mcp-mewcp name: '@deepseek-ai/dsh-mcp-client' config: serverName: mewcp transport: streamable-http url: https://gateway.mewcp.com/personal/mcp headers: Authorization: "Bearer API_KEY" ``` One plugin instance = one MCP server. Add this entry to your plugin list; don't nest it inside another entry. 1. Open cordis.yml (or your patch file) in your DSH project 2. Paste the entry into your plugin list, keeping the leading dash and indentation 3. Restart DSH (or let HMR reload) — tools register as mcp__mewcp__ 4. Verify with: dsh web --dump-config | grep -A3 mcp ## SDKs ### Python fastmcp client ```python import asyncio from fastmcp import Client from fastmcp.client.transports import StreamableHttpTransport SERVER_URL = "https://gateway.mewcp.com/personal/mcp" API_KEY = "API_KEY" transport = StreamableHttpTransport( url=SERVER_URL, headers={ "Authorization": f"Bearer {API_KEY}", } ) async def main(): client = Client(transport) async with client: tools = await client.list_tools() print(tools) asyncio.run(main()) ``` 1. Install fastmcp: pip install fastmcp 2. Copy the snippet into your project 3. Replace API_KEY with your key from the dashboard 4. Run your script ### TypeScript MCP SDK ```typescript import { Client } from "@modelcontextprotocol/sdk/client/index.js"; import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js"; const SERVER_URL = "https://gateway.mewcp.com/personal/mcp"; const API_KEY = "API_KEY"; const transport = new StreamableHTTPClientTransport(new URL(SERVER_URL), { requestInit: { headers: { Authorization: `Bearer ${API_KEY}`, }, }, }); const client = new Client({ name: "mewcp-client", version: "1.0.0" }); await client.connect(transport); const tools = await client.listTools(); console.log(tools.tools.map((t) => t.name)); ``` 1. Install: npm install @modelcontextprotocol/sdk 2. Copy the snippet into your project 3. Replace API_KEY with your key from the dashboard 4. Run with Node 18+ as an ES module (e.g. npx tsx script.ts)