rubberducky/novi-lessons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
novi-lessons/Les11-AI-SDK/Les11-Slide-Overzicht.md
Tim Rijkse 634789e615 fix: add les 11
2026-05-19 18:50:11 +02:00

12 KiB
Raw Permalink Blame History

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:

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

Reference in New Issue View Git Blame Copy Permalink