English

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!

Posted onaiwith tags:
0
0
0
0