🤖 AI Integration with Vercel AI SDK

Installation & Setup

Environment Variables (.env.local):

# OpenAI API Key
OPENAI_API_KEY=sk-...

# Anthropic API Key (optional)
ANTHROPIC_API_KEY=sk-ant-...

# Google AI API Key (optional)
GOOGLE_GENERATIVE_AI_API_KEY=...

💡 Key Point: The Vercel AI SDK is provider-agnostic. You can easily switch between OpenAI, Anthropic, Google, and other providers without changing your application code.

Basic Chat Completion (Server-Side)

📚 Understanding AI Parameters (Beginner's Guide)

Client Component Usage:

"use client";

import { useState } from "react";
import { generateCompletion } from "@/app/actions/ai";

export default function SimpleChat() {
  const [prompt, setPrompt] = useState("");
  const [response, setResponse] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    
    const result = await generateCompletion(prompt);
    
    if (result.success) {
      setResponse(result.text);
    }
    
    setLoading(false);
  };

  return (
    <form onSubmit={handleSubmit}>
      <textarea
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        placeholder="Ask anything..."
      />
      <button type="submit" disabled={loading}>
        {loading ? "Generating..." : "Submit"}
      </button>
      {response && <div>{response}</div>}
    </form>
  );
}

💡 Key Point: Use server actions for simple completions. This keeps your API keys secure and runs on the server. For real-time streaming, use Route Handlers (next step).

Streaming Responses (ChatGPT-like)

Client Component with useChat Hook:

"use client";

import { useChat } from "ai/react";

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } =
    useChat({
      api: "/api/chat",
    });

  return (
    <div style={{ maxWidth: "800px", margin: "0 auto", padding: "2rem" }}>
      {/* Messages */}
      <div style={{ marginBottom: "1rem" }}>
        {messages.map((message) => (
          <div
            key={message.id}
            style={{
              padding: "1rem",
              marginBottom: "0.5rem",
              background:
                message.role === "user" ? "var(--blue)" : "var(--surface)",
              borderRadius: "8px",
            }}
          >
            <strong>{message.role === "user" ? "You" : "AI"}:</strong>
            <p>{message.content}</p>
          </div>
        ))}
      </div>

      {/* Input Form */}
      <form onSubmit={handleSubmit} style={{ display: "flex", gap: "0.5rem" }}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Type your message..."
          disabled={isLoading}
          style={{ flex: 1, padding: "0.75rem", borderRadius: "6px" }}
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? "..." : "Send"}
        </button>
      </form>
    </div>
  );
}

💡 Key Point: useChat automatically handles message state, optimistic updates, streaming, and error handling. It's the easiest way to build ChatGPT-like interfaces.

Function Calling / Tools

Client Usage (same as before):

"use client";

import { useChat } from "ai/react";

export default function ChatWithTools() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: "/api/chat-with-tools",
  });

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          <strong>{m.role}:</strong> {m.content}
          
          {/* Show tool calls */}
          {m.toolInvocations?.map((tool, i) => (
            <div key={i} style={{ background: "var(--surface-elevated)" }}>
              <code>{tool.toolName}</code> called with {JSON.stringify(tool.args)}
              <br />
              Result: {JSON.stringify(tool.result)}
            </div>
          ))}
        </div>
      ))}
      
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

💡 Key Point: Tools let AI interact with your backend. The AI decides WHEN to call tools based on user input. Use Zod schemas for type-safe parameters.

RAG Pattern (Retrieval-Augmented Generation)

RAG Chat Route:

// app/api/chat-rag/route.ts
import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";
import { searchDocuments } from "@/lib/vectorStore";

export async function POST(req: Request) {
  const { messages } = await req.json();
  const lastMessage = messages[messages.length - 1].content;

  // 1. Retrieve relevant documents
  const relevantDocs = await searchDocuments(lastMessage, 3);

  // 2. Inject context into the system prompt
  const context = relevantDocs.join("\n\n");

  const result = await streamText({
    model: openai("gpt-4-turbo"),
    system: `You are a helpful assistant. Use the following context to answer questions.
    
Context:
${context}

If the answer is not in the context, say "I don't have information about that."`,
    messages,
  });

  return result.toAIStreamResponse();
}

// Example: Batch indexing documents
export async function indexDocuments() {
  const documents = [
    { id: "1", text: "Next.js is a React framework for production..." },
    { id: "2", text: "TypeScript adds static typing to JavaScript..." },
    { id: "3", text: "The Vercel AI SDK makes it easy to build AI apps..." },
  ];

  for (const doc of documents) {
    await storeDocument(doc.text, { id: doc.id });
  }
}

💡 Key Point: RAG lets AI answer questions about YOUR data (docs, products, support tickets). First, embed and store your documents. Then retrieve relevant ones at query time and inject into the prompt.

Production Tips & Best Practices

• Rate Limiting: Implement rate limits per user to prevent abuse. Use Redis or middleware.
• Error Handling: Always wrap AI calls in try-catch. Show user-friendly error messages.
• Caching: Cache common queries to save costs. Use Redis or Next.js cache.
• Streaming: Always use streaming for better UX. Users see responses immediately.
• Model Selection: Use cheaper models (gpt-3.5) for simple tasks. Use gpt-4 for complex reasoning.
• Token Limits: Set maxTokens to control costs. Track usage with OpenAI dashboard.
• Security: Never expose API keys to the client. Always use server-side routes.
• Monitoring: Log all AI requests for debugging and analytics. Track costs per user.
• Prompt Engineering: Spend time crafting good system prompts. Test with various inputs.
• Fallbacks: Have fallback responses when AI fails. Don't let users see raw errors.

Example: Rate Limiting Middleware

// lib/rateLimiter.ts
import { Ratelimit } from "@upstash/ratelimit";
import { Redis } from "@upstash/redis";

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL!,
  token: process.env.UPSTASH_REDIS_REST_TOKEN!,
});

export const ratelimit = new Ratelimit({
  redis,
  limiter: Ratelimit.slidingWindow(10, "1 m"), // 10 requests per minute
});

// Use in API route
export async function POST(req: Request) {
  const ip = req.headers.get("x-forwarded-for") ?? "anonymous";
  const { success } = await ratelimit.limit(ip);

  if (!success) {
    return new Response("Too many requests", { status: 429 });
  }

  // Continue with AI request...
}