Skip to main content
Glama
deenesjakoruzh

Webflow

Official
by webflow
npmGitHub
TypeScript
MIT License
243
51
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

Webflow 官方 MCP 服务器

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

ℹ 先决条件

▶️ 快速启动（托管在 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
A
quality - confirmed to work

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

View all tools

与 Webflow 网站、页面和集合进行交互。

  1. ℹ 先决条件
    1. ▶️ 快速启动（托管在 Cloudflare 工作者上）
      1. ▶️快速启动（本地安装）
        1. ❓ 故障排除
          1. 确保您拥有有效的 Webflow API 令牌
          2. 确保已安装 Node 和 NPM
          3. 清除 NPM 缓存
          4. 修复 NPM 全局包权限
        2. 🛠️ 可用工具
          1. 站点
          2. 页面
          3. 成分
          4. 内容管理系统
          5. 自定义代码
        3. 🗣️ 提示和资源
          1. 🚧 开发模式
            1. 📄 Webflow 开发者资源
            2. ⚠️ 已知限制

          Related Resources

          Related MCP Servers

          • mcp-twikit

            adhikasp
            -
            security
            A
            license
            -
            quality
            Interact with Twitter search and timeline
            Last updated -
            4
            41
            Python
            MIT License

          • Webflow MCP Server

            kapilduraphe
            A
            security
            A
            license
            A
            quality
            Enables Claude to interact with Webflow's APIs for managing sites, retrieving information, and executing tasks using natural language.
            Last updated -
            2
            4
            TypeScript
            MIT License
            • Apple
            • Linux

          • Confluence Communication Server

            KS-GEN-AI
            A
            security
            A
            license
            A
            quality
            Enables querying and retrieving content from Confluence through CQL searches and page content fetching, allowing Claude to seamlessly access information stored in Confluence workspaces.
            Last updated -
            2
            10
            JavaScript
            MIT License
            • Apple

          • Webflow MCP Server

            TimKJones
            -
            security
            A
            license
            -
            quality
            Enables Claude to interact with Webflow's APIs, allowing access to site information, collections, and other Webflow resources.
            Last updated -
            TypeScript
            MIT License
            • Apple

          View all related MCP servers

          Appeared in Searches

          New MCP Servers

          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