Integrate AI into your Next.js apps with the Vercel AI SDK. Here's a complete guide.
Setup
npm install ai openai
Streaming Chat Completions
import { OpenAI } from 'openai';
import { OpenAIStream, StreamingTextResponse } from 'ai';
export async function POST(req: Request) {
const { messages } = await req.json();
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});
const response = await openai.chat.completions.create({
model: 'gpt-4-turbo-preview',
stream: true,
messages,
});
const stream = OpenAIStream(response);
return new StreamingTextResponse(stream);
}
Client-Side Chat UI
'use client';
import { useChat } from 'ai/react';
export function Chat() {
const { messages, input, handleInputChange, handleSubmit } = useChat();
return (
<div className="flex h-screen flex-col">
<div className="flex-1 overflow-y-auto">
{messages.map((m) => (
<div key={m.id} className={m.role}>
{m.content}
</div>
))}
</div>
<form onSubmit={handleSubmit}>
<input
value={input}
onChange={handleInputChange}
placeholder="Ask anything..."
/>
</form>
</div>
);
}
Function Calling
const tools = [
{
type: 'function',
function: {
name: 'get_weather',
description: 'Get weather for a location',
parameters: {
type: 'object',
properties: {
location: { type: 'string' },
},
},
},
},
];
const response = await openai.chat.completions.create({
model: 'gpt-4-turbo-preview',
messages,
tools,
});
RAG (Retrieval Augmented Generation)
import { embed } from 'ai';
import { openai } from '@ai-sdk/openai';
// Generate embeddings
const { embedding } = await embed({
model: openai.embedding('text-embedding-3-small'),
value: 'Your text here',
});
// Store in vector database (Pinecone, Supabase, etc.)
await vectorDB.upsert({
id: 'doc-1',
values: embedding,
metadata: { text: 'Your text here' },
});
Rate Limiting
import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';
const ratelimit = new Ratelimit({
redis: Redis.fromEnv(),
limiter: Ratelimit.slidingWindow(10, '1 m'),
});
export async function POST(req: Request) {
const identifier = req.headers.get('x-forwarded-for') ?? 'anonymous';
const { success } = await ratelimit.limit(identifier);
if (!success) {
return new Response('Rate limit exceeded', { status: 429 });
}
// Process AI request...
}
Build powerful AI features with these patterns!