# Les 15: Vercel AI SDK - AI Features in je App

---

## 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?

**Het probleem:** Direct API calls naar OpenAI/Anthropic zijn complex:
- Streaming handmatig implementeren
- Error handling
- State management

**De oplossing:** Vercel AI SDK
- Simpele React hooks
- Built-in streaming
- Provider-agnostic (OpenAI, Anthropic, etc.)
- Edge-ready

---

### Installatie & Setup

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

**Environment variable:**
```bash
# .env.local
OPENAI_API_KEY=sk-xxxxx
```

---

### Core Hooks

#### useChat - Voor Conversaties

```tsx
'use client'
import { useChat } from 'ai/react'

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

  return (
    <div className="flex flex-col h-screen">
      <div className="flex-1 overflow-y-auto p-4">
        {messages.map(m => (
          <div key={m.id} className={m.role === 'user' ? 'text-right' : 'text-left'}>
            <span className="inline-block p-2 rounded-lg bg-gray-100">
              {m.content}
            </span>
          </div>
        ))}
      </div>

      <form onSubmit={handleSubmit} className="p-4 border-t">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Type a message..."
          className="w-full p-2 border rounded"
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? 'Sending...' : 'Send'}
        </button>
      </form>
    </div>
  )
}
```

#### useCompletion - Voor Single Completions

```tsx
import { useCompletion } from 'ai/react'

export function SummaryComponent() {
  const { completion, input, handleInputChange, handleSubmit, isLoading } = useCompletion()

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <textarea
          value={input}
          onChange={handleInputChange}
          placeholder="Paste text to summarize..."
        />
        <button type="submit">Summarize</button>
      </form>
      {completion && <p>{completion}</p>}
    </div>
  )
}
```

---

### API Routes

**app/api/chat/route.ts:**
```typescript
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-mini'),
    system: 'You are a helpful cooking assistant. Suggest recipes based on ingredients.',
    messages,
  })

  return result.toDataStreamResponse()
}
```

**Met custom system prompt:**
```typescript
const result = streamText({
  model: openai('gpt-4o-mini'),
  system: `You are a recipe assistant for the AI Recipe Generator app.

    When the user provides ingredients:
    1. Suggest 2-3 recipes they could make
    2. List required additional ingredients (if any)
    3. Provide brief cooking instructions

    Be concise and practical.`,
  messages,
})
```

---

### Streaming Responses

**Waarom streaming?**
- Betere UX (user ziet direct resultaat)
- Snellere perceived performance
- Geen wachten op complete response

**Hoe het werkt:**
1. Server stuurt tokens één voor één
2. Client rendert elke token direct
3. User ziet "typing" effect

**Loading indicator:**
```tsx
{isLoading && (
  <div className="flex items-center gap-2">
    <div className="animate-pulse">●</div>
    <span>AI is thinking...</span>
  </div>
)}
```

---

### Integratie met Supabase

**Conversations opslaan:**

```typescript
// Maak tabel in Supabase:
// conversations: id, user_id, created_at
// messages: id, conversation_id, role, content, created_at

// Na elke message:
async function saveMessage(conversationId: string, role: string, content: string) {
  await supabase.from('messages').insert({
    conversation_id: conversationId,
    role,
    content
  })
}
```

**In je component:**
```tsx
const { messages, input, handleSubmit } = useChat({
  onFinish: async (message) => {
    await saveMessage(conversationId, message.role, message.content)
  }
})
```

---

### Error Handling

```tsx
const { messages, error, reload } = useChat()

{error && (
  <div className="p-4 bg-red-100 text-red-700 rounded">
    <p>Something went wrong. Please try again.</p>
    <button onClick={reload}>Retry</button>
  </div>
)}
```

---

### Cost Management

**Model keuze:**
| Model | Kosten | Gebruik voor |
|-------|--------|--------------|
| gpt-4o-mini | Goedkoop | Meeste taken |
| gpt-4o | Duur | Complexe reasoning |
| claude-3-haiku | Goedkoop | Simpele taken |
| claude-3-sonnet | Medium | Balans |

**Bespaartips:**
1. Gebruik gpt-4o-mini als default
2. Korte system prompts
3. Beperk conversation history
4. Caching waar mogelijk

---

## Tools
- Vercel AI SDK (`ai` package)
- Next.js API Routes
- OpenAI API / Anthropic API
- Cursor
- Supabase

---

## Lesopdracht (2 uur)

### Bouw een AI Chat Component

**Deel 1: Setup (20 min)**
1. `npm install ai @ai-sdk/openai`
2. Voeg `OPENAI_API_KEY` toe aan `.env.local`
3. Maak `app/api/chat/route.ts`

**Deel 2: Basic Chat (40 min)**
1. Maak `components/Chat.tsx`
2. Implementeer `useChat` hook
3. Bouw chat UI met Tailwind
4. Test streaming werkt

**Deel 3: System Prompt (30 min)**
1. Schrijf system prompt voor je eindproject:
   - Recipe Generator: cooking assistant
   - Budget Buddy: financial advisor
   - Travel Planner: travel expert
2. Test met relevante vragen

**Deel 4: Supabase Integratie (30 min)**
1. Maak `messages` tabel
2. Sla berichten op met `onFinish`
3. Laad history bij page load

### Deliverable
- Werkende AI chat met streaming
- Custom system prompt
- Messages opgeslagen in Supabase

---

## Huiswerk (2 uur)

### Bouw AI Feature voor Eindproject

**Deel 1: Core AI Feature (1 uur)**

Implementeer de AI chat die past bij je eindproject:

| Project | AI Feature |
|---------|-----------|
| Recipe Generator | "Wat kan ik maken met kip en rijst?" |
| Budget Buddy | "Analyseer mijn uitgaven deze maand" |
| Travel Planner | "Plan een weekend Barcelona" |

- Custom system prompt
- Context uit je database meegeven

**Deel 2: UX Polish (30 min)**

Voeg toe:
- Streaming indicator
- Suggested prompts / quick actions
- Copy response button
- Clear chat button
- Error handling

**Deel 3: Documentatie (30 min)**

Maak `docs/AI-FEATURE.md`:
- Welke AI feature heb je gebouwd?
- Wat doet de system prompt?
- Hoe integreert het met Supabase?
- Welke model keuzes heb je gemaakt?

### Deliverable
- AI feature in eindproject
- Deployed preview
- AI-FEATURE.md documentatie

---

## 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
- Custom system prompts schrijven
- Chat history opslaan in Supabase
- Error handling en loading states implementeren
- Kostenbewust omgaan met AI APIs