Webflow 官方 MCP 服务器
使用Webflow JavaScript SDK为 Webflow 实现模型上下文协议 (MCP) 的 Node.js 服务器。使 AI 代理能够与 Webflow API 交互。请参阅开发者文档，了解更多关于 Webflow 数据 API 的信息。
ℹ 先决条件
Related MCP server: Webflow MCP Server
▶️ 快速启动（托管在 Cloudflare 工作者上）
对于光标：
前往Settings → Cursor Settings → MCP
点击+ Add New Global MCP Server
粘贴以下配置（或将webflow部分添加到现有配置中）
{
"mcpServers": {
"webflow": {
"command": "npx mcp-remote https://mcp.webflow.com/sse"
}
}
}
保存后，Cursor 将自动打开一个新的浏览器窗口，显示 OAuth 登录页面，以授权您希望 MCP 服务器访问的 Webflow 站点。
对于 Claude 桌面：
打开Settings → Developer
单击Edit Config
在代码编辑器中打开claude_desktop_config.json并粘贴以下配置（或将webflow部分添加到现有配置中）
{
"mcpServers": {
"webflow": {
"command": "npx",
"args": ["mcp-remote", "https://mcp.webflow.com/sse"]
}
}
}
保存文件并重启 Claude Desktop（command/ctrl + R）。Claude 重启后，会自动打开一个新的浏览器窗口，其中会显示一个 OAuth 登录页面，用于授权您希望 MCP 服务器访问的 Webflow 站点。
对于风帆冲浪：
导航至Windsurf - Settings → Advanced Settings
向下滚动到Cascade部分 → Add Server → Add custom server +
粘贴以下配置（或将webflow部分添加到现有配置中）
{
"mcpServers": {
"webflow": {
"command": "npx",
"args": ["mcp-remote", "https://mcp.webflow.com/sse"]
}
}
}
单击Save ，Windsurf 将自动打开一个新的浏览器窗口，显示 OAuth 登录页面，以授权您希望 MCP 服务器访问的 Webflow 站点。
重要提示
所有这些方法都依赖于mcp-remote npm 包，该包截至 2025 年 4 月 30 日仍处于实验阶段。如果您遇到任何问题，并希望重置 OAuth 令牌，可以在重启 MCP 客户端之前运行以下命令：
▶️快速启动（本地安装）
获取您的 Webflow API 令牌
添加到您的 AI 编辑器
{
"mcpServers": {
"webflow": {
"command": "npx",
"args": ["-y", "webflow-mcp-server@0.5.1"],
"env": {
"WEBFLOW_TOKEN": "<YOUR_WEBFLOW_TOKEN>"
}
}
}
}
对于光标：
前往“设置”→“光标设置”→“MCP”
点击+ Add New Global MCP Server
粘贴配置
将YOUR_WEBFLOW_TOKEN替换为您之前复制的令牌
保存并重新启动Cursor
对于 Claude 桌面：
打开“设置”→“开发者”
单击Edit Config
在代码编辑器中打开claude_desktop_config.json并粘贴配置
将YOUR_WEBFLOW_TOKEN替换为您之前复制的令牌 5.保存并重新启动Claude
❓ 故障排除
如果您在 MCP 客户端（例如 Cursor 或 Claude Desktop）中启动服务器时遇到问题，请尝试以下操作。
确保您拥有有效的 Webflow API 令牌
前往Webflow 的 API Playground ，登录并生成令牌，然后从请求生成器复制令牌
使用您复制的令牌替换 MCP 客户端配置中的YOUR_WEBFLOW_TOKEN
保存并重启MCP 客户端
确保已安装 Node 和 NPM
运行以下命令确认您已安装 Node 和 NPM：
清除 NPM 缓存
有时清除NPM 缓存可以解决npx的问题。
修复 NPM 全局包权限
如果npm -v不起作用，但sudo npm -v可以，则可能需要修复 NPM 全局包权限。有关更多信息，请参阅官方NPM 文档。
注意：如果您要更改 shell 配置，则可能需要重新启动 shell 才能使更改生效。
🛠️ 可用工具
站点
sites - list; // List all sites
sites - get; // Get site details
sites - publish; // Publish site changes
页面
pages - list; // List all pages
pages - get - metadata; // Get page metadata
pages - update - page - settings; // Update page settings
pages - get - content; // Get page content
pages - update - static - content; // Update page content
成分
components - list // List all components in a site
components - get - content // Get component content (text, images, nested components)
components - update - content // Update component content for localization
components - get - properties // Get component properties (default values)
components - update - properties // Update component properties for localization
内容管理系统
collections - list; // List collections
collections - get; // Get collection details
collections - create; // Create a collection
collection - fields - create - static; // Create a static field
collection - fields - create - option; // Create an option field
collection - fields - create - reference; // Create a reference field
collection - fields - update; // Update a custom field
collections - items - create - item - live; // Create items
collections - items - update - items - live; // Update items
collections - items - list - items; // List collection items
collections - items - create - item; // Create collection items (staged)
collections - items - update - items; // Update collection items (staged)
collections - items - publish - items; // Publish collection items
自定义代码
custom code - add - inline - site - script // Register an inline script for a site
custom code - get - registered - site - script - list // List all scripts registered to a site
custom code - get - applied - site - script - list //Get all scripts applied to a site
custom code - delete site custom code // Remove scripts from a site
🗣️ 提示和资源
此实现不包含 MCP 规范中的prompts或resources 。不过，未来当主流 MCP 客户端能够更广泛地支持该规范时，这种情况可能会有所改变。
🚧 开发模式
如果您想以开发模式运行服务器，您可以安装依赖项并使用以下命令运行服务器：
克隆并安装：
git clone git@github.com:webflow/mcp-server.git
cd mcp-server
npm install
将您的令牌添加到项目根目录下的.env文件中：
# .env
WEBFLOW_TOKEN=<YOUR_WEBFLOW_TOKEN>
启动开发服务器：
📄 Webflow 开发者资源
⚠️ 已知限制
静态页面内容更新
pages_update_static_content 端点目前仅支持在次要语言环境中更新本地化的静态页面。默认语言环境中的静态内容更新不受支持，否则会导致错误。
