Introduction to Vercel AI SDK - Vercel AI SDK Tutorial | TechLead

What is Vercel AI SDK?

The Vercel AI SDK is a powerful TypeScript library designed to help developers build AI-powered applications with React, Next.js, Vue, Svelte, and Node.js. It provides a unified API for working with various AI providers and handles the complexity of streaming responses, state management, and UI updates.

Why Use Vercel AI SDK?

Unified API: Work with OpenAI, Anthropic, Google, and more using one interface
Streaming First: Built-in support for streaming responses with backpressure handling
React Hooks: useChat and useCompletion hooks for easy UI integration
Edge Ready: Optimized for serverless and edge deployments
Type Safe: Full TypeScript support with excellent DX

Core Concepts

AI Core

Server-side utilities for generating text, structured data, and tool calls

AI UI

React hooks (useChat, useCompletion) for building AI interfaces

AI RSC

React Server Components integration for streaming UI

Providers

Adapters for OpenAI, Anthropic, Google, Mistral, and more

Installation

# Install the AI SDK
npm install ai

# Install a provider (e.g., OpenAI)
npm install @ai-sdk/openai

# Or install multiple providers
npm install @ai-sdk/anthropic @ai-sdk/google

Quick Start: Your First AI App

Step 1: Set Up Environment Variables

# .env.local
OPENAI_API_KEY=your-openai-api-key

Step 2: Create an API Route (Next.js App Router)

// app/api/chat/route.ts
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai('gpt-4-turbo'),
    messages,
  });

  return result.toDataStreamResponse();
}

Step 3: Create the Chat UI

'use client';

import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div className="flex flex-col w-full max-w-md mx-auto">
      {messages.map((m) => (
        <div key={m.id} className="whitespace-pre-wrap">
          <strong>{m.role === 'user' ? 'You: ' : 'AI: '}</strong>
          {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          placeholder="Say something..."
          onChange={handleInputChange}
          className="w-full p-2 border rounded"
        />
      </form>
    </div>
  );
}

AI SDK Architecture

┌─────────────────────────────────────────────────────────┐
│                    Your Application                      │
├─────────────────────────────────────────────────────────┤
│  React Components    │    Server Actions / API Routes   │
│  ┌─────────────┐     │    ┌─────────────────────────┐   │
│  │  useChat    │     │    │    streamText()         │   │
│  │  useComple- │◄────┼────│    generateText()       │   │
│  │  tion       │     │    │    generateObject()     │   │
│  └─────────────┘     │    └─────────────────────────┘   │
├─────────────────────────────────────────────────────────┤
│                    AI SDK Core                          │
├─────────────────────────────────────────────────────────┤
│  OpenAI  │  Anthropic  │  Google  │  Mistral  │  ...   │
└─────────────────────────────────────────────────────────┘

Key Functions

import { generateText, streamText, generateObject } from 'ai';
import { openai } from '@ai-sdk/openai';

// Generate text (non-streaming)
const { text } = await generateText({
  model: openai('gpt-4-turbo'),
  prompt: 'What is the capital of France?',
});

// Stream text
const result = streamText({
  model: openai('gpt-4-turbo'),
  prompt: 'Write a short story about a robot.',
});

// Generate structured data
import { z } from 'zod';

const { object } = await generateObject({
  model: openai('gpt-4-turbo'),
  schema: z.object({
    recipe: z.object({
      name: z.string(),
      ingredients: z.array(z.string()),
      steps: z.array(z.string()),
    }),
  }),
  prompt: 'Generate a recipe for chocolate chip cookies.',
});

API Key Security

Never expose API keys in client-side code. Always use environment variables and call AI providers from server-side code (API routes, Server Actions, or server components).

Key Takeaways

• Vercel AI SDK provides a unified API for multiple AI providers
• Built-in streaming support for real-time responses
• useChat and useCompletion hooks simplify React integration
• Works seamlessly with Next.js App Router and Server Actions
• Full TypeScript support with excellent developer experience

Learn More

Vercel AI SDK Documentation →
Official documentation with guides and API reference.
Getting Started Guide →
Step-by-step guide to building your first AI app.