Webflow MCP Server

官方

通过Webflow API列出并编辑您的站点和CMS数据。

文档

Webflow 的 MCP 服务器

一个使用 Webflow JavaScript SDK 为 Webflow 实现模型上下文协议 (MCP) 的 Node.js 服务器。让 AI 代理能够与 Webflow API 交互。在开发者文档中了解更多关于 Webflow Data API 的信息。

前提条件

🚀 远程安装

通过安装 Webflow 的远程 MCP 服务器开始使用。远程服务器使用 OAuth 与你的 Webflow 站点进行身份验证，并使用一个配套应用将你的实时画布与 AI 代理同步。

要求

Node.js 22.3.0 或更高版本

注意：MCP 服务器目前支持 Node.js 22.3.0 或更高版本。如果你遇到版本问题，请参阅 Node.js 兼容性指南。

Cursor

将 MCP 服务器添加到 Cursor

前往 Settings → Cursor Settings → MCP & Integrations。
在 MCP 工具下，点击 + New MCP Server。
将以下配置粘贴到 .cursor/mcp.json 中（或将 webflow 部分添加到你的现有配置中）：

{
  "mcpServers": {
    "webflow": {
      "url": "https://mcp.webflow.com/sse"
    }
  }
}

提示：你可以创建一个项目级别的 mcp.json，以避免在多个 Cursor 窗口中重复进行身份验证提示。请参阅 Cursor 关于配置位置的文档。

保存并关闭文件。Cursor 将自动打开一个 OAuth 登录页面，你可以在其中授权 Webflow 站点与 MCP 服务器一起使用。

打开 Webflow Designer

在 Webflow Designer 中打开你的站点，或询问你的 AI 代理：

Give me a link to open <MY_SITE_NAME> in the Webflow Designer

打开 MCP Webflow 应用

在 Designer 中，打开应用面板（按 E）。
启动你已发布的“Webflow MCP Bridge App”。
等待应用连接到 MCP 服务器。

编写你的第一个提示

在你的 AI 聊天中尝试这些：

Analyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords

Find older blog posts that mention similar topics and add internal links to my latest post

Create a hero section card on my home page with a CTA button and responsive design

Claude 桌面版

将 MCP 服务器添加到 Claude 桌面版

启用开发者模式：Help → Troubleshooting → Enable Developer Mode。
打开开发者设置：File → Settings → Developer。
点击 Get Started 或编辑配置以打开 claude_desktop_config.json 并添加：

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["mcp-remote", "https://mcp.webflow.com/sse"]
    }
  }
}

保存并重启 Claude 桌面版（Cmd/Ctrl + R）。将打开一个 OAuth 登录页面以授权站点。

打开 Webflow Designer

在 Webflow Designer 中打开你的站点，或询问你的 AI 代理：

Give me a link to open <MY_SITE_NAME> in the Webflow Designer

打开 MCP Webflow 应用

在 Designer 中，打开应用面板（按 E）。
启动你已发布的“Webflow MCP Bridge App”。
等待应用连接到 MCP 服务器。

编写你的第一个提示

Analyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords

Find older blog posts that mention similar topics and add internal links to my latest post

Create a hero section card on my home page with a CTA button and responsive design

重置你的 OAuth 令牌

要重置你的 OAuth 令牌，请在终端中运行以下命令。

rm -rf ~/.mcp-auth

Node.js 兼容性

请参阅 Webflow 开发者文档中的 Node.js 兼容性指南。

本地安装

你还可以将 MCP 服务器配置为在本地运行。这需要：

在具有管理员权限的 Webflow 工作区中创建并注册你自己的 MCP Bridge App
配置你的 AI 客户端以使用 Webflow API 令牌启动本地 MCP 服务器

1. 创建并发布 MCP Bridge App

在将本地 MCP 服务器连接到你的 AI 客户端之前，你必须在你的工作区中创建并发布 Webflow MCP Bridge App。

步骤

注册一个 Webflow 应用
- 前往你的 Webflow 工作区并注册一个新应用。
- 遵循官方指南：注册应用。
获取 MCP Bridge App 代码
- 选项 A：从发布页面下载最新的 bundle.zip。
- 选项 B：克隆仓库并构建它：
```
git clone https://github.com/virat21/webflow-mcp-bridge-app
cd webflow-mcp-bridge-app
```
  - 然后按照仓库说明构建项目。
发布 Designer 扩展
- 前往 Webflow 仪表板 → 工作区设置 → 应用与集成 → 开发 → 你的应用。
- 点击 “发布扩展版本”。
- 上传你构建好的 bundle.zip 文件。
在 Designer 中打开应用
- 发布后，在你工作区内的某个站点中，从 Designer → 应用面板 打开 MCP Bridge App。

2. 配置你的 AI 客户端

Cursor

添加到 .cursor/mcp.json：

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

Claude 桌面版

添加到 claude_desktop_config.json：

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

3. 将 MCP 服务器与 Webflow Designer 一起使用

在 Webflow Designer 中打开你的站点。
打开应用面板（按 E）并启动你已发布的“Webflow MCP Bridge App”。
等待应用连接到 MCP 服务器，然后从你的 AI 客户端使用工具。
如果 Bridge App 提示输入本地连接 URL，请从你的 AI 客户端调用 get_designer_app_connection_info 工具，并粘贴返回的 http://localhost:<port> URL。

可选：通过 shell 在本地运行

WEBFLOW_TOKEN="<YOUR_WEBFLOW_TOKEN>" npx -y webflow-mcp-server@latest

# PowerShell
$env:WEBFLOW_TOKEN="<YOUR_WEBFLOW_TOKEN>"
npx -y webflow-mcp-server@latest

重置你的 OAuth 令牌

要重置你的 OAuth 令牌，请在终端中运行以下命令。

rm -rf ~/.mcp-auth

Node.js 兼容性

请参阅 Webflow 开发者文档中的 Node.js 兼容性指南。

❓ 故障排除

如果你在 MCP 客户端（例如 Cursor 或 Claude 桌面版）中启动服务器时遇到问题，请尝试以下方法。

确保你拥有有效的 Webflow API 令牌

前往 Webflow 的 API Playground，登录并生成一个令牌，然后从请求生成器中复制该令牌
将你的 MCP 客户端配置中的 YOUR_WEBFLOW_TOKEN 替换为你复制的令牌
保存并重启你的 MCP 客户端

确保你已安装 Node 和 NPM

Node.js
NPM

运行以下命令以确认你已安装 Node 和 NPM：

node -v
npm -v

清除你的 NPM 缓存

有时清除你的 NPM 缓存可以解决与 npx 相关的问题。

npm cache clean --force

修复 NPM 全局包权限

如果 npm -v 对你不起作用，但 sudo npm -v 可以，你可能需要修复 NPM 全局包权限。请参阅官方 NPM 文档了解更多信息。

注意：如果你正在更改你的 shell 配置，你可能需要重启你的 shell 以使更改生效。

🛠️ 可用工具

请参阅 ./tools 目录以获取可用工具列表

🗣️ 提示与资源

此实现不包含 MCP 规范中的 prompts 或 resources。但是，当流行的 MCP 客户端有更广泛的支持时，这可能会在未来发生变化。

📄 Webflow 开发者资源

⚠️ 已知限制

静态页面内容更新

pages_update_static_content 端点目前仅支持对次要语言环境中的本地化静态页面进行更新。不支持对默认语言环境中的静态内容进行更新，这将导致错误。