Webflow MCP Server

一個基於Node.js的Webflow MCP服務器，通過Webflow JavaScript SDK實現模型上下文協議，使AI代理能夠與Webflow API交互。

開發者工具電子商務與零售 #Webflow集成 #AI交互 #數據API .TypeScript

評分 : 2分

下載量 : 23

更新時間 : 2025-04-28

什麼是Webflow MCP Server?

Webflow MCP Server是一個基於Node.js的中間件服務，它實現了Model Context Protocol (MCP)協議，讓AI助手(如Cursor、Claude等)能夠通過簡單的命令與Webflow平臺進行交互。它封裝了Webflow JavaScript SDK的複雜API調用，提供更友好的命令接口。

如何使用Webflow MCP Server?

使用非常簡單：獲取Webflow API令牌，配置到AI編輯器設置中，然後就可以通過自然語言命令管理Webflow站點內容。支持Cursor和Claude等主流AI編輯器。

適用場景

適合需要批量管理Webflow站點內容的場景，如內容編輯、CMS管理、站點發布等。特別適合非技術人員通過AI助手操作Webflow。

主要功能

站點管理列出站點、獲取站點詳情、發佈站點變更

頁面管理管理Webflow頁面，包括列出頁面、獲取/更新頁面內容和元數據

CMS管理完整的CMS內容管理功能，包括集合、字段和項目的CRUD操作

優勢與侷限性

優勢

簡化Webflow API使用，通過自然語言命令即可操作

支持主流AI編輯器集成

完整的Webflow功能覆蓋

開發者友好，易於擴展

侷限性

需要有效的Webflow API令牌

依賴Node.js環境

某些高級功能可能需要直接使用Webflow API

如何使用

獲取Webflow API令牌

登錄Webflow API Playground生成並複製API令牌

配置AI編輯器

在Cursor或Claude的設置中添加MCP服務器配置

重啟AI編輯器

保存配置後需要重啟AI編輯器使更改生效

使用案例

批量更新CMS內容通過AI助手批量更新Webflow CMS中的多個項目內容

快速發佈站點通過簡單命令發佈Webflow站點變更

常見問題

如何獲取Webflow API令牌?

為什麼服務器無法啟動?

支持哪些AI編輯器?

🚀 Webflow MCP 服務器

Webflow MCP 服務器是一個基於 Node.js 實現的項目，它採用 Webflow JavaScript SDK，實現了 Webflow 模型上下文協議 (MCP)。藉助該服務器，AI 代理能夠與 Webflow API 進行交互。若想了解更多信息，可訪問 Webflow 的開發者文檔。

🚀 快速開始

環境準備

操作系統：支持 Node.js 的任意操作系統（推薦使用 Linux 或 macOS）
Node.js：版本 14 或更高
npm：隨 Node.js 安裝的默認包管理器
Webflow 賬戶：必須擁有 Webflow 帳戶以獲取 API 訪問令牌

操作步驟

克隆倉庫並安裝依賴項：

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

配置 Webflow 令牌：
- 創建一個 .env 文件，添加以下內容並將 <YOUR_WEBFLOW_TOKEN> 替換為您的實際令牌：
```
# .env
WEBFLOW_TOKEN=<YOUR_WEBFLOW_TOKEN>
```
啟動開發服務器：
```
npm start
```

✨ 主要特性

基於 Node.js 實現，使用方便。
採用 Webflow JavaScript SDK，使 AI 代理能與 Webflow API 交互。
提供多種命令工具，方便進行站點管理和 CMS 管理。

📦 安裝指南

環境要求

操作系統：支持 Node.js 的任意操作系統（推薦 Linux 或 macOS）
Node.js：版本 14 或更高
npm：隨 Node.js 安裝的默認包管理器
Webflow 賬戶：用於獲取 API 訪問令牌

安裝步驟

克隆倉庫：git clone git@github.com:webflow/mcp-server.git
進入項目目錄：cd mcp-server
安裝依賴：npm install
配置令牌：創建 .env 文件，設置 WEBFLOW_TOKEN
啟動服務器：npm start

💻 使用示例

基礎用法

站點管理

sites - list;           # 列出所有站點
sites - get;            # 獲取站點詳細信息
sites - publish;        # 發佈站點更改

頁面管理

pages - list;           # 列出所有頁面
pages - get - metadata; # 獲取頁面元數據
pages - update - page - settings; # 更新頁面設置
pages - get - content;  # 獲取頁面內容
pages - update - static - content; # 更新靜態內容

CMS 管理

collections - list;         # 列出所有集合
collections - get;          # 獲取集合詳細信息
collections - create;       # 創建新集合
collection - fields - create - static; # 創建靜態字段
collection - fields - create - option; # 創建選項字段
collection - fields - create - reference; # 創建引用字段
collection - fields - update; # 更新自定義字段
collections - items - create - item - live; # 創建即時項
collections - items - update - items - live; # 更新即時項
collections - items - list - items; # 列出集合項
collections - items - create - item; # 創建新項（階段）
collections - items - update - items; # 更新項（階段）
collections - items - publish - items; # 發佈項

📚 詳細文檔

故障排除

常見問題

問題：無法獲取 Webflow API 訪問令牌
解決方案：確保您已登錄到 Webflow 並在開發者文檔中創建了項目，然後按照指南生成訪問令牌。
問題：服務器啟動失敗
解決方案：檢查 .env 文件是否存在於項目根目錄，並確保 WEBFLOW_TOKEN 值正確無誤。另外，確認所有依賴項均已安裝。

開發模式

如果您希望在開發模式下運行服務器，請按照以下步驟操作：

克隆倉庫並安裝依賴項：

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

配置 Webflow 令牌：
- 創建一個 .env 文件，添加以下內容並將 <YOUR_WEBFLOW_TOKEN> 替換為您的實際令牌：
```
# .env
WEBFLOW_TOKEN=<YOUR_WEBFLOW_TOKEN>
```
啟動開發服務器：
```
npm start
```