Skip to main content
Glama
deenesjakoruzh
webflow

Webflow

Official
by webflow
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Hybrid

Webflow 官方 MCP 服务器

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

npm 防护罩 蕨类盾牌

ℹ 先决条件

Related MCP server: Webflow MCP Server

▶️ 快速启动（托管在 Cloudflare 工作者上）

对于光标：

  1. 前往Settings → Cursor Settings → MCP

  2. 点击+ Add New Global MCP Server

  3. 粘贴以下配置（或将webflow部分添加到现有配置中）

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

  1. 保存后，Cursor 将自动打开一个新的浏览器窗口，显示 OAuth 登录页面，以授权您希望 MCP 服务器访问的 Webflow 站点。

对于 Claude 桌面：

  1. 打开Settings → Developer

  2. 单击Edit Config

  3. 在代码编辑器中打开claude_desktop_config.json并粘贴以下配置（或将webflow部分添加到现有配置中）

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

  1. 保存文件并重启 Claude Desktop（command/ctrl + R）。Claude 重启后，会自动打开一个新的浏览器窗口，其中会显示一个 OAuth 登录页面，用于授权您希望 MCP 服务器访问的 Webflow 站点。

对于风帆冲浪：

  1. 导航至Windsurf - Settings → Advanced Settings

  2. 向下滚动到Cascade部分 → Add Server → Add custom server +

  3. 粘贴以下配置（或将webflow部分添加到现有配置中）

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

  1. 单击Save ，Windsurf 将自动打开一个新的浏览器窗口，显示 OAuth 登录页面，以授权您希望 MCP 服务器访问的 Webflow 站点。

重要提示

所有这些方法都依赖于mcp-remote npm 包，该包截至 2025 年 4 月 30 日仍处于实验阶段。如果您遇到任何问题，并希望重置 OAuth 令牌，可以在重启 MCP 客户端之前运行以下命令：

rm -rf ~/.mcp-auth

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

  1. 获取您的 Webflow API 令牌

  1. 添加到您的 AI 编辑器

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

对于光标：

  1. 前往“设置”→“光标设置”→“MCP”

  2. 点击+ Add New Global MCP Server

  3. 粘贴配置

  4. 将YOUR_WEBFLOW_TOKEN替换为您之前复制的令牌

  5. 保存并重新启动Cursor

对于 Claude 桌面：

  1. 打开“设置”→“开发者”

  2. 单击Edit Config

  3. 在代码编辑器中打开claude_desktop_config.json并粘贴配置

  4. 将YOUR_WEBFLOW_TOKEN替换为您之前复制的令牌 5.保存并重新启动Claude

❓ 故障排除

如果您在 MCP 客户端（例如 Cursor 或 Claude Desktop）中启动服务器时遇到问题，请尝试以下操作。

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

  1. 前往Webflow 的 API Playground ，登录并生成令牌，然后从请求生成器复制令牌

  2. 使用您复制的令牌替换 MCP 客户端配置中的YOUR_WEBFLOW_TOKEN

  3. 保存并重启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 客户端能够更广泛地支持该规范时，这种情况可能会有所改变。

🚧 开发模式

如果您想以开发模式运行服务器，您可以安装依赖项并使用以下命令运行服务器：

  1. 克隆并安装：

git clone git@github.com:webflow/mcp-server.git
cd mcp-server
npm install

  1. 将您的令牌添加到项目根目录下的.env文件中：

# .env
WEBFLOW_TOKEN=<YOUR_WEBFLOW_TOKEN>

  1. 启动开发服务器：

npm start

📄 Webflow 开发者资源

⚠️ 已知限制

静态页面内容更新

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

Install Server
A
security – no known vulnerabilities
A
license - permissive license
-
quality - not tested

How are these scores calculated?

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Tools

View all tools

Appeared in Searches

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/webflow/mcp-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server