MCP服务器

Name: MCP服务器
Author: webflow

作者：webflow87 星标更新：2025-11-13

安装使用来源：spider==github.com

项目介绍

Webflow 的 MCP 服务器

一个使用 Node.js 实现的 Model Context Protocol (MCP)，用于与 Webflow 进行交互，采用 Webflow JavaScript SDK。使 AI 代理能够与 Webflow API 进行互动。更多关于 Webflow 数据 API 的信息，请参阅开发者文档。

预备条件

🚀 远程安装

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

要求

Node.js 22.3.0 或更高版本

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

Cursor

将 MCP 服务器添加到 Cursor

前往 设置 → Cursor 设置 → MCP & 集成。
在 MCP 工具下，点击 + 新 MCP 服务器。
将以下配置粘贴到 .cursor/mcp.json 文件中（或在现有配置中添加 webflow 部分）：

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

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

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

打开 Webflow 设计器

在 Webflow 设计器中打开您的站点，或者询问您的 AI 代理：

给我一个链接以在 Webflow 设计器中打开 <MY_SITE_NAME>

打开 MCP Webflow 应用

在设计者中，打开应用面板（按 E 键）。
启动已发布的 "Webflow MCP 桥接应用"。
等待应用连接到 MCP 服务器。

编写您的第一个提示

尝试在您的 AI 聊天中使用这些提示：

分析我最近的 5 篇博客文章，并提出 3 个新的主题想法及 SEO 关键词

查找提到类似主题的旧博客文章，并在我的最新文章中添加内部链接

在我的主页上创建一个带有 CTA 按钮和响应式设计的英雄部分卡片

Claude 桌面版

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

启用开发者模式：帮助 → 故障排除 → 启用开发者模式。
打开开发者设置：文件 → 设置 → 开发者。
点击 开始 或编辑配置以打开 claude_desktop_config.json 并添加：

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

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

打开 Webflow 设计器

在 Webflow 设计器中打开您的站点，或者询问您的 AI 代理：

给我一个链接以在 Webflow 设计器中打开 <MY_SITE_NAME>

打开 MCP Webflow 应用

在设计者中，打开应用面板（按 E 键）。
启动已发布的 "Webflow MCP 桥接应用"。
等待应用连接到 MCP 服务器。

编写您的第一个提示

分析我最近的 5 篇博客文章，并提出 3 个新的主题想法及 SEO 关键词

查找提到类似主题的旧博客文章，并在我的最新文章中添加内部链接

在我的主页上创建一个带有 CTA 按钮和响应式设计的英雄部分卡片

重置您的 OAuth 令牌

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

rm -rf ~/.mcp-auth

Node.js 兼容性

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

本地安装

您还可以配置 MCP 服务器以本地运行。这需要：

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

1. 创建并发布 MCP 桥接应用

在连接本地 MCP 服务器到您的 AI 客户端之前，您必须在工作区中创建并发布 Webflow MCP 桥接应用。

步骤

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

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 设计器

在 Webflow 设计器中打开您的站点。
打开应用面板（按 E 键）并启动已发布的 “Webflow MCP 桥接应用”。
等待应用连接到 MCP 服务器，然后使用来自您的 AI 客户端的工具。
如果桥接应用提示本地连接 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 沙箱，登录并生成一个令牌，然后从请求生成器复制该令牌。
将您的 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 端点目前仅支持更新次要语言中的本地化静态页面。默认语言中的静态内容更新不受支持，并会导致错误。