Webflow 官方 MCP 服务器

Name: Webflow
Author: webflow

使用Webflow JavaScript SDK为 Webflow 实现模型上下文协议 (MCP) 的 Node.js 服务器。使 AI 代理能够与 Webflow API 交互。请参阅开发者文档，了解更多关于 Webflow 数据 API 的信息。

npm 防护罩蕨类盾牌

ℹ 先决条件

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 客户端之前运行以下命令：

rm -rf ~/.mcp-auth

▶️快速启动（本地安装）

获取您的 Webflow API 令牌

前往Webflow 的 API Playground
登录并生成令牌
从请求生成器复制令牌

添加到您的 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：

node -v
npm -v

清除 NPM 缓存

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

npm cache clean --force

修复 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>

启动开发服务器：

npm start

📄 Webflow 开发者资源

⚠️ 已知限制

静态页面内容更新

pages_update_static_content 端点目前仅支持在次要语言环境中更新本地化的静态页面。默认语言环境中的静态内容更新不受支持，否则会导致错误。

Webflow