🚀 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