Vercel AI SDK

Vercel AI SDK is a TypeScript toolkit for building AI-powered web applications with streaming chat interfaces, generative UI, and tool calling. It provides React hooks and server functions that handle the complexity of streaming LLM responses to the browser.

Key use cases include:

• Building streaming chat interfaces in Next.js, Nuxt, and SvelteKit
• Generative UI — rendering React components streamed from the server based on LLM decisions
• Tool calling — LLMs invoking server-side functions and returning results to the frontend
• Multi-provider support — switch between OpenAI, Anthropic, Google, and more
• Structured data extraction with Zod schema validation
• Building AI features into existing web applications

The Vercel AI SDK is used by frontend and full-stack developers building AI-native web applications. It is the standard way to add AI to Next.js apps and provides the best developer experience for streaming UI patterns.

The SDK includes AI SDK Core (provider-agnostic LLM calls), AI SDK UI (React/Vue/Svelte hooks), and AI SDK RSC (React Server Components integration).

1. Install in your Next.js project:

   npm install ai @ai-sdk/openai

2. Set your API key in .env.local:

   OPENAI_API_KEY=sk-...

3. Create an API route (app/api/chat/route.ts):

   import { openai } from '@ai-sdk/openai'
   import { streamText } from 'ai'
   
   export async function POST(req: Request) {
     const { messages } = await req.json()
     const result = streamText({
       model: openai('gpt-4o'),
       messages
     })
     return result.toDataStreamResponse()
   }

4. Use the useChat hook in your component:

   import { useChat } from 'ai/react'
   export default function Chat() {
     const { messages, input, handleSubmit, handleInputChange } = useChat()
   }

Pricing: The AI SDK is free and open source (Apache 2.0). Deploying on Vercel has its own pricing tiers. You pay only for LLM API calls.