Claude で使う Webflow MCP｜Designer と CMS を会話で編集

Webflow MCP Server とは — 公式リリースされた AI 連携窓口

Webflow MCP Server は、Webflow が GitHub 上で公開している公式の MCP(Model Context Protocol)実装で、Claude Desktop・Claude Code・Cursor・Windsurf などの MCP クライアントから Webflow API を呼び出すための橋渡しを行います。リポジトリは webflow/mcp-server で、MIT ライセンス、最新版は 1.0.0(2025 年 9 月リリース)です。

内部的には Webflow の Data API および JavaScript SDK 経由の Designer API をラップしており、AI 側から見ると「Webflow のサイト構造・CMS・アセットに対する関数呼び出し」として一貫したインターフェースで扱えます。これによって、Claude にプロンプトを投げるだけで「公開済みブログから関連記事を分析し、新しい記事の下書きと内部リンクを追加する」といった複合作業が可能になります。

Designer API と Data API でできることの違い

Webflow MCP のツールは大きく 2 系統に分かれます。両者の役割を理解しておくと、どこまでが Claude から触れるのか迷いません。

• Designer API 系: Webflow Designer のキャンバスをリアルタイムに操作。エレメントの追加・変更、スタイルの一括変更、レスポンシブ設定、コンポーネントや CSS 変数の制御。
• Data API 系: CMS Item の作成・読み取り・更新・削除、アセットのアップロードと整理、ページの SEO 設定やメタデータ編集。Webflow Designer を開いていなくても動作。

Designer API は「サイト構造そのものを AI に組み立てさせたいケース」、Data API は「公開されたコンテンツの運用作業を効率化したいケース」と整理すると、どちらに比重を置くべきか判断しやすくなります(出典: Webflow Developers Docs — AI Tools)。

Claude Desktop での設定手順

Claude Desktop は 2026 年現在、画面上の 「+」アイコン → Add connectors から Webflow を選ぶだけで接続できます。OAuth が走るので、Webflow のサイト所有者または管理者でログインし、対象ワークスペース・サイトを選択して認可するだけで完了です。

手動で設定ファイルを書きたい場合は、claude_desktop_config.json の mcpServers に以下を追加します。

1. Claude Desktop を一度終了する。
2. claude_desktop_config.json を開き、次の設定を追記する。
3. ファイルを保存し、Claude Desktop を再起動する。
4. チャット入力欄の MCP アイコンに「webflow」が表示されることを確認する。

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

Node.js 22.3.0 以上が必要なので、node -v で事前に確認しておきます。

Claude Code から接続する場合

Claude Code(CLI 版)では、claude mcp add コマンドで同じ Remote MCP エンドポイントを登録できます。プロジェクトルートで以下を実行すると、当該ディレクトリでのセッションに限定して Webflow MCP が有効になります。

claude mcp add webflow npx mcp-remote https://mcp.webflow.com/sse

Claude Code から呼ぶと、CMS Item の生成・公開、サイトメタデータの更新といった「コード生成と並行して走らせたい運用作業」をターミナル内で完結できます。Next.js や Astro でヘッドレスに Webflow CMS を消費しているプロジェクトでは、フロント実装の合間に Claude へ「この記事の OG 画像とディスクリプションを差し替えて公開して」と指示できる体験になります。

OAuth 認証とトークン管理

Webflow MCP の標準接続方式は OAuth で、API トークンをローカルにベタ書きする必要がありません。アクセストークンは Claude Desktop / Claude Code が ~/.mcp-auth/ 配下にキャッシュし、有効期限切れの際は自動でリフレッシュされます。

権限の付け替えや別アカウントへの切り替えでうまく行かないときは、キャッシュを削除して再認証するのが最短です。

rm -rf ~/.mcp-auth

社内運用ルールとして API トークンを使いたい場合のみ、ローカル方式(webflow-mcp-server を NPX で起動 + WEBFLOW_TOKEN を環境変数で渡す)が選択肢になります。漏洩リスクを抑えるため、原則は OAuth + リモート方式を推奨します。

Designer API を使うには Bridge App が必要

Designer API 系ツール(キャンバスの要素編集・スタイル変更など)は、Webflow Designer 内で MCP Bridge App を起動し続けている間だけ動作します。Designer の左サイドバーから「Apps」→「Webflow MCP Bridge App」を Launch し、対象サイトを開いたままにしておくのがルールです。

Data API 系ツールはこの制約を受けず、Designer を閉じていても CMS Item の追加や記事公開ができます。Bridge App を立ち上げていない状態で Claude に Designer 操作を頼むと、ツールが空振りしたまま「接続情報を取得できない」というエラーで返ってきます。最初の数回はここでつまづきがちなので、Designer API を呼ぶ作業の前に Bridge App の状態を確認する癖をつけておくと安全です。

実務での使い方 — ブログ運用・CMS 一括編集・SEO 設定

Webflow MCP を導入してすぐ価値が出るのは、次の 3 系統です。

1. ブログ運用: 既存記事から関連トピックを抽出して下書きを生成し、CMS Item として直接登録。タグ・カテゴリ・OG 画像までまとめて Claude に書かせる。
2. CMS 一括編集: 数十件単位のステータス変更、価格表更新、終了したキャンペーンの非公開化など、Webflow UI のループ作業を 1 プロンプトで終わらせる。
3. SEO メタデータ補正: ページごとの title / description / OG 画像 / canonical を Claude に点検させ、不足分のみ Data API で書き戻す。

特に CMS の一括編集は、Webflow の管理画面で 1 件ずつ開く時間が一気に消えるため、運用工数の体感差が大きい領域です。

うまく動かないときのチェックポイント

接続できない・ツールが見えない・編集が反映されないなどのトラブル時は、次の順で切り分けます。

1. Node.js のバージョンが 22.3.0 以上か確認(node -v)。
2. Claude Desktop / Code を完全に終了し、~/.mcp-auth/ を削除して再認証。
3. 対象サイトの権限が「サイト所有者または管理者」か確認(閲覧権限のみでは認可不可)。
4. Designer API を呼びたい場合、Webflow Designer 内で MCP Bridge App が Launch されているか確認。
5. ローカライズしたコンテンツの新規作成は不可(更新のみ対応)という仕様制限に当たっていないか確認。

特に 3 と 5 は「設定は正しいのにツールが空振りする」典型ケースで、エラーメッセージだけでは原因が見えにくい部分です。

料金・プランと利用条件

Webflow MCP Server 自体は MIT ライセンスで無償公開されています。利用料金が発生するのは Webflow 側のプランで、Data API / Designer API 双方とも有料プランのワークスペースで利用するのが基本です(無料ワークスペースでは API レート制限と公開可否で制約があります)。

Claude 側は、Web 版・Desktop・Code いずれの環境でも Remote MCP に接続できる Pro 以上のプランがあれば追加課金なく利用できます。MCP 自体は API トークン課金ではなく、Webflow の通常 API レート制限内で動く点も覚えておくとコスト試算がしやすくなります。

公式情報の更新は早いので、本記事の手順や仕様は半年に一度は Webflow Developers Docs と webflow/mcp-server のリリースノートで再確認することを推奨します。