Polderfest demo — Les 12 startpunt
Kopie van de werkende Les 11 demo. Startpunt voor Les 12 — Tool Calling.
Wat zit hier al in?
- Next.js 16 + TypeScript + Tailwind
- Supabase client (
lib/supabase.tsvoor client,lib/supabase-admin.tsvoor service-role) - Chat-route met context-all aanpak (
app/api/chat/route.ts):- Haalt alle 500 bands op
- Stuurt mee als tekst in system prompt
streamText→toUIMessageStreamResponse()
- Chat-pagina met
useChatvan@ai-sdk/react(app/page.tsx) - Seed script (
scripts/seed-polderfest.ts) AGENTS.mdmet project context
Wat doen we in Les 12?
We refactoren app/api/chat/route.ts van context-all naar Tool Calling:
- Weg met de hele context-string
- Tools definiëren —
searchBands,getStats,getBandByName, ... stopWhen: stepCountIs(5)voor multi-step- System prompt aanpassen: "gebruik tools, verzin niet"
- UI uitbreiden om tool-invocations te tonen
Setup
# 1. Dependencies installeren
npm install
# 2. .env.local maken
cp .env.local.example .env.local
# Vul je eigen Supabase + OpenAI keys in
# 3. Supabase schema (als nog niet gedaan)
# Open Supabase → SQL Editor → run schema.sql uit Les 11
# 4. Seed (als nog niet gedaan)
npx tsx scripts/seed-polderfest.ts
# 5. Dev server
npm run dev
Open http://localhost:3000 voor de chat.
Stack-versies in dit project
aiv6 — gebruikt nieuwere API:UIMessagetypeconvertToModelMessages()toUIMessageStreamResponse()
@ai-sdk/reactv3 —useChatreturnt{ messages, sendMessage, status }@ai-sdk/openaiv3- Tool API (v6): gebruikt
inputSchema(wasparameters) enstopWhen(wasmaxSteps)