Webflow is a visual web design and CMS platform. Use Data API tools for sites, pages, CMS, components, scripts, webhooks, comments, and enterprise settings; use Designer tools for variables, styles, pages, elements, components, assets, and HTML insertion.
Install
Section titled “Install”Add Webflow to your zone and connect it to your MCP client.
Step 1 - Install in Keycard Console
Section titled “Step 1 - Install in Keycard Console”-
In your zone’s Keycard Console, go to Applications -> Add Application -> Explore MCP Servers.
-
Search for
Webflowand click Install. -
A browser tab opens to Webflow’s OAuth consent screen. Sign in and approve the requested permissions.
-
You’re redirected back. Webflow appears on the Applications page with a Keycard MCP Gateway URL.
Step 2 - Connect your MCP client
Section titled “Step 2 - Connect your MCP client”On the Applications page, click Add to Coding Agent next to Webflow and pick how you want to install:
- Cursor - opens a deeplink that hands the MCP config straight to Cursor. Click Install inside Cursor to finish.
- Claude Code - opens a dialog with a
claude mcp addcommand. Pick a scope (User, Project, or Local), then copy and run the command in your terminal. - Install manually - reveals the Server Name and Server URL to paste into any other MCP-compatible client.
Once connected, Webflow’s tools are available to the agent, scoped to whoever signs in to your zone.
What Webflow can do once installed.
Webflow provides 22 tools:
- webflow_guide_tool
- Guidelines and best practices for using Webflow MCP tools (call before other tools)
- get_more_tools
- Discover additional specialized tools when the task may benefit from them
- ask_webflow_ai
- Ask Webflow AI about the Webflow API
- data_sites_tool
- List sites, get site details, and publish sites
- data_pages_tool
- List pages, page metadata, page settings, static content, and updates
- data_cms_tool
- CMS collections, fields, items, publish, and delete operations
- data_components_tool
- List components and get or update component content and properties
- data_scripts_tool
- List registered and applied scripts; add inline site scripts or remove site scripts
- data_webhook_tool
- List, create, inspect, and delete site webhooks
- data_comments_tool
- Inspect Designer comment threads and feedback on elements or pages
- data_enterprise_tool
- Enterprise workspace features such as 301 redirects and robots.txt (Enterprise plan only)
- variable_tool
- Designer: create, list, and update variables
- style_tool
- Designer: create, list, update, and remove styles
- de_page_tool
- Designer: create pages and folders, get or switch the current page
- element_tool
- Designer: list elements, get selection, and select elements on the active page
- element_builder
- Designer: create elements on the active page
- element_snapshot_tool
- Designer: capture element snapshots for debugging and visual feedback
- whtml_builder
- Designer: insert markup from HTML and CSS strings into a parent element
- component_builder
- Designer: insert component instances into an element or a component slot
- de_component_tool
- Designer: create component instances and list components
- asset_tool
- Designer: folders and assets (create, list, update)
- get_image_preview
- Designer: preview an image from a URL (JPG, PNG, GIF, WEBP, AVIF)
Next steps
Section titled “Next steps”What to do once Webflow is installed.
Now do this
- Confirm the gateway works by asking your AI client to call one of the Webflow tools above.
Recommended
- Decide who can use it - write access policies scoped to the Webflow resource so only the right users and agents reach the tools.
- Watch the calls - every tool call lands in your audit log with user identity, resource, and policy decision.