Webflow

Webflow の MCP サーバー

Webflow JavaScript SDK を使用して Webflow 向けの Model Context Protocol（MCP）を実装する Node.js サーバーです。AI エージェントが Webflow API を利用できるようになります。Webflow の Data API については、開発者向けドキュメントをご覧ください。

前提条件

• Node.js
• NPM
• Webflow アカウント

🚀 リモートインストール

Webflow のリモート MCP サーバーをインストールして、利用を開始しましょう。リモートサーバーでは OAuth を使って Webflow サイトを認証し、ライブキャンバスを AI エージェントと同期するコンパニオンアプリを使用します。

要件

• Node.js 22.3.0 以降

注：MCP サーバーは現在、Node.js 22.3.0 以降に対応しています。バージョンの問題が発生した場合は、Node.js の互換性に関するガイダンスをご覧ください。

Cursor

Cursor に MCP サーバーを追加する

1. Settings → Cursor Settings → MCP & Integrations に移動します。
2. MCP Tools の下にある + New MCP Server をクリックします。
3. 次の設定を .cursor/mcp.json に貼り付けます（または、既存の設定に webflow の項目を追加します）。

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

ヒント：複数の Cursor ウィンドウで認証を繰り返し求められないように、プロジェクト単位の mcp.json を作成できます。詳しくは Cursor の設定ファイルの場所に関するドキュメントをご覧ください。

4. ファイルを保存して閉じます。Cursor により OAuth ログインページが自動的に開き、MCP サーバーで使用する Webflow サイトを認証できます。

Webflow Designer を開く

• Webflow Designer でサイトを開くか、AI エージェントに次のように依頼します。

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

MCP Webflow App を開く

1. Designer で Apps パネルを開きます（E キーを押します）。
2. 公開済みの「Webflow MCP Bridge App」を起動します。
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

Claude desktop

Claude desktop に MCP サーバーを追加する

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"]
    }
  }
}

4. 保存して Claude Desktop を再起動します（Cmd/Ctrl + R）。サイトを認証するための OAuth ログインページが開きます。

Webflow Designer を開く

• Webflow Designer でサイトを開くか、AI エージェントに次のように依頼します。

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

MCP Webflow App を開く

1. Designer で Apps パネルを開きます（E キーを押します）。
2. 公開済みの「Webflow MCP Bridge App」を起動します。
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 の互換性

Webflow の開発者向けドキュメントにある Node.js の互換性に関するガイダンスをご覧ください。

---

ローカルインストール

MCP サーバーをローカルで実行するように設定することもできます。そのためには、次の作業が必要です。

• Admin 権限のある Webflow ワークスペースで、独自の MCP Bridge App を作成して登録する
• Webflow API トークンを使用してローカル MCP サーバーを起動するよう、AI クライアントを設定する

1. MCP Bridge App を作成して公開する

ローカル MCP サーバーを AI クライアントに接続する前に、ワークスペースで Webflow MCP Bridge App を作成して公開する必要があります。

手順

1. Webflow アプリを登録する

   • Webflow ワークスペースに移動し、新しいアプリを登録します。
   • 公式ガイドに従ってください：アプリを登録する。

2. MCP Bridge App のコードを取得する

   • オプション A：リリースページから最新の bundle.zip をダウンロードします。
   • オプション B：リポジトリをクローンしてビルドします：

     git clone https://github.com/virat21/webflow-mcp-bridge-app
     cd webflow-mcp-bridge-app
     

     • その後、リポジトリの手順に従ってプロジェクトをビルドします。

3. Designer Extension を公開する

   • Webflow Dashboard → Workspace settings → Apps & Integrations → Develop → Your App に移動します。
   • **「Publish Extension Version」**をクリックします。
   • ビルドした bundle.zip ファイルをアップロードします。

4. Designer でアプリを開く

   • 公開したら、ワークスペース内のサイトで Designer → Apps panel から 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 desktop

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 でサイトを開きます。
• Apps パネルを開き（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 Desktop などの MCP クライアントでサーバーを起動できない場合は、以下をお試しください。

有効な Webflow API トークンがあることを確認する

1. Webflow の API Playgroundに移動してログインし、トークンを生成してから、Request Generator からトークンをコピーします
2. MCP クライアントの設定で YOUR_WEBFLOW_TOKEN をコピーしたトークンに置き換えます
3. 保存して、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 開発者向けリソース

• Webflow API ドキュメント
• Webflow JavaScript SDK

⚠️ 既知の制限事項

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

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