AI导哈

AI开发工具集成服务

Vercel AI SDK MCP Server Project是一个为AI开发环境（如Cursor）提供Vercel AI SDK核心功能集成的服务，支持生成对象、文本、UI组件等功能，并能与其他MCP服务器协同工作。

  • by chiziuwaga
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 chiziuwaga/vercel-ai-sdk-mcp-project

使用说明

Vercel AI SDK MCP服务器项目

该存储库包含一个模型上下文协议（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特定任务（如结构化生成）的服务器。
  3. AI结合每一步的上下文来实现最终目标。

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

先决条件

  • Node.js （建议使用v20或更高版本）
  • npm
  • 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
  2. 安装依赖关系：
    npm install
  3. 创建 .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
  4. 构建代码：
    npm run build
  5. 本地运行：
    npm run start
    服务器将使用stdio运行，等待连接。

光标集成（本地）

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

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

  2. 修改您的工作空间 .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"
      }
    }
  }
}

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

使用示例（途径2）

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

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

  3. 提示光标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"}"
      ]
    }
  }
}

  2. 确保 ${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).

相关 MCP