# Les 15 — Docenttekst (normaal) **Fysieke les, 3 uur. Voor uitgebreide voorbereiding + context per slide.** **Voor letterlijk voorleesbaar script: zie `Les15-Docenttekst-Autocue.md`.** --- ## Lesvorm en flow | Onderdeel | Indeling | |-----------|----------| | Theorie + 4 live demos | ±1 uur klassikaal | | Pauze | 15 minuten | | Hands-on (Polderfest deploy via 3 chats) | ±1 uur basis | | Extra werk (eigen feature toevoegen) | ±30 min als tijd over | **Focus:** koppelen + gebruiken. Climax: drie chats die GitHub, Polderfest+Supabase, en Vercel MCP samen aan het werk zetten. --- ## Voorbereiding — een week vooraf **Studenten checklist (stuur via Slack):** - Supabase project draait nog (uit Les 11/12) - Cursor + Pro Student actief - Node ≥ 18 - Personal Access Tokens **vooraf** aangemaakt: - GitHub PAT (fine-grained) - Supabase Personal Access Token (account-level) - Vercel account (geen token vooraf — OAuth bij eerste gebruik) **Jouw eigen voorbereiding:** - `~/.cursor/mcp.json` met VIER servers vooraf werkend (github + supabase + vercel + polderfest) - Vercel OAuth-flow vooraf doorlopen (anders kost dat live tijd) - Polderfest MCP finished `npm install` + `.env.local` gedaan - Lokaal `npm run dev` getest — `localhost:3000` werkt - Eén git commit gedaan in polderfest-mcp folder (klaar voor Chat 1) - Backup productie-URL op Vercel klaar als demo-fallback --- ## Voorbereiding — dag van de les **30 minuten vooraf:** - Cursor open met 4 MCP-indicators groen - Twee terminals: één in polderfest-mcp folder met `npm run dev`, één leeg - Browser tabs: github.com (logged in), Supabase dashboard, Vercel dashboard - Slides in fullscreen **Backup scenario:** - GitHub PAT verlopen → tweede PAT klaar - Vercel MCP OAuth weigert → val terug op `vercel link` + `vercel --prod` manueel - MCP-indicator komt niet → herstart Cursor LIVE (laat zien hoe) - Een chat raakt verstrikt → ALTIJD nieuwe chat openen, niet doorgaan in vervuilde context --- ## Per slide — extra context bij voorbereiding ### Slide 1 — Title **Doel:** verwachtingen zetten. Vandaag is anders dan voorgaande lessen: minder code, meer koppelen. Climax in drie chats. ### Slide 2 — Vandaag **Doel:** roadmap zetten — drie blokken + climax expliciet noemen. Maak vooraf duidelijk dat de drie chats het hoofdmoment zijn — daar werken we naartoe. ### Slide 3-5 — Wat is MCP **Doel:** basis-terminologie + waarom. Niet te diep. Drie rollen + drie primitives noemen, doorgaan. ### Slide 6 — Ecosysteem **Doel:** context dat het breed is. Niet alle servers doornemen. Een paar herkenbare voor de klas (GitHub, Slack). ### Slide 7 — Vier MCPs vandaag **Doel:** zet het demo-blok op. Belangrijk: noem dat alle vier via HTTP gaan, met dezelfde patroon. Vercel doet OAuth ipv Bearer — uitleggen dat dat veiliger is. ### Slide 8 — De mcp.json **Doel:** de complete config in één oogopslag. Echt de hele JSON tonen. Studenten krijgen 'm als template in lesbestanden. Wijs op: - `type: http` — moderne syntax - `headers.Authorization` voor Bearer-based - `vercel` heeft GEEN header — OAuth doet de rest ### Slide 9 — Tokens regelen **Doel:** student weet hoe hij elk token krijgt. **Belangrijkste valkuilen:** - GitHub PAT: fine-grained, niet classic. Beperkte permissies geven. - Supabase: ACCOUNT-level token, NIET project keys. `project_ref` uit project URL halen. - Vercel: geen pre-token. OAuth bij eerste gebruik. ### Slide 10 — Live koppelen **Doel:** student ziet dat het werkt. Live doorlopen: open `~/.cursor/mcp.json`, plak, fill tokens, save, Cmd+Q, opnieuw open, indicator groen. Voor Vercel: klik op "needs login", OAuth flow, terug naar Cursor. ### Slide 11 — Polderfest MCP **Doel:** student weet wat er in de zip zit. File-tree doorlopen. Benadrukken: één bestand doet het echte werk (`route.ts`). Rest is gewone Next.js. ### Slide 12 — Code-tour **Doel:** student snapt `server.tool()` patroon. Eén tool (searchBands) is genoeg. Andere drie volgen hetzelfde patroon. ### Slide 13 — Lokaal draaien **Doel:** student kan dit straks zelf. Live: commando's draaien, polderfest in mcp.json toevoegen, herstart Cursor, vraag stellen. ### Slide 14 — De drie chats workflow **Doel:** climax aankondigen. Maak expliciet dat het DRIE aparte chats zijn — niet één lange chat. Reden: elke chat heeft één focus, mcp.json kan dan beter de juiste tools aanroepen. ### Slide 15 — Chat 1: GitHub MCP **Doel:** student ziet GitHub MCP echt aan het werk. **Demo-aanwijzingen:** - Nieuwe chat (Cmd+L, of via "+" knop) - Plak de exacte prompt van de slide - Wacht tot Cursor tool-call `create_repository` doet - Toon github.com om te bevestigen - Cursor draait daarna `git remote add` + `git push` automatisch in terminal **Backup:** als GitHub MCP traag is — gewoon `gh repo create` zelf doen, maar wel commentaar geven dat MCP dit ook had gekund. ### Slide 16 — Chat 2: Polderfest features **Doel:** zien dat Supabase MCP + Cursor + Polderfest MCP samenwerken in één chat. **Demo-aanwijzingen:** - VOLLEDIG nieuwe chat (Cmd+L) — niet vorige chat hergebruiken - Plak prompt — Cursor zal eerst Supabase MCP aanroepen (vraagt bevestiging) - Daarna genereert Cursor de tools in route.ts - Accept all → save → `git add . && git commit -m "feat: reviews"` + push - Test in DEZELFDE chat met de twee review-vragen — die gaan via Polderfest MCP **Belangrijke uitleg na demo:** drie verschillende MCPs samen aan het werk in één chat. Cursor kiest de juiste. ### Slide 17 — Chat 3: Vercel MCP **Doel:** zien dat Vercel MCP een complete deploy doet. **Demo-aanwijzingen:** - Nieuwe chat - Plak prompt met env vars (vooraf in een notitie klaar — niet live tikken want geheim) - Vercel MCP roept create_project, link_repo, set_env_vars, deploy aan - Wacht op productie-URL (~45s) - Open URL in browser om te bevestigen - Update polderfest in mcp.json naar productie-URL → herstart Cursor → vraag in chat **Belangrijke afsluiting:** "Drie chats, vier MCPs, geen terminal-commando's zelf getypt voor github, supabase of vercel." ### Slide 18 — Lesopdracht **Doel:** overgang naar zelf doen. Lees de acht stappen voor. Geen deliverables. Wijs op: een mcp.json template staat in lesbestanden — invullen met eigen tokens. ### Slide 19 — Extra werk **Doel:** snel-werkers bezig houden. Hetzelfde patroon als Chat 2 uit jouw demo. Studenten kunnen letterlijk de demo kopiëren met een eigen feature-idee. ### Slide 20 — Vooruitblik **Doel:** voorbereiding Les 16. --- ## Veelvoorkomende vragen + antwoorden **"Werkt OAuth Vercel altijd?"** Bij eerste login wel. Als token verloopt verschijnt indicator rood — opnieuw klikken op "needs login". **"Moet Polderfest in dezelfde mcp.json staan als de andere drie?"** Ja — zo hebben we 4 indicators tegelijk groen. **"Wat als Supabase MCP read-only is — kan hij dan toch tabellen maken?"** Nee, dan zal hij dat weigeren. Zet `read_only=true` op `false` als je migrations wilt doen via MCP. Voor demo: dat is wat we doen. **"Kan dit ook in Claude Desktop?"** Ja — `~/Library/Application Support/Claude/claude_desktop_config.json` met dezelfde structuur. **"Wat is het verschil tussen Bearer + OAuth?"** Bearer = vooraf token in config. OAuth = browser-flow bij eerste gebruik, token wordt opgeslagen. Vercel doet OAuth om veiligheidsredenen. --- ## Foutmodi tijdens de les | Probleem | Snelle fix | |----------|-----------| | MCP-indicator komt niet | `Cmd+Q` Cursor en opnieuw openen | | mcp.json werkt niet | Valideer JSON op jsonlint.com — één komma fout = ALLE servers vallen uit | | GitHub MCP geeft 401 | PAT verlopen of geen rechten | | Supabase MCP geeft 403 | Token is project-key — heb account-level nodig, OF read_only blokkeert write | | Vercel "Needs login" blijft hangen | Browser pop-up geblokkeerd? Manueel naar mcp.vercel.com | | Vercel MCP kan geen project maken | Vercel account permissies — check je teamselect | | Productie-URL geeft 500 | Env vars niet (goed) gezet — `vercel logs --follow` | --- ## Vooruitblik Les 16 Volgende les: RAG met embeddings. PDF Q&A app from scratch. Studenten moeten Polderfest MCP live hebben op Vercel + vier MCP-servers gekoppeld in Cursor.