Webflow MCPサーバー統合

「Webflow」MCPサーバーは何をするのか？

Webflow MCPサーバーは、ClaudeなどのAIアシスタントがWebflowのAPIと連携できるようにする統合レイヤーです。AIモデルをWebflowと接続することで、開発者やAI搭載ツールがWebflowサイトデータにプログラム的にアクセスし、クエリや操作を実行できます。主な機能は、Webflowサイトの詳細情報（サイト名、ID、ドメイン、ローカライズ設定など）の取得です。これにより、自動化されたサイト管理やデータ分析、AIプラットフォームからのコンテキストインタラクションが可能となり、チームがWebflowリソースを広範なツールチェーンや自動化パイプラインに統合しやすくなります。

プロンプト一覧

リポジトリにはプロンプトテンプレートの記載はありません。

リソース一覧

利用可能なドキュメントやコードベースに明示的なリソースはリストされていません。

ツール一覧

• get_sites

  • 認証済みユーザーがアクセスできるすべてのWebflowサイトの一覧を取得します。表示名、略称、サイトID・ワークスペースID、作成・更新日時、プレビューURL、タイムゾーン、カスタムドメイン、ローカライズ設定、データ収集設定などの詳細を返します。

• get_site

  • siteIdで指定した特定のWebflowサイトの詳細情報を取得します。get_sitesと同じセットの詳細情報を単一サイトに対して返します。

このMCPサーバーのユースケース

• Webflowサイト検出
  • 開発者やAIエージェントが、アカウントに紐づくすべてのWebflowサイトを素早く一覧でき、複数のウェブプロジェクト管理が容易になります。
• 自動サイト管理
  • 複数または単一のWebflowサイトについて、公開日時やカスタムドメイン、ロケールなどのメタデータを取得・監視し、管理業務を効率化できます。
• コンテキストAIインタラクション
  • AIアシスタントが詳細なサイト情報を取得し、ユーザーの質問への回答や、現在のサイト構成に基づく自動化フローへ活用できます。
• CI/CDパイプラインとの統合
  • サイト情報を自動デプロイ、公開、分析ワークフロー等の一部として活用できます。

セットアップ方法

Windsurf

リポジトリにWindsurf特有の手順は記載されていません。

Claude

1. 前提条件
   • Node.js（v16以上）をインストールしてください。
   • Claudeデスクトップアプリをインストールしてください。
   • Webflow APIトークンを取得してください。
2. 依存関係のインストール
   • npm install を実行
3. 環境変数の設定
   • .envファイルを作成し、以下を記述:

     WEBFLOW_API_TOKEN=your-api-token
     

4. Claudeデスクトップの設定
   • Claudeの設定ファイルを開きます:
     • MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json
     • Windows: %AppData%\Claude\claude_desktop_config.json
   • 以下を追加または更新:

     {
         "mcpServers": {
             "webflow": {
                 "command": "node",
                 "args": [
                     "/ABSOLUTE/PATH/TO/YOUR/build/index.js"
                 ],
                 "env": {
                     "WEBFLOW_API_TOKEN": "your-api-token"
                 }
             }
         }
     }
     

   • 保存してClaudeデスクトップを再起動してください。

APIキーの安全な管理（env例）:

{
    "mcpServers": {
        "webflow": {
            "command": "node",
            "args": [
                "/ABSOLUTE/PATH/TO/YOUR/build/index.js"
            ],
            "env": {
                "WEBFLOW_API_TOKEN": "your-api-token"
            }
        }
    }
}

Cursor

リポジトリにCursor特有の手順は記載されていません。

Cline

リポジトリにCline特有の手順は記載されていません。

Smithery経由のインストール

• 以下を実行:

  npx -y @smithery/cli install @kapilduraphe/webflow-mcp-server --client claude
  

フロー内でこのMCPを使う方法

FlowHuntでのMCPの利用

FlowHuntワークフローにMCPサーバーを統合するには、MCPコンポーネントをフローに追加し、AIエージェントに接続してください。

MCPコンポーネントをクリックして設定パネルを開きます。システムMCP設定欄に、以下のJSON形式でMCPサーバー情報を入力します。

{
  "webflow": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

設定が完了すると、AIエージェントはこのMCPをツールとして利用でき、すべての機能にアクセスできます。“webflow"は実際のMCPサーバー名に、URLはご自身のMCPサーバーのURLに置き換えてください。

概要

上記2つの表から、Webflow MCPサーバーはWebflow/AI統合向けに明確かつ有用なツールを提供していますが、プロンプトテンプレートやリソース定義、ルート/サンプリングの明示的サポートはありません。セットアップやドキュメントはClaudeに対しては充実していますが、他プラットフォームは未記載です。

MCPスコア