Webflow

🚀 Webflow MCP サーバ

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

🚀 クイックスタート

ℹ️ 前提条件

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

手順

1. Webflow API トークンの取得 あなたは Webflow プランが必要で、Webflow ダッシュボード で API トークンを生成する必要があります。

2. AI エディタへの設定追加 以下の内容をプロジェクトのルートディレクトリに config.json という名前で保存してください。

   {
     "token": "<YOUR_WEBFLOW_TOKEN>",
     "projectId": "<YOUR_PROJECT_ID>"
   }
   

3. Cursor での使用方法 Cursor の MCP 設定に以下の内容を追加してください。

   const webflow = require('@webflow/mcp-server');
   
   module.exports = {
     providers: [
       webflow({
         token: process.env.WEBFLOW_TOKEN,
         projectId: process.env.WEBFLOW_PROJECT_ID
       })
     ]
   };
   

4. Claude Desktop での使用方法 mcp-config.json ファイルに以下の内容を追加してください。

   {
     "providers": [
       {
         "name": "webflow",
         "config": {
           "token": "<YOUR_WEBFLOW_TOKEN>",
           "projectId": "<YOUR_PROJECT_ID>"
         }
       }
     ]
   }
   

✨ 開発モード

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

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

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

2. プロジェクトのルートディレクトリに .env ファイルを作成し、Webflow トークンを追加します。

   # .env
   WEBFLOW_TOKEN=<YOUR_WEBFLOW_TOKEN>
   

3. 開発サーバを起動します。

   npm start
   

📚 ドキュメント

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