Webflow

Webflow 的 MCP 服务

这是一个使用 Webflow JavaScript SDK 实现的 Node.js 服务，可通过模型上下文协议（MCP）访问 Webflow。让 AI Agent 能够与 Webflow API 交互。请参阅开发者文档，详细了解 Webflow 的 Data API。

前提条件

• Node.js
• NPM
• Webflow 账户

🚀 远程安装

首先安装 Webflow 的远程 MCP 服务。远程服务使用 OAuth 对你的 Webflow 站点进行身份验证，并配有一个配套应用，可将实时画布同步到你的 AI Agent。

要求

• Node.js 22.3.0 或更高版本

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

Cursor

将 MCP 服务添加到 Cursor

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

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

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

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

打开 Webflow Designer

• 在 Webflow Designer 中打开你的站点，或向 AI Agent 提出以下请求：

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

打开 MCP Webflow App

1. 在 Designer 中打开 Apps 面板（按 E）。
2. 启动已发布的“Webflow MCP Bridge App”。
3. 等待应用连接到 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 桌面版

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

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

4. 保存并重启 Claude Desktop（Cmd/Ctrl + R）。系统将打开 OAuth 登录页面，以授权站点。

打开 Webflow Designer

• 在 Webflow Designer 中打开你的站点，或向 AI Agent 提出以下请求：

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

打开 MCP Webflow App

1. 在 Designer 中打开 Apps 面板（按 E）。
2. 启动已发布的“Webflow MCP Bridge App”。
3. 等待应用连接到 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。

步骤

1. 注册 Webflow 应用

   • 前往 Webflow 工作区并注册一个新应用。
   • 按照官方指南操作：注册应用。

2. 获取 MCP Bridge App 代码

   • 选项 A：从发布页面下载最新的 bundle.zip。
   • 选项 B：克隆代码仓库并构建：

     git clone https://github.com/virat21/webflow-mcp-bridge-app
     cd webflow-mcp-bridge-app
     

     • 然后按照代码仓库中的说明构建项目。

3. 发布 Designer 扩展

   • 前往 Webflow Dashboard → Workspace settings → Apps & Integrations → Develop → Your App。
   • 点击 “Publish Extension Version”。
   • 上传你构建的 bundle.zip 文件。

4. 在 Designer 中打开应用

   • 发布后，在工作区中的某个站点内，通过 Designer → Apps panel 打开 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. 在 Webflow Designer 中使用 MCP 服务

• 在 Webflow Designer 中打开你的站点。
• 打开 Apps 面板（按 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 Desktop）中启动服务时遇到问题，请尝试以下方法。

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

1. 前往 Webflow API Playground，登录并生成令牌，然后从 Request Generator 中复制该令牌
2. 将 MCP 客户端配置中的 YOUR_WEBFLOW_TOKEN 替换为你复制的令牌
3. 保存并重启 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 开发者资源

• Webflow API 文档
• Webflow JavaScript SDK

⚠️ 已知限制

静态页面内容更新

pages_update_static_content 端点目前仅支持更新次要语言区域中的本地化静态页面。不支持更新默认语言区域中的静态内容，尝试更新将导致错误。