# 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
```bash
npm install ai openai
# of voor Anthropic:
npm install ai @anthropic-ai/sdk
```

### Core Hooks

#### `useChat` - Voor Conversaties
```tsx
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

```ts
// 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