Webflow MCP Server

官方

與 Webflow API 互動，以列出和編輯您的網站及 CMS 資料。

文件

Webflow 的 MCP 伺服器

一個使用 Webflow JavaScript SDK 為 Webflow 實作模型上下文協定 (MCP) 的 Node.js 伺服器。讓 AI 代理能夠與 Webflow API 互動。在開發者文件中了解更多關於 Webflow Data API 的資訊。

先決條件

🚀 遠端安裝

透過安裝 Webflow 的遠端 MCP 伺服器開始使用。遠端伺服器使用 OAuth 與您的 Webflow 網站進行驗證，並搭配一個同步您即時畫布與 AI 代理的配套應用程式。

需求

Node.js 22.3.0 或更高版本

注意：MCP 伺服器目前支援 Node.js 22.3.0 或更高版本。如果您遇到版本問題，請參閱 Node.js 相容性指南。

Cursor

將 MCP 伺服器新增至 Cursor

前往 Settings → Cursor Settings → MCP & Integrations。
在 MCP 工具下，點擊 + New MCP Server。
將以下設定貼到 .cursor/mcp.json 中（或將 webflow 部分新增至您現有的設定）：

{
  "mcpServers": {
    "webflow": {
      "url": "https://mcp.webflow.com/sse"
    }
  }
}

提示：您可以建立一個專案層級的 mcp.json，以避免跨多個 Cursor 視窗重複出現驗證提示。請參閱 Cursor 關於設定位置的文件。

儲存並關閉檔案。Cursor 將自動開啟一個 OAuth 登入頁面，您可以在其中授權 Webflow 網站與 MCP 伺服器搭配使用。

開啟 Webflow Designer

在 Webflow Designer 中開啟您的網站，或詢問您的 AI 代理：

Give me a link to open <MY_SITE_NAME> in the Webflow Designer

開啟 MCP Webflow 應用程式

在 Designer 中，開啟應用程式面板（按下 E）。
啟動您已發布的「Webflow MCP Bridge App」。
等待應用程式連接到 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

Claude 桌面版

將 MCP 伺服器新增至 Claude 桌面版

啟用開發者模式：Help → Troubleshooting → Enable Developer Mode。
開啟開發者設定：File → Settings → Developer。
點擊 Get Started 或編輯設定以開啟 claude_desktop_config.json 並新增：

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

儲存並重新啟動 Claude 桌面版（Cmd/Ctrl + R）。將會開啟一個 OAuth 登入頁面以授權網站。

開啟 Webflow Designer

在 Webflow Designer 中開啟您的網站，或詢問您的 AI 代理：

Give me a link to open <MY_SITE_NAME> in the Webflow Designer

開啟 MCP Webflow 應用程式

在 Designer 中，開啟應用程式面板（按下 E）。
啟動您已發布的「Webflow MCP Bridge App」。
等待應用程式連接到 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 相容性

請參閱 Webflow 開發者文件中的 Node.js 相容性指南。

本機安裝

您也可以設定 MCP 伺服器在本機執行。這需要：

在具有管理員權限的 Webflow 工作區中建立並註冊您自己的 MCP Bridge App
設定您的 AI 客戶端以使用 Webflow API 權杖啟動本機 MCP 伺服器

1. 建立並發布 MCP Bridge App

在將本機 MCP 伺服器連接到您的 AI 客戶端之前，您必須在工作區中建立並發布 Webflow MCP Bridge App。

步驟

註冊一個 Webflow 應用程式
- 前往您的 Webflow 工作區並註冊一個新的應用程式。
- 遵循官方指南：註冊應用程式。
取得 MCP Bridge App 程式碼
- 選項 A：從發布頁面下載最新的 bundle.zip。
- 選項 B：複製儲存庫並建置它：
```
git clone https://github.com/virat21/webflow-mcp-bridge-app
cd webflow-mcp-bridge-app
```
  - 然後按照儲存庫說明建置專案。
發布 Designer 擴充功能
- 前往 Webflow 儀表板 → 工作區設定 → 應用程式與整合 → 開發 → 您的應用程式。
- 點擊 「發布擴充功能版本」。
- 上傳您建置好的 bundle.zip 檔案。
在 Designer 中開啟應用程式
- 發布後，在您工作區內的某個網站中，從 Designer → 應用程式面板 開啟 MCP Bridge App。

2. 設定您的 AI 客戶端

Cursor

新增至 .cursor/mcp.json：

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

Claude 桌面版

新增至 claude_desktop_config.json：

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

3. 搭配 Webflow Designer 使用 MCP 伺服器

在 Webflow Designer 中開啟您的網站。
開啟應用程式面板（按下 E）並啟動您已發布的「Webflow MCP Bridge App」。
等待應用程式連接到 MCP 伺服器，然後從您的 AI 客戶端使用工具。
如果 Bridge App 提示輸入本機連線 URL，請從您的 AI 客戶端呼叫 get_designer_app_connection_info 工具，並貼上返回的 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 相容性

請參閱 Webflow 開發者文件中的 Node.js 相容性指南。

❓ 疑難排解

如果您在 MCP 客戶端（例如 Cursor 或 Claude 桌面版）中啟動伺服器時遇到問題，請嘗試以下方法。

確保您擁有有效的 Webflow API 權杖

前往 Webflow 的 API Playground，登入並產生一個權杖，然後從請求產生器複製該權杖
將您 MCP 客戶端設定中的 YOUR_WEBFLOW_TOKEN 替換為您複製的權杖
儲存並重新啟動您的 MCP 客戶端

確保您已安裝 Node 和 NPM

Node.js
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 目錄以取得可用工具清單

🗣️ 提示與資源

此實作不包含 MCP 規範中的 prompts 或 resources。然而，當熱門 MCP 客戶端有更廣泛的支援時，這在未來可能會改變。

📄 Webflow 開發者資源

⚠️ 已知限制

靜態頁面內容更新

pages_update_static_content 端點目前僅支援對次要語言環境中的本地化靜態頁面進行更新。不支援對預設語言環境中的靜態內容進行更新，且會導致錯誤。