Vercel Ai Sdk MCP Project

🚀 Vercel 人工知能ソフトウェア開発キット (AI SDK) 統合ガイド

本ガイドでは、Vercel AI SDK を多段階のツールチェーンに統合し、Figma デザインツールや Magic の対話型 AI ツールと組み合わせて使用する方法を詳細に説明します。このドキュメントは、ローカル開発からクラウドデプロイまでの完全なプロセスをカバーしており、API キーの設定、エラー処理、自動化テストなどの内容が含まれています。

🚀 クイックスタート

このガイドでは、Vercel AI SDK を多段階のツールチェーンに統合し、Figma デザインツールや Magic の対話型 AI ツールと組み合わせて使用する方法を説明します。ローカル開発からクラウドデプロイまでの完全な流れをカバーしています。

📦 インストール

プロジェクトの初期化

1. ターミナルで以下のコマンドを実行し、新しい npm プロジェクトを作成します。

   npm init -y
   

2. 必要な依存関係をインストールします。

   npm install @vercel/ai openai figma magic-sdk
   

📚 ドキュメント

設定ファイル

.env ファイル

OPENAI_API_KEY=your_openai_api_key_here
ANTHROPIC_API_KEY=optional_anthropic_api_key
FIGMA_API_KEY=required_for_Figma_connector
TWENTY_FIRST_API_KEY=required_for_MagicMcpConnector

package.json のサンプル設定

{
  "name": "vercel-ai-sdk-integration",
  "version": "1.0.0",
  "main": "index.js",
  "license": "ISC",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "@vercel/ai": "^2.7.0",
    "openai": "^6.0.1",
    "figma": "^4.0.5",
    "magic-sdk": "^5.3.0"
  }
}

核心機能モジュール

index.js のサンプルコード

const { Configuration, OpenAIApi } = require("openai");
const figma = require('figma');
const magic = require('magic-sdk');

// OpenAI クライアントの初期化
const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

// Figma デザインの抽出関数
async function extractFigmaDesign fileId {
  // Figma からデザインデータを抽出するロジックを実装する
}

// Magic AI 対話ツール
async function magicAiInteraction prompt {
  const result = await magic.generatePrompt(prompt);
  return result;
}

// Vercel AI SDK テキスト生成器
async function generateText content {
  const completion = await openai.createCompletion({
    model: "gpt-3.5-turbo",
    prompt: content,
  });
  return completion.data.choices[0].text;
}

使用例 (Pathway 2)

1. すべての MCP サーバーが正常に動作していることを確認します（ローカルまたは Smithery を通じてデプロイ）。
2. .cursor/rules/ ディレクトリにルールファイルを作成します。例えば、figma.cursorule、magic.cursorule、vercel.cursorule などです。
3. 多段階のプロンプトを提供します。例えば、

   "まず mcp-figma の extract_figma_design ツールを使用します。次に magic-mcp のインスピレーションツールを呼び出します。最後に vercel-ai-sdk-mcp の generate_ui_component 機能をコンテキストと組み合わせて..."
   

デプロイガイド

Smithery プラットフォームへのデプロイ

1. プロジェクトコードを Git リポジトリにプッシュします。
2. Smithery にログインし、新しいビルドワークフローを作成します。
3. ワークフローに以下の手順を追加します。
   • 依存関係のインストール：npm install
   • プロジェクトのビルド：npm run build

環境変数の設定

Smithery ワークフローに環境変数を追加し、すべての必要な API キーが含まれていることを確認します。

将来的な改善計画

• エラー処理とリトライメカニズムの実装。
• ログ記録と監視機能の追加。
• より多くの Vercel AI SDK の高度な機能の統合。
• Docker コンテナ化デプロイのサポートの提供。

連絡先

フィードバックや技術的なサポートが必要な場合は、support@vercel.com までご連絡ください。

以上のドキュメントは、プロジェクトの初期化から最終的なデプロイまでの完全な流れをカバーしており、開発者が Vercel AI SDK をスムーズに統合して使用できるようになっています。