Labsco
chiziuwaga logo

Vercel AI SDK MCP Server Project

from chiziuwaga

An MCP server for the Vercel AI SDK, enabling integrations with Figma and 21st.dev Magic.

🔥🔥🔥✓ VerifiedAccount requiredNeeds API keys
#automation#devops#git#design

Vercel AI SDK MCP Server Project

smithery badge

This repository contains a Model Context Protocol (MCP) server designed to expose capabilities of the Vercel AI SDK Core to AI development environments like Cursor. It allows leveraging features like generateObject, generateText, streamText, and UI generation alongside other MCP servers (like mcp-figma and magic-mcp via Smithery).

Core Features

  • Vercel AI SDK Integration: Provides MCP tools wrapping core Vercel AI SDK functions (generate_object, generate_ui_component, etc.).
  • Tool Categorization: Implements a ToolManager with a set_tool_category meta-tool to manage the number of active tools exposed to Cursor, keeping within reasonable limits.
  • Figma/Magic MCP Placeholders: Includes placeholder connectors and tool registrations for mcp-figma and magic-mcp, intended for orchestration via Cursor AI (Pathway 2).
  • Smithery Deployment Ready: Configured with Dockerfile and smithery.yaml for easy deployment on Smithery.ai.
  • Cursor Integration: Designed to be used within Cursor via the .cursor/mcp.json configuration.

Architectural Approach (Pathway 2 Orchestration)

This server is primarily designed to be one component in a multi-MCP workflow orchestrated by the AI within Cursor (Pathway 2).

The intended workflow involves:

  1. Using prompts and Cursor Rules (.cursor/rules/) to guide the AI.
  2. Making sequential calls to different MCP servers:
    • mcp-figma (via Smithery) for design extraction.
    • magic-mcp (via Smithery) for inspiration/component building.
    • This vercel-ai-sdk-mcp server for Vercel AI SDK specific tasks (like structured generation).
  3. The AI combines context from each step to achieve the final goal.

While a composite tool (generate_enhanced_component_from_figma) demonstrating direct server-to-server interaction (Pathway 1) exists in the code (src/integrations/crossIntegration.ts), it requires implementing functional MCP clients within the connectors and is not the primary intended usage pattern for this setup.

Cursor Integration (Local)

To use the local server in Cursor:

  1. Ensure mcp-figma and magic-mcp are runnable via npx locally.

  2. Modify your workspace .cursor/mcp.json to run this server directly with 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. Make sure the ${API_KEY} variables are accessible in your environment where Cursor can read them.

Cursor Rules (.cursor/rules/)

Effective use of the Pathway 2 orchestration relies on creating guidance rules for the Cursor AI. You must create a .cursor/rules/ directory in your project root and add rule files (e.g., figma.cursorule, magic.cursorule, vercel.cursorule).

  • These files should contain natural language instructions on:
    • Which tools to use from each MCP server for specific tasks.
    • How to structure prompts for those tools.
    • How to pass context (data) between sequential tool calls.
    • Standard workflows (e.g., Figma -> Magic -> Vercel).

Refer to the Cursor Rules Documentation for syntax and examples.

Placeholders & Future Work

  • Implement Connectors: The src/integrations/figma/connector.ts and src/integrations/magicMcp/connector.ts contain placeholders. They need to be implemented with actual API calls (for Figma) and MCP client logic (potentially for Magic MCP, depending on its interface) to enable the integration tools.
  • Add More Tools: Implement the remaining Vercel AI SDK tools (text generation, streaming, chat, code gen, etc.) as outlined in the specs.
  • Error Handling: Enhance error handling, especially around missing API keys.
  • Testing: Add automated tests.