Vercel AI SDK MCP Server Project

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

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 likegenerateObject,generateText,streamText, and UI generation alongside other MCP servers (likemcp-figmaandmagic-mcpvia Smithery).

- Vercel AI SDK Integration:Provides MCP tools wrapping core Vercel AI SDK functions (generate_object,generate_ui_component, etc.).
- Tool Categorization:Implements aToolManagerwith aset_tool_categorymeta-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 formcp-figmaandmagic-mcp, intended for orchestration via Cursor AI (Pathway 2).
- Smithery Deployment Ready:Configured withDockerfileandsmithery.yamlfor easy deployment onSmithery.ai.
- Cursor Integration:Designed to be used within Cursor via the.cursor/mcp.jsonconfiguration.

- Node.js(v20 or later recommended)
- npm
- Git
- Cursor
- Smithery Account(for deployment)
- API Keys:

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

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

{ "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" } } } }

Make sure the${API_KEY}variables are accessible in your environment where Cursor can read them.
-

Ensure MCP Servers are running(locally or configured via Smithery in.cursor/mcp.json).

Create Cursor Rules:Add rule files in.cursor/rules/to guide the AI (see section below).

Prompt Cursor AI:Give a multi-step prompt like the User Story described previously, instructing the AI to call tools sequentially acrossmcp-figma,magic-mcp, andvercel-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..."

Effective use of the Pathway 2 orchestration relies on creating guidance rules for the Cursor AI. Youmustcreate 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 theCursor Rules Documentationfor syntax and examples.
- Push to GitHub:Ensure your latest code, includingDockerfileandsmithery.yaml, is pushed to themainbranch on GitHub.
- Go to Smithery.ai:Log in and find/add yourchiziuwaga/vercel-ai-sdk-mcp-projectserver.
- Deploy:Go to the "Deployments" tab and click "Create Deployment".
- Configure:Provide therequiredAPI keys (openaiApiKey, etc.) when prompted by Smithery. These are stored securely.
- Launch:Start the deployment process. Smithery builds the Docker image and runs the container.
-

{ "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"}" ] } } }

Ensure the${API_KEY}variables referenced in the--configJSON string are accessible to Cursor from your environment.

API Keys are required for full functionality:

- OPENAI_API_KEY:Requiredfor Vercel AI SDK tools. Provide during Smithery deployment config or in.envfor local runs.
- ANTHROPIC_API_KEY: Optional, for Anthropic models.
- FIGMA_API_KEY: RequiredonlywhenFigmaConnectoris implemented.
- TWENTY_FIRST_API_KEY: RequiredonlywhenMagicMcpConnectoris implemented.

- Implement Connectors:Thesrc/integrations/figma/connector.tsandsrc/integrations/magicMcp/connector.tscontainplaceholders. 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.

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

Enables AI assistants to interact with and automate Figma designs programmatically.

Turn UI designs into responsive applications with Visily MCP

Bring agent evaluations, observability, and synthetic test set generation directly into your IDE for free with Galileo's new MCP server

An MCP server to help AI assistants to answer questions and generate AccelByte Extend SDK code more effectively .

MCP server for AI Diagram Maker — generate beautiful software engineering diagrams directly inside Cursor, Claude Desktop, Claude Code, or any MCP-compatible AI agent

Official MCP server for Buildable AI-powered development platform. Enables AI assistants to manage tasks, track progress, get project context, and collaborate with humans on software projects.

What Shopify did for ecommerce, Chipp does for AI agents. Build, deploy, and monetize AI agents for your business — no engineering team required.

CodeVF MCP lets AI hand off problems to real engineers instantly, so your workflows don’t stall when models hit their limits.

Make your AI agent speak every language on the planet, using Lingo.dev Localization Engine.