Vercel AI SDK MCP 服务器项目

此仓库包含一个模型上下文协议 (MCP) 服务器，旨在将 Vercel AI SDK Core 的功能暴露给 AI 开发环境，如 Cursor。它允许利用诸如 generateObject、generateText、streamText 和 UI 生成等功能，以及通过 Smithery 连接的其他 MCP 服务器（如 mcp-figma 和 magic-mcp）。

核心功能

• Vercel AI SDK 集成： 提供 MCP 工具，封装了核心 Vercel AI SDK 函数（generate_object、generate_ui_component 等）。
• 工具分类： 实现了一个 ToolManager，带有一个 set_tool_category 元工具，用于管理暴露给 Cursor 的活动工具数量，使其保持在合理的限制范围内。
• Figma/Magic MCP 占位符： 包含 mcp-figma 和 magic-mcp 的占位符连接器和工具注册，旨在通过 Cursor AI（路径 2）进行编排。
• Smithery 部署就绪： 配置了 Dockerfile 和 smithery.yaml，以便在 Smithery.ai 上轻松部署。
• Cursor 集成： 旨在通过 .cursor/mcp.json 配置在 Cursor 中使用。

架构方法（路径 2 编排）

此服务器主要设计为由 Cursor 内的 AI 编排的多 MCP 工作流程中的一个组件（路径 2）。

预期工作流程包括：

1. 使用提示和 Cursor 规则 (.cursor/rules/) 来指导 AI。
2. 顺序调用不同的 MCP 服务器：
   • mcp-figma（通过 Smithery）用于设计提取。
   • magic-mcp（通过 Smithery）用于灵感/组件构建。
   • 此 vercel-ai-sdk-mcp 服务器用于 Vercel AI SDK 的特定任务（如结构化生成）。
3. AI 结合每个步骤的上下文来实现最终目标。

虽然代码中存在一个演示直接服务器到服务器交互的复合工具 (generate_enhanced_component_from_figma)（路径 1）（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 # 可选
   FIGMA_API_KEY=your-figma-key              # 用于未来实现
   TWENTY_FIRST_API_KEY=your-21st-key        # 用于未来实现
   TRANSPORT_TYPE=stdio                      # 本地运行时保持为 stdio
   PORT=3000                                 # 仅当 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. 确保 ${API_KEY} 变量在 Cursor 可以读取的环境中可用。

使用示例（路径 2）

1. 确保 MCP 服务器正在运行（本地或通过 Smithery 在 .cursor/mcp.json 中配置）。

2. 创建 Cursor 规则： 在 .cursor/rules/ 中添加规则文件以指导 AI（请参阅下面的部分）。

3. 提示 Cursor AI： 提供一个多步骤提示，如先前描述的用户故事，指示 AI 顺序调用 mcp-figma、magic-mcp 和 vercel-ai-sdk-mcp 中的工具。

   示例代码片段：

   "首先，使用 mcp-figma 的 extract_figma_design... 然后使用 magic-mcp 的 inspiration 工具... 最后，使用 vercel-ai-sdk-mcp 的 generate_ui_component 并结合上下文..."
   

Cursor 规则 (.cursor/rules/)

有效使用路径 2 编排依赖于为 Cursor AI 创建指导规则。您必须在项目根目录中创建一个 .cursor/rules/ 目录并添加规则文件（例如，figma.cursorule、magic.cursorule、vercel.cursorule）。

• 这些文件应包含以下方面的自然语言指令：
  • 从每个 MCP 服务器中使用哪些工具来完成特定任务。
  • 如何为这些工具构建提示。
  • 如何在顺序工具调用之间传递上下文（数据）。
  • 标准工作流程（例如，Figma -> Magic -> Vercel）。

有关语法和示例，请参阅 Cursor 规则文档。

部署 (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 密钥时。
• 测试： 添加自动化测试。

许可证

ISC 许可证（如 package.json 中所示）。