Vercel AI SDK MCP Server

Vercel AI SDK MCP服务器项目

](https://smithery.ai/server/@chiziuwaga/vercel-ai-sdk-mcp-project)

该存储库包含一个模型上下文协议（MCP）服务器，旨在将Vercel AI SDK核心的功能暴露给Cursor等AI开发环境。它允许利用以下功能 generateObject, generateText, streamText，以及与其他MCP服务器一起生成UI（如 mcp-figma 和 magic-mcp 通过Smithery）。

核心功能

• Vercel AI SDK集成： 提供封装核心Vercel AI SDK功能的MCP工具(generate_object, generate_ui_component等等）。
• 工具分类： 实现a 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 配置。

架构方法（途径2编排）

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

预期的工作流程包括：

1. 使用提示和光标规则(.cursor/rules/)引导AI。
2. 对不同的MCP服务器进行顺序调用：

- mcp-figma （通过Smithery）进行设计提取。 - magic-mcp （通过Smithery）寻找灵感/组件构建。 - 这 vercel-ai-sdk-mcp Vercel AI SDK特定任务（如结构化生成）的服务器。

1. AI结合每一步的上下文来实现最终目标。

而复合工具(generate_enhanced_component_from_figma)证明代码中存在直接的服务器到服务器交互（途径1）(src/integrations/crossIntegration.ts)，它需要在连接器内实现功能MCP客户端，并且不是此设置的主要预期使用模式。

先决条件

• （建议使用v20或更高版本）
• Git
• 光标
• Smithery账户 （用于部署）
• API密钥：

- OpenAI API密钥（必需） - Figma API密钥（对于 *实施* Figma集成） - 21开发版API密钥（对于 *实施* 魔术MCP集成）

本地设置

1. 克隆存储库：

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

1. 安装依赖关系：

   npm install

1. 创建 .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

1. 构建代码：

   npm run build

1. 本地运行：

   npm run start

服务器将使用stdio运行，等待连接。

光标集成（本地）

要使用 *本地* Cursor中的服务器：

1. 确保 mcp-figma 和 magic-mcp 可通过以下方式运行 npx 当地。

1. 修改您的工作空间 .cursor/mcp.json 要直接使用Node运行此服务器，请执行以下操作：

   {
     "mcpServers": {
       "magic-mcp": { ... }, // Keep existing Smithery config
       "mcp-figma": { ... }, // Keep existing Smithery config
       "vercel-ai-sdk-mcp": {
         "command": "node",
         "args": ["dist/index.js"], // Path relative to workspace root
         "env": { // Pass keys directly for local run
           "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"
         }
       }
     }
   }

1. 确保 ${API_KEY} 变量在您的环境中是可访问的，Cursor可以读取它们。

使用示例（途径2）

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

1. 创建光标规则： 在中添加规则文件 .cursor/rules/ 指导人工智能（见下文）。

1. 提示光标AI： 给出一个多步骤的提示，如前面描述的用户故事，指示人工智能依次调用工具 mcp-figma, magic-mcp，以及 vercel-ai-sdk-mcp.

*示例片段：*

   "First, use mcp-figma's extract_figma_design... Then use magic-mcp's inspiration tool... Finally, use vercel-ai-sdk-mcp's generate_ui_component with the combined context..."

光标规则(.cursor/rules/)

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

• 这些文件应包含以下自然语言说明：

- 从每个MCP服务器使用哪些工具来执行特定任务。 - 如何为这些工具构建提示。 - 如何在连续的工具调用之间传递上下文（数据）。 - 标准工作流程（例如，Figma->Magic->Vercel）。

请参阅 光标规则文档 用于语法和示例。

部署（Smithery）

1. 推送到GitHub： 确保您的最新代码，包括 Dockerfile 和 smithery.yaml，被推到 main GitHub上的分支。
2. 前往Smithery.ai： 登录并查找/添加您的 chiziuwaga/vercel-ai-sdk-mcp-project 服务器。
3. 部署： 转到“部署”选项卡，然后单击“创建部署”。
4. 配置： 提供 必需的 API密钥(openaiApiKey等）。这些被安全地存储。
5. 启动： 启动部署过程。Smithery构建Docker镜像并运行容器。

游标集成（已部署）

一旦部署到Smithery：

1. 更新您的 .cursor/mcp.json 要为您的服务器使用Smithery CLI运行器（这应该与当前内容匹配）：

   {
     "mcpServers": {
       "magic-mcp": { ... }, // Keep existing Smithery config
       "mcp-figma": { ... }, // Keep existing Smithery config
       "vercel-ai-sdk-mcp": {
         "command": "npx",
         "args": [
           "-y", "@smithery/cli@latest", "run",
           "chiziuwaga/vercel-ai-sdk-mcp-project",
           "--config",
           // Ensure these env vars are available to Cursor
           "{"openaiApiKey":"${OPENAI_API_KEY}", "anthropicApiKey":"${ANTHROPIC_API_KEY}", "figmaApiKey":"${FIGMA_API_KEY}", "twentyFirstApiKey":"${TWENTY_FIRST_API_KEY}", "transportType":"stdio"}"
         ]
       }
     }
   }

1. 确保 ${API_KEY} 中引用的变量 --config JSON字符串可以从您的环境中访问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).