# Les 11 — Vercel AI SDK
## Slide Overzicht (Klas A — 3 uur fysiek, demo-driven)

**Lesvorm:** Tim demonstreert klassikaal. Studenten kijken mee, gaan thuis zelf aan de slag.
**Demo-app:** Polderfest 2027 — fictief muziekfestival met 500 verzonnen bands in Supabase. Studenten kunnen vragen stellen aan dummy data die LLM's onmogelijk vooraf konden kennen.

---

## Slide 1: Title
### Les 11 — Vercel AI SDK

**Visual:**
- Background: CREAM
- "Les 11" in BLUE
- "Vercel AI SDK" in BLACK
- Subtitle: "Praat met je eigen data — vandaag bouwen we Polderfest 2027"

---

## Slide 2: Terugblik
### Waar staan we?

**Vorige lessen:**
- Supabase geïntegreerd in je app
- Tabellen + relaties opgezet
- RLS policies bekeken (wie mag wat lezen/schrijven)

**Vandaag bouwen we niet voort op QuickPoll — we starten een nieuwe demo from scratch.**
We laten zien hoe je een Next.js app aan een verse Supabase koppelt en die data combineert met AI.

**Visual:** Twee icoontjes (database + Next.js logo) met pijl naar AI-icoon.

---

## Slide 3: Planning
### Vandaag — 180 minuten

| Onderwerp | Duur |
|-----------|------|
| Welkom + Terugblik | 10 min |
| Theorie: Wat is de Vercel AI SDK? | 30 min |
| **Live Demo 1** — Next.js scaffold + Supabase koppelen | 20 min |
| **Live Demo 2** — Seed script: 500 records in Supabase | 20 min |
| **Pauze** | 15 min |
| **Live Demo 3** — AI SDK installeren + chat-route | 30 min |
| **Live Demo 4** — Vragen stellen aan onze data | 15 min |
| Waarom data + AI samen krachtig is | 5 min |
| Lesopdracht + Huiswerk uitleg | 20 min |
| Vragen + Afsluiting | 15 min |

**Belangrijk:** Vandaag is **demo-driven**. Jullie kijken en luisteren. Thuis gaan jullie zelf aan de slag met jullie eigen thema.

---

## Slide 4: Wat is de Vercel AI SDK?
### Eén SDK, alle providers

**Content:**
- TypeScript-first SDK voor AI features
- Werkt met OpenAI, Anthropic, Google, Mistral, Groq, en meer
- **Unified API:** zelfde code voor elk model
- Streaming out-of-the-box
- React hooks (`useChat`, `useCompletion`)
- Tool Calling (volgende les)
- Open source · gemaakt door Vercel

**Code teaser:**
```typescript
import { generateText } from "ai";
import { openai } from "@ai-sdk/openai";

const { text } = await generateText({
  model: openai("gpt-4o-mini"),
  prompt: "Vat de Polderfest line-up samen",
});
```

**Visual:** Logo's van OpenAI/Anthropic/Google met pijl naar één AI-SDK doos.

---

## Slide 5: Modellen + Kosten
### Welk model wanneer?

| Provider | Model | Use case | Prijs (in/out per 1M tokens) |
|----------|-------|----------|------------------------------|
| OpenAI | gpt-4o-mini | Default — snel + goedkoop | $0.15 / $0.60 |
| OpenAI | gpt-4o | Multimodaal (vision) | $2.50 / $10 |
| OpenAI | gpt-4.1 | Reasoning, agents | $2 / $8 |
| Anthropic | claude-sonnet-4 | Coding, lange context | $3 / $15 |
| Google | gemini-2.5-flash | Snel + multimodaal | $0.075 / $0.30 |
| Groq | llama-3.3-70b | Ultra-fast inference | $0.59 / $0.79 |

**Vuistregel:** start met `gpt-4o-mini`. Upgrade pas als nodig.

**Voor vandaag:** `gpt-4o-mini`. Onze hele les inclusief Polderfest-Q&A kost ongeveer 1-2 cent.

---

## Slide 6: De 4 kern-functies
### Wat je vandaag gaat zien

| Functie | Wat het doet | Wanneer |
|---------|--------------|---------|
| `generateText` | Wacht tot AI antwoord klaar is — string terug | Korte server-only antwoorden |
| `streamText` | Stream karakter voor karakter | Chat UI, lange antwoorden |
| `useChat` | React hook voor instant chat UI | Client-side chat |
| `generateObject` | Type-safe data via Zod schema | Database inserts, classificatie |

**Vandaag gebruiken we vooral:**
- `streamText` + `useChat` — voor de chat UI
- Onze Polderfest-data als context — AI beantwoordt vragen op basis van onze 500 bands

**Volgende les (Les 12):** `generateText` + `tools` — Tool Calling, waar AI zelf besluit welke DB-query te runnen.

---

## Slide 7: Wat bouwen we vandaag?
### Polderfest 2027 — een fictief festival

**Het idee:**
Een fictief Nederlands muziekfestival met **500 verzonnen bands**. Volledig fictief — geen enkele LLM kan dit weten uit training. Dit is precies waar AI + jouw data sterker wordt dan AI alleen.

**Schema (Supabase tabel `bands`):**
- `name`, `genre`, `sub_genre`
- `stage`, `day`, `start_time`, `duration_min`
- `origin_city`, `members`, `bio`
- `tier` (headliner / mid / opener), `popularity`, `ticket_impact`

**Voorbeeld-vragen die we kunnen stellen aan AI:**
- "Welke bands spelen vrijdagavond na 22:00 op de Main Stage?"
- "Geef me 5 acts uit Groningen, gesorteerd op populariteit"
- "Vat de hip-hop scene op Polderfest samen in 3 zinnen"
- "Welke headliner is qua bio het meest interessant voor electronic-fans?"

**Visual:** Festival-poster mock-up met genre-tags + Supabase logo.

---

## Slide 8: LIVE DEMO 1
### Next.js scaffold + Supabase koppelen (~20 min)

**Wat ik laat zien:**
1. `npx create-next-app@latest polderfest --typescript --tailwind --app`
2. Nieuw Supabase project aanmaken (dashboard)
3. SQL Editor: schema runnen (zie schema.sql)
4. Supabase client installeren: `npm i @supabase/supabase-js`
5. `.env.local` met `SUPABASE_URL` + `SUPABASE_ANON_KEY` + `SUPABASE_SERVICE_ROLE_KEY`
6. `lib/supabase.ts` aanmaken (client)
7. Tabel-check via Table Editor: leeg, klaar om te seeden

**Wat ik NIET uitleg:** Next.js / Supabase basics — dat hebben jullie al gehad.

**Visual:** Badge "LIVE DEMO" in PINK + screenshots Supabase dashboard.

---

## Slide 9: LIVE DEMO 2
### Seed script: 500 records in Supabase (~20 min)

**Wat ik laat zien:**
1. `seed-polderfest.ts` openen — uitleggen wat 't doet:
   - Procedureel 500 bands genereren
   - Combinaties van adjectives + nouns + bio-fragmenten
   - Insert in batches van 100
2. Service role key uitleggen — alleen lokaal, niet in client
3. `npm i tsx @supabase/supabase-js dotenv --save-dev`
4. `npx tsx seed-polderfest.ts` runnen
5. Supabase Table Editor refresh → 500 records zichtbaar
6. Een paar voorbeelden tonen — "De Tigers", "Lost Mirrors", "Sanne Van Dijk & The Echoes"

**Sleutel-inzicht:** dit zijn 500 namen die **niet bestaan**. Geen enkele LLM kan ze kennen.

**Visual:** Terminal log van seed + Table Editor screenshot.

---

## Slide 10: Pauze
### 15 minuten

---

## Slide 11: LIVE DEMO 3
### AI SDK installeren + chat-route (~30 min)

**Wat ik laat zien:**
1. `npm i ai @ai-sdk/openai zod`
2. `OPENAI_API_KEY` toevoegen aan `.env.local` (schoolkey via Brightspace)
3. **`app/api/chat/route.ts`** schrijven:
   - Haal alle bands op uit Supabase
   - Format als context-string
   - `streamText` aanroepen met system + user messages
   - Return `result.toDataStreamResponse()`
4. **`app/chat/page.tsx`** schrijven:
   - `"use client"` + `useChat` hook
   - Simpele Tailwind chat UI (messages list + input)
5. Naar `/chat` browsen → werkt
6. Eerste prompt: "Hoeveel bands spelen vrijdag?"

**Belangrijke uitleg-momenten:**
- Waarom we **alle bands meesturen** als context (volgende les: Tool Calling lost dit op)
- Hoe `streamText` zich aansluit op `useChat`
- System prompt — hoe je de AI 'rol' geeft

**Visual:** Code-mock-up + chat preview.

---

## Slide 12: LIVE DEMO 4
### Vragen stellen aan onze data (~15 min)

**Vragen die we live uitproberen:**
1. "Welke bands spelen zaterdag op de Beach Stage?"
2. "Geef me 3 headliners met de meeste popularity, en hun bio's"
3. "Hoeveel jazz fusion acts spelen er totaal?"
4. "Vat de electronic-scene op Polderfest samen — wat zou je aanraden voor iemand die houdt van techno?"
5. **Slechte vraag:** "Wie was de hoofdacts van Polderfest 2025?" — AI antwoordt eerlijk dat hij dat niet weet (data alleen 2027)

**Sleutel-inzicht:**
- AI is **slim**, maar pas écht nuttig met **jouw data**
- LLM weet niets van Polderfest 2027 — toch krijgen we precieze antwoorden
- Combinatie = `context (jouw data) + reasoning (AI)`

**Visual:** Chat screenshots met antwoorden.

---

## Slide 13: Waarom is dit krachtig?
### Data + AI > Data alleen, AI alleen

**Data alleen:**
- Supabase query: filter + sort + select
- Geen interpretatie, geen samenvatting, geen taal
- Gebruiker moet zelf SQL-denken

**AI alleen:**
- Gebrekkige kennis over jouw domein
- Verzint vaak (hallucinatie)
- Geen toegang tot live data

**Data + AI:**
- AI interpreteert en vat samen
- Antwoorden in natuurlijke taal
- Filtert + reasoneert + presenteert
- Schaalbaar — voeg data toe = nieuwe antwoorden mogelijk

**Quote om mee weg te lopen:**
> "Een LLM zonder jouw data is een gewone chatbot.
> Een LLM mét jouw data is een product."

---

## Slide 14: Lesopdracht
### Jouw eigen thema-app

**Voor thuis (niet in de les) — bouw je eigen versie:**

1. Bedenk een **eigen thema** met data die LLM's niet kunnen weten
2. Maak een nieuw Next.js project + nieuwe Supabase
3. Schrijf eigen `seed-XXX.ts` script (mag AI je bij helpen!)
4. Seed minstens **100 records** in Supabase
5. Implementeer chat-route + chat-pagina (zelfde flow als Polderfest)
6. Stel 3 vragen aan je AI die alleen kunnen door jouw data

**Voorbeeld eigen thema's:**
- Fictief restaurant-aggregator in een verzonnen stad
- Galactische bestuurders archief (sci-fi)
- Verzonnen scriptie-archief NOVI
- Fictieve museumcollectie
- Fictief NPO-programma overzicht
- ...

**Beperking:** **GEEN echte/openbare data** (geen Spotify, geen TheCocktailDB). Het moet fictief zijn zodat de demo-kracht zichtbaar wordt.

**Visual:** 4 voorbeeld-thema's als cards.

---

## Slide 15: Huiswerk
### Polderfest seed-script aanpassen + uitbreiden

**Voor volgende week (Les 12):**

**Verplicht — onderdeel A:**
- Pas het seed-script aan voor **jouw eigen thema** (gebruik gerust AI om te helpen)
- Run het tegen je eigen Supabase
- Push naar GitHub repo

**Verplicht — onderdeel B:**
- Voeg minstens **1 extra veld** toe waarvan je denkt dat het interessante vragen mogelijk maakt
- Update schema + seed script
- Stel een vraag aan AI die alleen kan dankzij dat nieuwe veld

**Verplicht — onderdeel C:**
- Schrijf `AI-CHAT.md` in je repo met:
  - Jouw thema (wat is het, waarom kun je dit niet aan een gewone LLM vragen?)
  - 3 leuke vragen die werken op jouw data
  - 1 vraag waar de AI moeite mee had — wat veranderde toen je de prompt aanpaste?

**Bonus:** Deploy op Vercel — preview URL meesturen.

**Visual:** Workflow-diagram + checklist.

---

## Slide 16: Volgende les — Tool Calling
### Hoe schaalt dit?

**Probleem dat we vandaag introduceren:**
- We sturen **alle 500 bands** mee als context bij elke vraag
- 500 bands ≈ 30.000 tokens — dat is veel, kost geld, traagt
- 5.000 bands? 50.000 bands? Werkt niet meer

**Oplossing (volgende les):**
- **Tool Calling** — AI besluit zelf welke query te runnen
- Voorbeeld: AI ziet vraag "Welke bands spelen vrijdag?" → roept tool `searchBands(day: "Vrijdag")` aan → krijgt 60 bands terug → antwoordt
- Schaalbaar, slim, multi-step

**Daarna in deze leerlijn:**
- Les 13: Agents + `maxSteps` (multi-step autonoom)
- Les 14: RAG + embeddings (semantic search op groot corpus)
- Les 15-16: Testing + Deployment
- Les 17-18: Eindopdracht-werkdagen + Pitch

---

## Slide 17: Afsluiting
### Vragen?

**Wat we vandaag gezien hebben:**
- Vercel AI SDK basics
- Modellen + 4 kern-functies
- Next.js + Supabase + AI SDK end-to-end gekoppeld
- Live demo met seed-script (500 records procedureel)
- Vragen stellen aan een dataset die geen LLM kent

**Vragen? Feedback?**

**Visual:** Cream achtergrond, blauw rondje met "→ Tool Calling".

---

## Slide Summary

| # | Title | Type |
|---|-------|------|
| 1 | Title | Opening |
| 2 | Terugblik | Recap (Supabase + RLS, kort) |
| 3 | Planning | 180-min schedule |
| 4 | Wat is de AI SDK | Theorie |
| 5 | Modellen + kosten | Theorie |
| 6 | 4 kern-functies | Theorie |
| 7 | Vandaag bouwen we Polderfest | Intro demo |
| 8 | **LIVE DEMO 1** — Next.js + Supabase | Demo |
| 9 | **LIVE DEMO 2** — Seed 500 records | Demo |
| 10 | Pauze | Break |
| 11 | **LIVE DEMO 3** — AI SDK + chat | Demo |
| 12 | **LIVE DEMO 4** — Vragen stellen | Demo |
| 13 | Data + AI = kracht | Reflectie |
| 14 | Lesopdracht — eigen thema | Praktijk |
| 15 | Huiswerk — seed aanpassen | Praktijk |
| 16 | Volgende les: Tool Calling | Preview |
| 17 | Afsluiting | Closing |

---

## Bronnen

- Vercel AI SDK docs — https://ai-sdk.dev/docs/introduction
- generateText / streamText / useChat / generateObject reference — https://ai-sdk.dev/docs/reference
- Supabase JS client — https://supabase.com/docs/reference/javascript
- Next.js App Router — https://nextjs.org/docs/app
- OpenAI pricing — https://openai.com/api/pricing
- Tokenizer — https://platform.openai.com/tokenizer
- Vercel templates met AI — https://vercel.com/templates?type=ai