# Webflow MCP [Health: Active]

**Category:** 📐 Architecture & Design  
**Repository:** https://github.com/webflow/mcp-server  
**GitHub Stars:** 141  
**npm Downloads (last month):** 8742  
**Views:** 4  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/mcp-158

## Description
AI-powered design and management for Webflow Sites

## Tools
Capabilities this server exposes over MCP:

- **webflow_guide_tool** — Provides essential guidelines and best practices for effectively using the Webflow tools. Call this tool to understand recommended workflows and important considerations before performing actions. ALWAYS CALL THIS TOOL FIRST BEFORE CALLING ANY OTHER TOOLS.  ALWAYS CALL THIS TOOL FIRST BEFORE CALLING ANY OTHER TOOLS. 
- **ask_webflow_ai** — Ask Webflow AI about anything related to Webflow API.
- **collections_list** — List all CMS collections in a site. Returns collection metadata including IDs, names, and schemas.
- **collections_get** — Get detailed information about a specific CMS collection including its schema and field definitions.
- **collections_create** — Create a new CMS collection in a site with specified name and schema.
- **collection_fields_create_static** — Create a new static field in a CMS collection (e.g., text, number, date, etc.).
- **collection_fields_create_option** — Create a new option field in a CMS collection with predefined choices.
- **collection_fields_create_reference** — Create a new reference field in a CMS collection that links to items in another collection.
- **collection_fields_update** — Update properties of an existing field in a CMS collection.
- **collections_items_create_item_live** — Create and publish new items in a CMS collection directly to the live site.
- **collections_items_update_items_live** — Update and publish existing items in a CMS collection directly to the live site.
- **collections_items_list_items** — List items in a CMS collection with optional filtering and sorting.
- **collections_items_create_item** — Create new items in a CMS collection as drafts.
- **collections_items_update_items** — Update existing items in a CMS collection as drafts.
- **collections_items_publish_items** — Publish draft items in a CMS collection to make them live.
- **collections_items_delete_item** — Delete an item in a CMS collection. Items will only be deleted in the primary locale unless a cmsLocaleId is included in the request. 
- **components_list** — List all components in a site. Returns component metadata including IDs, names, and versions.
- **components_get_content** — Get the content structure and data for a specific component including text, images, and nested components.
- **components_update_content** — Update content on a component in secondary locales by modifying text nodes and property overrides.
- **components_get_properties** — Get component properties including default values and configuration for a specific component.
- **components_update_properties** — Update component properties for localization to customize behavior in different languages.
- **pages_list** — List all pages within a site. Returns page metadata including IDs, titles, and slugs.
- **pages_get_metadata** — Get metadata for a specific page including SEO settings, Open Graph data, and page status (draft/published).
- **pages_update_page_settings** — Update page settings including SEO metadata, Open Graph data, slug, and publishing status.
- **pages_get_content** — Get the content structure and data for a specific page including all elements and their properties.
- **pages_update_static_content** — Update content on a static page in secondary locales by modifying text nodes and property overrides.
- **site_registered_scripts_list** — List all registered scripts for a site. To apply a script to a site or page, first register it via the Register Script endpoints, then apply it using the relevant Site or Page endpoints.
- **site_applied_scripts_list** — Get all scripts applied to a site by the App. To apply a script to a site or page, first register it via the Register Script endpoints, then apply it using the relevant Site or Page endpoints.
- **add_inline_site_script** — Register an inline script for a site. Inline scripts are limited to 2000 characters. 
- **delete_all_site_scripts**
- **sites_list** — List all sites accessible to the authenticated user. Returns basic site information including site ID, name, and last published date.
- **sites_get** — Get detailed information about a specific site including its settings, domains, and publishing status.
- **sites_publish** — Publish a site to specified domains. This will make the latest changes live on the specified domains.
- **asset_tool** — Designer Tool - Asset tool to perform actions like create folder, get all assets and folders, update assets and folders
- **get_image_preview** — Designer Tool - Get image preview from url. this is helpful to get image preview from url.
- **de_component_tool** — Designer tool - Component tool to perform actions like create component instances, get all components and more.
- **element_builder** — Designer Tool - Element builder to create element on current active page. only create elements upto max 3 levels deep. divide your elements into smaller elements to create complex structures. recall this tool to create more elements. but max level is upto 3 levels. you can have as many children as you want. but max level is 3 levels.
- **element_tool** — Designer Tool - Element tool to perform actions like get all elements, get selected element, select element on current active page. and more
- **de_page_tool** — Designer Tool - Page tool to perform actions like create page, create page folder, get current page, switch page
- **style_tool** — Designer Tool - Style tool to perform actions like create style, get all styles, update styles
- **de_learn_more_about_styles** — Designer tool - Learn more about styles supported by Webflow Designer.Please do not use any other styles which is not supported by Webflow Designer.Please use the long-form alias of a CSS property when managing styles. For example, the property row-gap has a long-form alias of grid-row-gap, margin has long-form alias of margin-top, margin-right, margin-bottom, margin-left, etc.
- **variable_tool** — Designer Tool - Variable tool to perform actions like create variable, get all variables, update variable
- **get_designer_app_connection_info** — Get Webflow MCP App Connection Info. if user ask to get Webflow MCP app connection info, use this tool

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "webflow-mcp": {
    "command": "npx",
    "args": ["-y","webflow-mcp-server@latest"],
    "env": {
      "WEBFLOW_TOKEN": ""
    }
  }
}
```

**Requires environment variables:** `WEBFLOW_TOKEN` — the values above are empty placeholders; fill in real credentials before running (see the repository for what each one is for).

## Documentation

## What Webflow MCP MCP server does

Webflow MCP connects MCP-compatible AI clients to Webflow sites through the Webflow JavaScript SDK and Data API. It lets an agent work with Webflow data and coordinate with the Webflow Designer through a companion MCP Bridge App. The repository describes examples such as analyzing recent blog posts, suggesting SEO-oriented topics, finding related older posts, adding internal links, and creating a responsive hero section card with a call-to-action button.

The Webflow MCP MCP server is intended for workflows where an AI client needs access to Webflow rather than only producing design or content suggestions in isolation. The available operations are maintained in the repository’s `tools` directory.

## How it works

The hosted option uses `https://mcp.webflow.com/sse` and OAuth. After the client authenticates, the user authorizes Webflow sites for use with the server. A published Webflow MCP Bridge App must also be opened from the Designer’s Apps panel so the live Designer canvas can connect to the agent.

The local option runs `webflow-mcp-server` with Node.js and an environment variable containing a Webflow API token. It also requires a separately registered and published MCP Bridge App in a Webflow workspace with Admin permissions. If the bridge requests a local connection address, the client can call `get_designer_app_connection_info` and provide the returned localhost URL to the app.

## Setup and configuration

Node.js, npm, and a Webflow account are prerequisites. The remote installation requires Node.js 22.3.0 or later. Cursor can register the hosted SSE URL directly. Claude Desktop uses `mcp-remote` to reach that same endpoint. Both clients can instead start the package locally with `npx -y webflow-mcp-server@latest` and `WEBFLOW_TOKEN`.

For local use, register a Webflow app, obtain the MCP Bridge App bundle or build it from its repository, publish the Designer extension, and open it in a site’s Designer. API tokens can be generated through Webflow’s API Playground. OAuth state can be cleared by removing `~/.mcp-auth`.

## Tools and capabilities

The Webflow MCP MCP server exposes tools for interacting with Webflow APIs and supports Designer-connected workflows. Documented use cases include:

- Reviewing recent blog posts and generating topic ideas with SEO keywords.
- Locating older posts with related subjects and adding internal links.
- Creating a home-page hero card with a CTA and responsive design.
- Returning connection information for the local Designer bridge through `get_designer_app_connection_info`.

The implementation does not currently provide MCP prompts or resources.

## Limitations and notes

The Designer workflow depends on the separately published Webflow MCP Bridge App. Local operation requires an appropriately permissioned Webflow workspace and token. OAuth and local token setup are different connection paths, and client configuration must match the selected path.

_Full upstream README: https://allmcps.com/mcp/mcp-158/readme_