HelloWorld
登录
W

Webflow电商助手

使克劳德能够以自然语言与Webflow的API交互，以管理网站、检索信息和执行任务。

ecommerce-and-retail

563 查看 · 2026-07-07 更新

简介

使克劳德能够以自然语言与Webflow的API交互，以管理网站、检索信息和执行任务。

简介

使克劳德能够以自然语言与Webflow的API交互，以管理网站、检索信息和执行任务。

Webflow MCP 服务器

smithery 徽章

此 MCP 服务器使 Claude 能够与 Webflow 的 API 进行交互。

Webflow 服务器 MCP 服务器

前提条件

  • Node.js (v16 或更高版本)
  • Claude 桌面应用程序
  • Webflow 账户
  • Webflow API 令牌（站点令牌或 OAuth 访问令牌）

设置说明

1. 创建 Webflow API 令牌

  • 登录您的 Webflow 账户
  • 导航至 站点设置 > 应用程序和集成
  • 生成新的 API 令牌
  • 复制令牌值（您将无法再次查看它）

或者，您也可以生成一个 OAuth 访问令牌。

2. 初始项目设置

安装依赖项：

npm install

3. 配置环境变量

为本地开发创建一个 .env 文件（不要提交此文件）：

WEBFLOW_API_TOKEN=your-api-token

4. 配置 Claude 桌面应用程序

打开您的 Claude 桌面配置文件：

对于 MacOS：

code ~/Library/Application\ Support/Claude/claude_desktop_config.json

对于 Windows：

code %AppData%\Claude\claude_desktop_config.json

添加或更新配置：

{
    "mcpServers": {
        "webflow": {
            "command": "node",
            "args": [
                "/ABSOLUTE/PATH/TO/YOUR/build/index.js"
            ],
            "env": {
                "WEBFLOW_API_TOKEN": "your-api-token"
            }
        }
    }
}

保存文件并重新启动 Claude 桌面应用程序。

通过 Smithery 安装

要通过 Smithery 自动为 Claude 桌面安装 Webflow MCP 服务器：

npx -y @smithery/cli install @kapilduraphe/webflow-mcp-server --client claude

可用工具

该服务器目前提供以下工具：

get_sites

检索经过身份验证的用户可以访问的所有 Webflow 站点的列表。返回详细信息包括：

  • 站点显示名称和短名称
  • 站点 ID 和工作区 ID
  • 创建、最后更新和最后发布日期
  • 预览 URL
  • 时区设置
  • 自定义域名配置
  • 本地化设置（主要和次要语言环境）
  • 数据收集偏好

get_site

通过 ID 检索特定 Webflow 站点的详细信息。需要一个 siteId 参数，并返回与 get_sites 相同的单个站点的详细信息。

类型定义

interface WebflowApiError {
    status?: number;
    message: string;
    code?: string;
}

interface WebflowCustomDomain {
    id: string;
    url: string;
    lastPublished: string;
}

interface WebflowLocale {
    id: string;
    cmsLocaleId: string;
    enabled: boolean;
    displayName: string;
    redirect: boolean;
    subdirectory: string;
    tag: string;
}

interface WebflowSite {
    id: string;
    workspaceId: string;
    createdOn: string;
    displayName: string;
    shortName: string;
    lastPublished: string;
    lastUpdated: string;
    previewUrl: string;
    timeZone: string;
    parentFolderId?: string;
    customDomains: WebflowCustomDomain[];
    locales: {
        primary: WebflowLocale;
        secondary: WebflowLocale[];
    };
    dataCollectionEnabled: boolean;
    dataCollectionType: string;
}

错误处理

该服务器处理各种错误场景：

环境错误

  • 缺少 WEBFLOW_API_TOKEN
  • 无效的 API 令牌

故障排除

常见问题

工具未在 Claude 中出现

  • 检查 Claude 桌面日志
  • 确认 WEBFLOW_API_TOKEN 设置正确
  • 确保到 index.js 的路径是绝对路径且正确

身份验证错误

  • 确认您的 API 令牌有效
  • 检查令牌是否具有必要的权限
  • 确保令牌未过期

查看日志

要查看服务器日志：

对于 MacOS/Linux：

tail -n 20 -f ~/Library/Logs/Claude/mcp*.log

对于 Windows：

Get-Content -Path "$env:AppData\Claude\Logs\mcp*.log" -Wait -Tail 20

环境变量

如果您遇到环境变量错误，请确认：

  • WEBFLOW_API_TOKEN：应为有效的 API 令牌

安全注意事项

  • 请妥善保管您的 API 令牌
  • 不要将凭证提交到版本控制系统
  • 使用环境变量存储敏感数据
  • 定期更换 API 令牌
  • 监控 Webflow 中的 API 使用情况
  • 为 API 令牌使用最小必需权限

支持

如果您遇到任何问题：

  • 查看上面的故障排除部分
  • 检查 Claude Desktop 日志
  • 检查服务器的错误输出
  • 查看 Webflow 的 API 文档

许可证

MIT 许可证 - 详情请参阅 LICENSE 文件。

工具列表

  • get_site: Retrieve detailed information about a specific Webflow site by ID, including workspace, creation date, display name, and publishing details

  • get_sites: Retrieve a list of all Webflow sites accessible to the authenticated user

服务配置

[{'mcpServers': {'webflow': {'args': ['/ABSOLUTE/PATH/TO/YOUR/build/index.js'], 'command': 'node', 'env': {'WEBFLOW_API_TOKEN': 'your-api-token'}}}}]

来源