Vercel Ai Sdk MCP Project

🚀 Vercel 人工智能軟件開發工具包 (AI SDK) 集成指南

本指南詳細介紹瞭如何將 Vercel AI SDK 集成到多步驟工具鏈中，還能與 Figma 設計工具和 Magic 交互式 AI 工具結合使用。涵蓋從本地開發到雲部署的全流程，包括 API 密鑰配置、錯誤處理和自動化測試等內容。

🚀 快速開始

本指南將帶領你完成 Vercel AI SDK 的集成，從項目初始化到最終部署，確保你能順利使用該 SDK。

📦 安裝指南

項目初始化

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