Vercel AI SDK MCP Server Project

Vercel AI SDK MCP サーバープロジェクト

このリポジトリには、Cursor などの AI 開発環境に Vercel AI SDK Core の機能を公開するために設計された Model Context Protocol（MCP）サーバーが含まれています。generateObject、generateText、streamText、UI 生成などの機能を、ほかの MCP サーバー（Smithery 経由の mcp-figma や magic-mcp など）と併用できます。

主な機能

• Vercel AI SDK との統合： Vercel AI SDK のコア関数（generate_object、generate_ui_component など）をラップする MCP ツールを提供します。
• ツールのカテゴリ分け： set_tool_category メタツールを備えた ToolManager を実装しており、Cursor に公開するアクティブなツールの数を管理し、適切な範囲内に抑えます。
• Figma/Magic MCP のプレースホルダー： mcp-figma と magic-mcp 用のプレースホルダーコネクターとツール登録を含みます。Cursor AI によるオーケストレーション（パスウェイ 2）を想定しています。
• Smithery へのデプロイに対応： Smithery.ai に簡単にデプロイできるよう、Dockerfile と smithery.yaml を設定済みです。
• Cursor との統合： .cursor/mcp.json の設定を使用して Cursor 内で利用するよう設計されています。

アーキテクチャのアプローチ（パスウェイ 2 のオーケストレーション）

このサーバーは主に、Cursor 内の AI がオーケストレーションする複数の MCP を使ったワークフロー（パスウェイ 2）の構成要素の 1 つとして設計されています。

想定されるワークフローは次のとおりです。

1. プロンプトと Cursor ルール（.cursor/rules/）を使用して AI をガイドします。
2. 異なる MCP サーバーを順番に呼び出します。
   • デザインの抽出には mcp-figma（Smithery 経由）を使用します。
   • アイデアの参考やコンポーネントの構築には magic-mcp（Smithery 経由）を使用します。
   • Vercel AI SDK 固有のタスク（構造化生成など）には、この vercel-ai-sdk-mcp サーバーを使用します。
3. AI が各ステップのコンテキストを組み合わせて、最終的な目標を達成します。

サーバー間の直接通信を示す複合ツール（generate_enhanced_component_from_figma）もコード（src/integrations/crossIntegration.ts）にありますが、コネクター内に機能する MCP クライアントを実装する必要があるため、このセットアップで主に想定されている使用パターンではありません。

前提条件

• Node.js（v20 以降を推奨）
• npm
• Git
• Cursor
• Smithery アカウント（デプロイ用）
• API キー：
  • OpenAI API キー（必須）
  • Figma API キー（Figma 統合を実装する場合に必要）
  • 21st Dev API キー（Magic MCP 統合を実装する場合に必要）

ローカル環境のセットアップ

1. リポジトリをクローンします：

   git clone https://github.com/chiziuwaga/vercel-ai-sdk-mcp-project.git
   cd vercel-ai-sdk-mcp-project
   

2. 依存関係をインストールします：

   npm install
   

3. .env ファイルを作成します： .env.example を .env にコピーし、API キーを入力します。

   OPENAI_API_KEY=sk-your-openai-key
   ANTHROPIC_API_KEY=sk-ant-your-anthropic-key # Optional
   FIGMA_API_KEY=your-figma-key              # For future implementation
   TWENTY_FIRST_API_KEY=your-21st-key        # For future implementation
   TRANSPORT_TYPE=stdio                      # Keep as stdio for local
   PORT=3000                                 # Only used if TRANSPORT_TYPE=sse
   

4. コードをビルドします：

   npm run build
   

5. ローカルで実行します：

   npm run start
   

   サーバーは stdio を使用して起動し、接続を待ち受けます。

Cursor との統合（ローカル）

Cursor でローカルサーバーを使用するには、次の手順を実行します。

1. mcp-figma と magic-mcp がローカルで npx 経由で実行できることを確認します。

2. ワークスペースの .cursor/mcp.json を変更し、Node でこのサーバーを直接実行します。

   {
     "mcpServers": {
       "magic-mcp": { ... }, // 既存の Smithery 設定を保持します
       "mcp-figma": { ... }, // 既存の Smithery 設定を保持します
       "vercel-ai-sdk-mcp": {
         "command": "node",
         "args": ["dist/index.js"], // ワークスペースのルートからの相対パス
         "env": { // ローカル実行用にキーを直接渡します
           "OPENAI_API_KEY": "${OPENAI_API_KEY}",
           "ANTHROPIC_API_KEY": "${ANTHROPIC_API_KEY}",
           "FIGMA_API_KEY": "${FIGMA_API_KEY}",
           "TWENTY_FIRST_API_KEY": "${TWENTY_FIRST_API_KEY}",
           "TRANSPORT_TYPE": "stdio"
         }
       }
     }
   }
   

3. Cursor が読み取れる環境で ${API_KEY} 変数を利用できることを確認します。

使用例（Pathway 2）

1. MCP サーバーが実行中であることを確認します（ローカルで実行するか、.cursor/mcp.json で Smithery 経由の設定を行います）。

2. Cursor Rules を作成します： .cursor/rules/ にルールファイルを追加して AI をガイドします（下のセクションを参照）。

3. Cursor AI にプロンプトを入力します： 前述のユーザーストーリーのような複数ステップのプロンプトを入力し、mcp-figma、magic-mcp、vercel-ai-sdk-mcp を順番に呼び出すよう AI に指示します。

   記述例：

   "まず、mcp-figma の extract_figma_design を使用します... 次に、magic-mcp の inspiration ツールを使用します... 最後に、統合したコンテキストを使用して vercel-ai-sdk-mcp の generate_ui_component を実行します..."
   

Cursor Rules（.cursor/rules/）

Pathway 2 のオーケストレーションを効果的に利用するには、Cursor AI 向けのガイダンスルールを作成する必要があります。プロジェクトのルートに .cursor/rules/ ディレクトリを必ず作成し、ルールファイル（例：figma.cursorule、magic.cursorule、vercel.cursorule）を追加してください。

• これらのファイルには、次の内容について自然言語で指示を記述します。
  • 特定のタスクで各 MCP サーバーのどのツールを使用するか。
  • それらのツール向けのプロンプトをどのように構成するか。
  • 順次実行するツール呼び出しの間でコンテキスト（データ）をどのように渡すか。
  • 標準的なワークフロー（例：Figma -> Magic -> Vercel）。

構文と例については、Cursor Rules のドキュメントを参照してください。

デプロイ（Smithery）

1. GitHub にプッシュします： Dockerfile と smithery.yaml を含む最新のコードが、GitHub の main ブランチにプッシュされていることを確認します。
2. Smithery.ai にアクセスします： ログインし、chiziuwaga/vercel-ai-sdk-mcp-project サーバーを見つけるか、追加します。
3. デプロイします： 「Deployments」タブに移動し、「Create Deployment」をクリックします。
4. 設定します： Smithery の指示に従い、必須の API キー（openaiApiKey など）を入力します。これらは安全に保存されます。
5. 起動します： デプロイプロセスを開始します。Smithery が Docker イメージをビルドし、コンテナーを実行します。

Cursor との統合（デプロイ済み）

Smithery でデプロイした後、次の手順を実行します。

1. .cursor/mcp.json を更新し、サーバーに Smithery CLI ランナーを使用します（現在の内容と一致している必要があります）。

   {
     "mcpServers": {
       "magic-mcp": { ... }, // 既存の Smithery 設定を保持します
       "mcp-figma": { ... }, // 既存の Smithery 設定を保持します
       "vercel-ai-sdk-mcp": {
         "command": "npx",
         "args": [
           "-y", "@smithery/cli@latest", "run",
           "chiziuwaga/vercel-ai-sdk-mcp-project",
           "--config",
           // これらの環境変数を Cursor で利用できるようにします
           "{"openaiApiKey":"${OPENAI_API_KEY}", "anthropicApiKey":"${ANTHROPIC_API_KEY}", "figmaApiKey":"${FIGMA_API_KEY}", "twentyFirstApiKey":"${TWENTY_FIRST_API_KEY}", "transportType":"stdio"}"
         ]
       }
     }
   }
   

2. --config JSON 文字列で参照されている ${API_KEY} 変数を、環境から Cursor が利用できることを確認します。

設定

すべての機能を利用するには、API キーが必要です。

• OPENAI_API_KEY：Vercel AI SDK のツールで必須です。Smithery のデプロイ設定で指定するか、ローカル実行時に .env に設定してください。
• ANTHROPIC_API_KEY：Anthropic のモデルを使用する場合は任意です。
• FIGMA_API_KEY：FigmaConnector を実装する場合にのみ必須です。
• TWENTY_FIRST_API_KEY：MagicMcpConnector を実装する場合にのみ必須です。

プレースホルダーと今後の作業

• コネクターを実装する： src/integrations/figma/connector.ts と src/integrations/magicMcp/connector.ts にはプレースホルダーが含まれています。統合ツールを有効にするには、実際の API 呼び出し（Figma の場合）と MCP クライアントのロジック（インターフェースによっては Magic MCP の場合）を実装する必要があります。
• ツールを追加する： 仕様に記載されている残りの Vercel AI SDK ツール（テキスト生成、ストリーミング、チャット、コード生成など）を実装します。
• エラー処理： 特に API キーが不足している場合のエラー処理を強化します。
• テスト： 自動テストを追加します。

ライセンス

package.json に記載されているとおり、ISC License です。