【MCP】Webflow × Claude Desktop 連携ガイド | AI でデータを徹底活用

加藤龍彦
加藤龍彦
デジタルマーケティング
CData Webflow MCP Server をインストールして、Webflow のデータをAI モデルのClaude から分析する方法を解説します。使い慣れた業務システムのデータをAI で簡単に活用できます。



Model Context Protocol（MCP）は、LLM（大規模言語モデル）を外部サービスやデータソースにつなぐためのオープンスタンダードです。MCP Serverを使えば、Claude をはじめとするAI クライアントはJira チケットの作成、 Slack への投稿、GitHub ブランチへのコミットなど、各種SaaS に固有なさまざまなアクションを実行できます。この記事でも紹介するとおり、業務システムのデータにアクセスすることでかなり高度なデータ分析でもAI に「お願い」するだけで完了できます。

本記事では、CData Webflow MCP Server のインストール手順、 Webflow への接続設定、さらにClaude Desktop 上でデータについて質問する方法までを、ステップバイステップで解説します。ぜひ皆さんのAI 活用にお役立てください。

事前準備

本記事の手順を実行するには、以下の準備が必要となります。
  1. Claude アカウントの取得
  2. Claude Desktop のインストール

ステップ1：CData MCP Server のダウンロードとインストール

  1. まずはCData のMCP ページ にアクセスして、CData Webflow MCP Server をダウンロードします。
  2. ダウンロードしたインストーラーをダブルクリックして実行します。
  3. 画面の指示に従ってインストールを完了させます。

インストールが完了したら、Webflow への接続設定を行います。

ステップ2：Webflow への接続を設定

  1. インストールが完了すると、CData MCP Server 設定ウィザードが自動的に起動します。

    ウィザードが自動起動しない場合は、Windows の検索バーで「CData MCP Server」を検索して、 アプリをダブルクリックしてください。

  2. 「MCP Configuration」の「Configuration Name」ドロップダウンから 「new configuration...」を選択します。
  3. 構成名を入力（cdatawebflow など）し、「OK」をクリックします。

    この名前はMCP Server名、およびサーバーが提供するツールの プレフィックスとして使用されます。

  4. それでは、Webflow との接続を設定していきましょう。

    5. 認証

    Webflow は、サイト、CMS コレクション、e コマースデータ、その他のリソースへの安全なアクセスを確保するために、OAuth 2.0 認証を使用します。この認証方式により、Webflow ワークスペースに安全に接続し、適切な認可のもとでリソースを管理できます。

    OAuth 2.0 のセットアップと設定

    ステップ 1：Webflow OAuth アプリケーションの作成

    OAuth 認証をセットアップするには、以下のステップで進めます：

    1. Webflow Developer Portal にアクセスします
    2. Webflow アカウントの「Apps & Integrations」に移動します
    3. 「Register an App」をクリックして新しい OAuth アプリケーションを作成します
    4. アプリケーション名、説明、リダイレクト URI（CallbackURL）を設定します
    5. 接続で使用する Client ID と Client Secret をコピーします

    必須の接続プロパティ

    • AuthScheme：OAuth に設定します（必須）
    • OAuthClientId：Webflow OAuth アプリケーションの Client ID（必須）
    • OAuthClientSecret：Webflow OAuth アプリケーションの Client Secret（必須）
    • CallbackURL：OAuth アプリケーションで指定したリダイレクト URI（必須）
    • InitiateOAuth：トークンを自動管理するには GETANDREFRESH に設定します（推奨）

    必須の OAuth スコープ

    Webflow API プロファイルでは、以下の OAuth スコープが必要です：

    • sites:read - サイト情報および設定への読み取りアクセス
    • pages:read - サイトページへの読み取りアクセス
    • cms:read - CMS コレクションおよびアイテムへの読み取りアクセス
    • forms:read - フォームおよびフォーム送信への読み取りアクセス
    • assets:read - メディアアセットおよびフォルダーへの読み取りアクセス
    • ecommerce:read - 製品、注文、在庫への読み取りアクセス
    • authorized_user:read - 認可されたユーザーへの読み取りアクセス

  6. 最後に「Save Configuration」をクリックして構成を保存します。

    構成内容は別ファイルとして保存され、Claude Desktop の設定ファイル（claude_desktop_config.json）も更新されます。そのため、 Claude Desktop 起動時にCData MCP Server も自動で起動します。

CData MCP Server の設定が完了したら、Claude からWebflow のデータについて質問できるようになります。

ステップ3：Webflow のデータについてAI に聞いてみる

CData MCP Server をインストールし、接続設定が終わったら、Claude Desktop からWebflow データを分析・操作できます。

  1. Claude Desktop を起動します。MCP Serverの起動には少し時間がかかる場合がありますが、 起動後はClaude のインターフェースに利用可能なツールが表示されます（プロンプトバーの下の設定アイコンを確認してください）。

  2. あとは、Claude にWebflow 内のデータについて自由に質問できます！Webflow 内のデータについて知りたいことをなんでも聞いてみましょう。

    CData MCP Server が提供するテーブル形式とデータベースツールにより、LLM は容易にデータの探索と分析を実施できます。

AI を業務データにつなげて、業務を圧倒的に効率化！

このように、CData MCP Servers を使えばノーコードで簡単にLLM をWebflow と連携してデータを活用できます。

さらに、CData が提供する20種類以上のSaaS / DB / DWH 向けMCP Server と組み合わせれば、複数の業務システムのデータをAI に連携することもできます。

まずはMCP Server を無料でダウンロードしてお試しください。

FAQ

  •   MCP は安全ですか？
  •   CData MCP Servers のベータ版にはどのような制限がありますか？
  •   利用に関してどんなサポートがありますか？
  •   このバージョンはいつまで無料ですか？
  •   CDataのMCP Servers は他のMCP Server とどう違いますか？
  •   CData MCP はどのAI プラットフォームでも使用できますか？
  •   CData MCP Servers のオープンソース版はありますか？

はじめる準備はできましたか？

API Driver で Webflow のライブデータに接続

Webflow に接続

この記事の内容

関連記事