AI导哈

Webflow MCP服务器

一个基于Node.js的服务器，实现Webflow的模型上下文协议（MCP），使AI代理能够与Webflow API交互。

  • by webflow
  • TypeScript
  • 混合部署
  • 140 星标
  • 更新于
在 GitHub 查看 webflow/mcp-server

使用说明

Webflow的MCP服务器

一个Node.js服务器，使用 Webflow JavaScript SDK。使AI代理能够与Webflow API交互。在中了解有关Webflow的Data API的更多信息 开发者文档.

先决条件

🚀 远程安装

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

需求

  • Node.js 22.3.0或更高版本

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

光标

将MCP服务器添加到游标

  1. 首选 Settings → Cursor Settings → MCP & Integrations.
  2. 在“MCP工具”下，单击 + New MCP Server.
  3. 将以下配置粘贴到 .cursor/mcp.json （或添加 webflow 部分到您现有的配置）：
{
  "mcpServers": {
    "webflow": {
      "url": "https://mcp.webflow.com/sse"
    }
  }
}

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

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

打开Webflow设计器

  • 在Webflow Designer中打开您的网站，或询问您的AI代理：
Give me a link to open <MY_SITE_NAME> in the Webflow Designer

打开MCP Webflow应用程序

  1. 在设计器中，打开“应用程序”面板（按 E).
  2. 启动您发布的“Webflow MCP Bridge应用程序”。
  3. 等待应用程序连接到MCP服务器。

写下你的第一个提示

在你的AI聊天中试试这些：

Analyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords

Find older blog posts that mention similar topics and add internal links to my latest post

Create a hero section card on my home page with a CTA button and responsive design

克劳德桌面

将MCP服务器添加到Claude桌面

  1. 启用开发人员模式： Help → Troubleshooting → Enable Developer Mode.
  2. 打开开发人员设置： File → Settings → Developer.
  3. 点击 Get Started 或编辑配置以打开 claude_desktop_config.json 并添加：
{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["mcp-remote", "https://mcp.webflow.com/sse"]
    }
  }
}
  1. 保存并重新启动Claude Desktop(Cmd/Ctrl + R).将打开一个OAuth登录页面来授权网站。

打开Webflow设计器

  • 在Webflow Designer中打开您的网站，或询问您的AI代理：
Give me a link to open <MY_SITE_NAME> in the Webflow Designer

打开MCP Webflow应用程序

  1. 在设计器中，打开“应用程序”面板（按 E).
  2. 启动您发布的“Webflow MCP Bridge应用程序”。
  3. 等待应用程序连接到MCP服务器。

写下你的第一个提示

Analyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords

Find older blog posts that mention similar topics and add internal links to my latest post

Create a hero section card on my home page with a CTA button and responsive design

重置您的OAuth令牌

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

rm -rf ~/.mcp-auth

Node.js兼容性

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

本地安装

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

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

1.创建并发布MCP网桥应用程序

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

步骤

  1. 注册Webflow应用程序

    • 转到您的Webflow工作区并注册新应用程序。
    • 遵循官方指南： 注册应用程序.

  2. 获取MCP网桥应用程序代码

    • 选项A：下载最新版本 bundle.zip 从 发布页面.
    • 选项B：克隆存储库并构建它：
      git clone https://github.com/virat21/webflow-mcp-bridge-app
cd webflow-mcp-bridge-app
      • 然后按照存储库说明构建项目。

  3. 发布设计器扩展

    • 首选 Webflow仪表板→ 工作区设置→ 应用程序和集成→ 开发→ 您的应用程序.
    • 点击 “发布扩展版本”.
    • 上传您的构建 bundle.zip 文件。

  4. 在Designer中打开应用程序

    • 发布后，从打开MCP Bridge应用程序 设计师→ 应用程序面板 在您工作空间内的网站中。

2.配置您的AI客户端

光标

增添 .cursor/mcp.json:

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

克劳德桌面

增添 claude_desktop_config.json:

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

3.将MCP服务器与Webflow Designer一起使用

  • 在Webflow设计器中打开您的网站。
  • 打开“应用程序”面板（按 E)并启动您发布的“Webflow MCP Bridge应用程序”。
  • 等待应用程序连接到MCP服务器，然后使用AI客户端的工具。
  • 如果Bridge App提示输入本地连接URL，请调用 get_designer_app_connection_info 从您的AI客户端粘贴返回的工具 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兼容性

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

❓ 故障排除

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

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

  1. 首选 Webflow的API游乐场，登录并生成令牌，然后从请求生成器复制令牌
  2. 替换 YOUR_WEBFLOW_TOKEN 在MCP客户端配置中使用您复制的令牌
  3. 保存和 重新启动 您的MCP客户端

确保已安装节点和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 可用工具列表的目录

🗣️ 提示和资源

这个实现 does not 的常用口语形式 包含 prompts 或 resources 根据MCP规范。然而，当流行的MCP客户端提供更广泛的支持时，这种情况可能会在未来发生变化。

📄 Webflow开发人员资源

⚠️ 已知限制

静态页面内容更新

这 pages_update_static_content 端点目前仅支持对辅助语言环境中的本地化静态页面进行更新。不支持对默认区域设置中的静态内容进行更新，这将导致错误。

相关 MCP