Webflow MCP Server

公式

Webflow APIと連携して、サイトやCMSデータの一覧表示や編集を行います。

ドキュメント

Webflow の MCP サーバー

Webflow JavaScript SDK を使用して、Webflow 向けの Model Context Protocol (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 ログインページを開き、MCP サーバーで使用する Webflow サイトを承認できます。

Webflow デザイナーを開く

Webflow デザイナーでサイトを開くか、AI エージェントに依頼します。

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

MCP Webflow アプリを開く

デザイナーで、アプリパネルを開きます（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 デザイナーを開く

Webflow デザイナーでサイトを開くか、AI エージェントに依頼します。

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

MCP Webflow アプリを開く

デザイナーで、アプリパネルを開きます（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 を作成して登録する
Webflow API トークンを使用してローカル MCP サーバーを起動するように AI クライアントを設定する

1. MCP ブリッジアプリの作成と公開

ローカル 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
```
  - その後、リポジトリの指示に従ってプロジェクトをビルドします。
デザイナー拡張機能を公開する
- Webflow ダッシュボード → ワークスペース設定 → アプリと統合 → 開発 → あなたのアプリ に移動します。
- 「拡張機能バージョンを公開」 をクリックします。
- ビルドした bundle.zip ファイルをアップロードします。
デザイナーでアプリを開く
- 公開後、ワークスペース内のサイトで デザイナー → アプリパネル から 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 デザイナーで MCP サーバーを使用する

Webflow デザイナーでサイトを開きます。
アプリパネルを開き（E を押します）、公開済みの「Webflow MCP Bridge App」を起動します。
アプリが MCP サーバーに接続するまで待ち、AI クライアントからツールを使用します。
Bridge App がローカル接続 URL を要求する場合は、AI クライアントから get_designer_app_connection_info ツールを呼び出し、返された http://localhost:<port> URL を貼り付けます。

オプション: シェル経由でローカル実行

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 互換性ガイダンスをご覧ください。

❓ トラブルシューティング

Cursor や Claude デスクトップなどの MCP クライアントでサーバーの起動に問題がある場合は、以下をお試しください。

有効な 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 ドキュメントを参照してください。

注意: シェル設定を変更する場合は、変更を有効にするためにシェルを再起動する必要がある場合があります。

🛠️ 利用可能なツール

利用可能なツールの一覧については、./tools ディレクトリを参照してください。

🗣️ プロンプトとリソース

この実装には、MCP 仕様の prompts や resources は 含まれていません。ただし、一般的な MCP クライアントでのサポートが広がれば、将来的に変更される可能性があります。

📄 Webflow 開発者向けリソース

⚠️ 既知の制限事項

静的ページコンテンツの更新

pages_update_static_content エンドポイントは現在、セカンダリロケールのローカライズされた静的ページの更新のみをサポートしています。デフォルトロケールの静的コンテンツの更新はサポートされておらず、エラーが発生します。