Webflow MCP Server

🚀 Webflow MCP サーバー

このサーバーは Node.js で実装された Webflow モデルコンテキストプロトコル (MCP) サーバーで、Webflow JavaScript SDK を使用して、AIエージェントが Webflow API とやり取りできるようにします。詳細については、Webflow の 開発者ドキュメント を参照してください。

🚀 クイックスタート

前提条件

• オペレーティングシステム：Node.js をサポートする任意のオペレーティングシステム（Linux または macOS を推奨）
• Node.js：バージョン 14 以上
• npm：Node.js と一緒にインストールされるデフォルトのパッケージマネージャー
• Webflow アカウント：API アクセストークンを取得するために Webflow アカウントが必要です。

手順

1. リポジトリをクローンし、依存関係をインストールする：

   git clone git@github.com:webflow/mcp-server.git
   cd mcp-server
   npm install
   

2. Webflow トークンを設定する：

   • .env ファイルを作成し、以下の内容を追加し、<YOUR_WEBFLOW_TOKEN> を実際のトークンに置き換えます。

     # .env
     WEBFLOW_TOKEN=<YOUR_WEBFLOW_TOKEN>
     

3. 開発サーバーを起動する：

   npm start
   

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

一般的な問題と解決策

• 問題：Webflow API アクセストークンを取得できない
  解決策：Webflow にログインし、開発者ドキュメント でプロジェクトを作成し、ガイドに従ってアクセストークンを生成してください。

• 問題：サーバーが起動しない
  解決策：.env ファイルがプロジェクトのルートディレクトリに存在することを確認し、WEBFLOW_TOKEN の値が正しいことを確認してください。また、すべての依存関係がインストールされていることを確認してください。

💻 使用例

利用可能なツール

サイト管理

• サイト関連のコマンド：

  sites - list;           # すべてのサイトをリストする
  sites - get;            # サイトの詳細情報を取得する
  sites - publish;        # サイトの変更を公開する
  

• ページ関連のコマンド：

  pages - list;           # すべてのページをリストする
  pages - get - metadata; # ページのメタデータを取得する
  pages - update - page - settings; # ページの設定を更新する
  pages - get - content;  # ページの内容を取得する
  pages - update - static - content; # 静的コンテンツを更新する
  

CMS 管理

• コレクション関連のコマンド：

  collections - list;         # すべてのコレクションをリストする
  collections - get;          # コレクションの詳細情報を取得する
  collections - create;       # 新しいコレクションを作成する
  collection - fields - create - static; # 静的フィールドを作成する
  collection - fields - create - option; # オプションフィールドを作成する
  collection - fields - create - reference; # 参照フィールドを作成する
  collection - fields - update; # カスタムフィールドを更新する
  collections - items - create - item - live; # ライブアイテムを作成する
  collections - items - update - items - live; # ライブアイテムを更新する
  collections - items - list - items; # コレクションアイテムをリストする
  collections - items - create - item; # 新しいアイテム（段階）を作成する
  collections - items - update - items; # アイテム（段階）を更新する
  collections - items - publish - items; # アイテムを公開する
  

開発モード

開発モードでサーバーを実行する場合は、以下の手順に従ってください。

1. リポジトリをクローンし、依存関係をインストールする：

   git clone git@github.com:webflow/mcp-server.git
   cd mcp-server
   npm install
   

2. Webflow トークンを設定する：

   • .env ファイルを作成し、以下の内容を追加し、<YOUR_WEBFLOW_TOKEN> を実際のトークンに置き換えます。

     # .env
     WEBFLOW_TOKEN=<YOUR_WEBFLOW_TOKEN>
     

3. 開発サーバーを起動する：

   npm start
   

📚 ドキュメント

Webflow 開発リソース

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