novi-lessons/Samenvattingen/Les16-Samenvatting.md

Les 16: Vercel AI SDK - AI Features in je App

📋 Lesmateriaal nog niet uitgewerkt

De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:

• Les16-Slide-Overzicht.md
• Les16-Lesplan.md
• Les16-Bijlage-A-Lesopdracht.md
• Les16-Bijlage-B-Huiswerkopdracht.md

---

Hoofdstuk

Hoofdstuk 3: Advanced (Les 10-18)

Beschrijving

Bouw AI-powered features in je apps met de Vercel AI SDK. Leer hoe je chat interfaces, streaming responses en AI-gegenereerde content implementeert.

---

Te Behandelen

Waarom Vercel AI SDK?

• Abstractie over raw API calls
• Built-in streaming support
• React hooks voor eenvoudige integratie
• Provider-agnostic (OpenAI, Anthropic, etc.)
• Edge-ready

Installatie & Setup

npm install ai openai
# of voor Anthropic:
npm install ai @anthropic-ai/sdk

Core Hooks

useChat - Voor Conversaties

import { useChat } from 'ai/react';

export function ChatComponent() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>{m.role}: {m.content}</div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button type="submit" disabled={isLoading}>Send</button>
      </form>
    </div>
  );
}

useCompletion - Voor Single Completions

• Tekst generatie
• Samenvattingen
• One-shot responses

API Routes Setup

// 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();
}

Streaming Responses

• Waarom streaming: betere UX, snellere perceived performance
• Hoe het werkt: Server-Sent Events (SSE)
• Token-by-token rendering
• Loading states tijdens streaming

Integratie met Supabase

• Chat history opslaan in database
• User-specific conversations
• Message threading

Error Handling

• Network errors
• Rate limiting
• Token limits
• Graceful degradation

Cost Management

• Token counting
• Model selection (gpt-4o-mini vs gpt-4o)
• Caching strategies
• Usage monitoring

---

Tools

• Vercel AI SDK (ai package)
• Next.js API Routes
• OpenAI API / Anthropic API
• Cursor
• Supabase (voor chat history)

---

Lesopdracht (2 uur)

Bouw een AI Chat Component

Stap 1: Setup (20 min)

• Installeer ai en openai packages
• Configureer environment variables
• Maak API route /api/chat

Stap 2: Basic Chat (40 min)

• Implementeer useChat hook
• Bouw chat UI met Tailwind
• Test streaming responses

Stap 3: Supabase Integratie (40 min)

• Maak conversations en messages tabellen
• Sla berichten op na elke response
• Laad conversation history bij page load

Stap 4: Polish (20 min)

• Loading indicators
• Error states
• Scroll to bottom
• Clear conversation button

Deliverable

• Werkende AI chat met streaming
• Conversation history in Supabase
• Clean UI met goede UX

---

Huiswerk (2 uur)

Bouw AI Feature voor Eindproject

Kies 1 passend bij je eindproject:

Eindproject	AI Feature
AI Recipe Generator	Chat: "Wat kan ik maken met kip en rijst?"
Smart Budget Buddy	Chat: "Analyseer mijn uitgaven deze maand"
Travel Planner AI	Chat: "Plan een weekend Barcelona"

Deel 1: Implementatie (1 uur)

• Pas useChat aan voor jouw use case
• Custom system prompt voor context
• Relevante data uit Supabase meegeven als context

Deel 2: UX Polish (30 min)

• Streaming met typing indicator
• Suggested prompts / quick actions
• Copy response button
• Regenerate button

Deel 3: Documentatie (30 min)

• Documenteer je AI feature in docs/AI-FEATURE.md
• Beschrijf system prompt keuzes
• Leg integratie met Supabase uit

Deliverable

• AI feature geïntegreerd in eindproject
• Documentatie
• Deployed preview

---

Leerdoelen

Na deze les kan de student:

• Vercel AI SDK installeren en configureren
• useChat en useCompletion hooks gebruiken
• Streaming responses implementeren
• API routes opzetten voor AI providers
• Chat history opslaan in Supabase
• Error handling en loading states implementeren
• Kosten bewust omgaan met AI APIs