Vercel Ai Sdk MCP Project

🚀 Vercel Artificial Intelligence Software Development Kit (AI SDK) Integration Guide

This guide details how to integrate the Vercel AI SDK into a multi - step toolchain and use it in combination with the Figma design tool and Magic's interactive AI tool. It covers the full process from local development to cloud deployment, including API key configuration, error handling, and automated testing.

🚀 Quick Start

This guide provides a comprehensive process from project initialization to final deployment, ensuring developers can smoothly integrate and use the Vercel AI SDK.

✨ Features

This integration guide enables the combination of the Vercel AI SDK with Figma and Magic tools, covering a full - fledged process from local development to cloud deployment. It includes API key configuration, error handling, and automated testing, providing a seamless development experience.

📦 Installation

Project Initialization

1. Create a new npm project by running the following command in the terminal:

   npm init -y
   

2. Install the necessary dependencies:

   npm install @vercel/ai openai figma magic-sdk
   

📚 Documentation

Configuration Files

.env File

OPENAI_API_KEY=your_openai_api_key_here
ANTHROPIC_API_KEY=optional_anthropic_api_key
FIGMA_API_KEY=required_for_Figma_connector
TWENTY_FIRST_API_KEY=required_for_MagicMcpConnector

package.json Example Configuration

{
  "name": "vercel-ai-sdk-integration",
  "version": "1.0.0",
  "main": "index.js",
  "license": "ISC",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "@vercel/ai": "^2.7.0",
    "openai": "^6.0.1",
    "figma": "^4.0.5",
    "magic-sdk": "^5.3.0"
  }
}

Core Function Modules

index.js Example Code

const { Configuration, OpenAIApi } = require("openai");
const figma = require('figma');
const magic = require('magic-sdk');

// Initialize the OpenAI client
const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

// Figma design extraction function
async function extractFigmaDesign fileId {
  // Implement the logic to extract design data from Figma
}

// Magic AI interaction tool
async function magicAiInteraction prompt {
  const result = await magic.generatePrompt(prompt);
  return result;
}

// Vercel AI SDK text generator
async function generateText content {
  const completion = await openai.createCompletion({
    model: "gpt-3.5-turbo",
    prompt: content,
  });
  return completion.data.choices[0].text;
}

Usage Examples

Pathway 2

1. Ensure all MCP servers are running properly (either locally or deployed via Smithery).
2. Create rule files in the .cursor/rules/ directory, such as figma.cursorule, magic.cursorule, and vercel.cursorule.
3. Provide a multi - step prompt, for example:

   "First, use the extract_figma_design tool of mcp - figma. Then, call the inspiration tool of magic - mcp. Finally, utilize the generate_ui_component function of vercel - ai - sdk - mcp in combination with the context..."
   

Deployment Guide

Smithery Platform Deployment

1. Push the project code to a Git repository.
2. Log in to Smithery and create a new build workflow.
3. Add the following steps to the workflow:
   • Install dependencies: npm install
   • Build the project: npm run build

Environment Variable Configuration

Add environment variables to the Smithery workflow, ensuring that all necessary API keys are included.

Future Improvement Plans

• Implement error handling and retry mechanisms.
• Add logging and monitoring features.
• Integrate more advanced features of the Vercel AI SDK.
• Provide support for Docker containerized deployment.

Contact Information

For feedback or technical support, please contact: support@vercel.com