# Webflow MCP

> Lets your agent build and run your Webflow sites: lay out pages, edit styles and components, manage the CMS and SEO, and publish.

Webflow's own MCP server connects your agent to your Webflow sites. Describe what you want and your agent does it through Webflow's APIs: elements, styles, components and variables on the page, plus the CMS, pages, assets, SEO settings and site analytics. It works within your existing Webflow permissions and roles, and the changes it makes are recorded in your site's activity log.

What you can do with it
- Build responsive sections, add and edit elements, and create classes, components and variables
- Create CMS collections and fields, and add, update and publish items
- Create pages and update their meta titles, descriptions, Open Graph tags and schema markup
- Audit a site for broken links, missing alt text and weak metadata, then fix what it finds
- Organise and compress assets, upload custom fonts and add custom code
- Read form submissions and comment threads, and publish a site to its domains
- Read traffic, Optimize test results and AEO data on sites with those add-ons

How it connects
Webflow hosts it at https://mcp.webflow.com/mcp. Webflow offers a connector in Claude and an app in ChatGPT, and other agents can add the address by hand. Sign-in is OAuth: you log in to Webflow and choose the sites and workspaces your agent can reach. Each sign-in covers one workspace, and only site owners and admins can authorize a site.

Good to know
- Most tools work without Webflow open. A few, such as element snapshots and reading the current selection, page or breakpoints, need the site open in the Webflow Designer with the Webflow MCP Bridge App running; the app installs when you sign in.
- It can't create new site projects: make the site in the Webflow dashboard first.
- Page branches and team administration need an Enterprise plan, and the Analyze, Optimize and AEO tools need those add-ons.
- Each site can give agents its own Agent Instructions, which the server passes on automatically.
- Webflow also runs a Beta server at https://mcp.webflow.com/beta/mcp for experimental tools.

- Type: Plugin
- Made by: Webflow
- Category: Design
- Formats: Remote MCP
- Version: 2.0.0
- Website: https://developers.webflow.com/mcp/reference/overview
- Source: https://github.com/webflow/mcp-server
- Page: https://pluginboard.ai/plugins/webflow-mcp

## Works with

- ChatGPT
- Claude
- Muse
- Grok Bot
- Gemini
- Grok
- GitHub Copilot
- Cursor
- Claude Code
- Codex
- Antigravity
- Gemini CLI
- Replit
- OpenClaw
- OpenCode
- Hermes Agent

## Install

### ChatGPT

In ChatGPT on the web: Plugins → + → Add custom MCP server, then paste https://mcp.webflow.com/mcp under Connection. Business and Enterprise plans; Pro can add read-only servers.

### Claude

In Claude (web or desktop): Customize → Connectors → Add custom connector, then paste https://mcp.webflow.com/mcp

### Muse

In Muse: In a Muse chat, ask it to create a custom connector for the MCP server at https://mcp.webflow.com/mcp. Then tap Connect on the card it shows and sign in, or add your key.

### Grok Bot

In Grok Bot: In a chat with your Bot, say "Add this MCP server: https://mcp.webflow.com/mcp". It confirms the details with you and sets it up, and the tools are ready from your next message.

### Gemini

In Gemini: At gemini.google.com: Settings → Connected Apps → Add a custom app, then paste https://mcp.webflow.com/mcp

### Grok

In Grok on the web: At grok.com/connectors: New Connector → Custom, then enter https://mcp.webflow.com/mcp and sign in if it asks.

### GitHub Copilot

Add to VS Code: vscode:mcp/install?%7B%22name%22%3A%22webflow-mcp%22%2C%22type%22%3A%22http%22%2C%22url%22%3A%22https%3A%2F%2Fmcp.webflow.com%2Fmcp%22%7D

Copilot CLI:

```shell
copilot mcp add --transport http webflow-mcp https://mcp.webflow.com/mcp
```

### Cursor

Add to Cursor: cursor://anysphere.cursor-deeplink/mcp/install?name=webflow-mcp&config=eyJ1cmwiOiJodHRwczovL21jcC53ZWJmbG93LmNvbS9tY3AifQ%3D%3D

Add to .cursor/mcp.json:

```json
{
  "mcpServers": {
    "webflow-mcp": {
      "url": "https://mcp.webflow.com/mcp"
    }
  }
}
```

### Claude Code

Run in your terminal:

```shell
claude mcp add --transport http webflow-mcp https://mcp.webflow.com/mcp
```

### Codex

Run in your terminal:

```shell
codex mcp add webflow-mcp --url https://mcp.webflow.com/mcp
```

### Antigravity

Add to ~/.gemini/config/mcp_config.json:

```json
{
  "mcpServers": {
    "webflow-mcp": {
      "url": "https://mcp.webflow.com/mcp"
    }
  }
}
```

### Gemini CLI

Run in your terminal:

```shell
gemini mcp add --transport http webflow-mcp https://mcp.webflow.com/mcp
```

### Replit

In Replit: At replit.com/integrations, open MCP Servers → + Add MCP server, paste https://mcp.webflow.com/mcp (add any headers under Advanced settings), then click Test & save.

### OpenClaw

Run in your terminal:

```shell
openclaw mcp add webflow-mcp --url https://mcp.webflow.com/mcp --transport streamable-http
```

If it needs a key or sign-in: For https://mcp.webflow.com/mcp, add --header NAME=value for each header it needs, or --auth oauth and then run openclaw mcp login webflow-mcp.

### OpenCode

Run in your terminal:

```shell
opencode mcp add webflow-mcp --url https://mcp.webflow.com/mcp
```

If it needs a key: For https://mcp.webflow.com/mcp, add --header 'NAME=value' for each header it needs. Add --global to use it in every project.

### Hermes Agent

Run in your terminal:

```shell
hermes mcp add webflow-mcp --url https://mcp.webflow.com/mcp
```

Add to ~/.hermes/config.yaml:

```json
{
  "mcp_servers": {
    "webflow-mcp": {
      "url": "https://mcp.webflow.com/mcp"
    }
  }
}
```

If it signs in with OAuth: If https://mcp.webflow.com/mcp asks you to sign in, add --auth oauth to the command, or auth: oauth to its entry.

---
From Pluginboard (https://pluginboard.ai).