vercel-ai-sdklisted

# Vercel AI SDK Skill ## When to activate - Building the frontend interface for an AI application in Next.js or React - Streaming AI responses to a UI without managing SSE manually - Implementing a chat interface with message history - Calling AI tools and rendering their results as UI components - Routing requests across multiple AI providers (Claude, OpenAI, Gemini) - Building generative UI where the AI decides what component to render ## When NOT to use - Pure backend AI logic with no UI — use the Claude API skill directly - Long-running autonomous agents with file system access — use the Claude Agent SDK - When you need full control over the streaming protocol — raw fetch + SSE ## Why Vercel AI SDK for frontend AI The Vercel AI SDK handles what would otherwise take hundreds of lines of custom code: SSE parsing, stream concatenation, message state, abort controllers, tool result rendering, and provider switching. It is model-agnostic — you can route to Claude, OpenAI, or Gemini by changing one line. ## Instructions ### Installation ```bash npm install ai @ai-sdk/anthropic # or for OpenAI npm install ai @ai-sdk/openai # or for multiple providers npm install ai @ai-sdk/anthropic @ai-sdk/openai @ai-sdk/google ``` ### Route handler (Next.js App Router) ```typescript // app/api/chat/route.ts import { anthropic } from '@ai-sdk/anthropic' import { streamText } from 'ai' export const maxDuration = 30 // Vercel: allow streaming up to 30s export async function POST(req: