rubberducky/novi-lessons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: les

Browse Source
This commit is contained in:
Tim Rijkse
2026-06-17 07:15:32 +02:00
parent c023192113
commit ad8b25e70c
115 changed files with 6316 additions and 16971 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
Samenvattingen/Les03-Samenvatting.md
View File

@@ -1,104 +1,67 @@
# Les 3: Cursor Setup & Basics
# Les 3: Cursor Basics
> ✅ **Les gegeven op woensdag 26 februari 2026**
>
> Lesmateriaal volledig uitgewerkt:
> - [Slide-Overzicht](../Les03-Cursor-Basics/Les03-Slide-Overzicht.md)
> - [Lesplan](../Les03-Cursor-Basics/Les03-Lesplan.md)
> - [Docenttekst](../Les03-Cursor-Basics/Les03-Docenttekst.md)
> - [Keynote Notes](../Les03-Cursor-Basics/Les03-Docenttekst-Notes.md)
> - [Lesopdracht](../Les03-Cursor-Basics/Les03-Bijlage-A-Lesopdracht.md)
> - [Huiswerkopdracht](../Les03-Cursor-Basics/Les03-Bijlage-B-Huiswerkopdracht.md)
> - [Hands-On Opdracht (PDF)](../Les03-Cursor-Basics/Les03-Hands-On-Opdracht.pdf)
> - [Huiswerkopdracht (PDF)](../Les03-Cursor-Basics/Les03-Huiswerkopdracht.pdf)
> - Debug Challenge zips: standaard (5 fouten), hard (12 fouten), super hard (18 fouten)
> ✅ **Deze les is volledig uitgewerkt**
## Lesmateriaal
- [Slide Overzicht](../Les03-Cursor-Basics/Les03-Slide-Overzicht.md)
- [Docenttekst](../Les03-Cursor-Basics/Les03-Docenttekst.md)
- [Docenttekst Autocue](../Les03-Cursor-Basics/Les03-Docenttekst-Autocue.md)
- [Lesstof](../Les03-Cursor-Basics/Les03-Lesstof.md)
- [Lesopdracht](../Les03-Cursor-Basics/Les03-Lesopdracht.md)
---
## Deel
**Deel 1 — AI Foundations** (Les 1-3)
## Context
Oorspronkelijk zou les 3 gaan over AI Ethics, Privacy & Security. Tim heeft besloten om in plaats daarvan een praktische les over Cursor te geven. Dit sluit beter aan bij wat studenten nodig hebben en was een goede keuze — studenten waren enthousiast.
## Beschrijving
Praktische les over Cursor als primaire AI-powered editor. Studenten leren Cursor installeren, configureren en gebruiken om een compleet Next.js project op te zetten.
Praktische introductie van Cursor als de AI-powered editor voor de rest van de opleiding. Studenten activeren hun gratis Pro Student plan via cursor.com/students, configureren Skills/Docs voor Next.js + React + Tailwind, en bouwen hun eerste Hero-component met de drie hoofdsneltoetsen (Tab, Cmd+K, Cmd+L).
---
## Te Behandelen
### Blok 1: Cursor Overzicht (15 min)
- Wat is Cursor? VS Code fork met AI
- Free vs Pro vs Student Plan (500 fast requests/maand)
- Request types: Tab Completion (gratis), Chat, Composer, Inline Edit (elk 1 request)
### Theorie + demo (klassikaal)
- Wat is Cursor? VS Code-fork met AI ingebouwd
- Student Plan via cursor.com/students (500 fast requests/maand)
- Installatie + Pro Student verificatie
- Skills/Docs: Next.js, React, Tailwind toevoegen
- Eerste project via `npx create-next-app@latest`
- De drie hoofdsneltoetsen:
- **Tab** — auto-completion (gratis, onbeperkt)
- **Cmd+K** — inline edit (1 request per gebruik)
- **Cmd+L** — chat-paneel (1 request per nieuwe context)
- Context via `@`-mentions (file, folder, code, docs, web, git)
- Request management (500/maand slim besteden)
- `.cursorrules` introductie
### Blok 2: Samen Doen — Setup Check (10 min)
- Terminal check: node -v, git --version, npm -v, npx -v
- Cursor Student Plan activeren via cursor.com/students
### Blok 3: Cursor Skills & Docs (10 min)
- Settings → Features → Docs: Next.js, React, Tailwind toevoegen
- @docs mentions in Chat voor framework-specifieke hulp
### Blok 4: Nieuw Project Aanmaken (15 min)
- git init → npx create-next-app@latest
- TypeScript, Tailwind, App Router, src/ directory
### Blok 5: .cursorrules Genereren (10 min)
- Via Cursor Chat (Ctrl+L / Cmd+L) — kost 1 request
- Project-specifieke regels voor Next.js, Tailwind, TypeScript
### Blok 6: Keyboard Shortcuts & Request Management (15 min)
- Tab = gratis autocomplete
- Ctrl+K / Cmd+K = Inline Edit (1 request)
- Ctrl+L / Cmd+L = Chat (1 request)
- Ctrl+I / Cmd+I = Composer (1 request)
- Slim combineren van taken in 1 prompt
### Pauze (15 min)
### Blok 7: Hands-On — Bouw Componenten (75 min)
- Taak 1: Hero Component via Composer
- Taak 2: Styling tweaken via Inline Edit
- Taak 3: Extra feature naar keuze (FeatureCards, ContactForm, of Footer)
- Git commit
- Verder bouwen voor wie klaar is
### Live demo's
1. Vanaf nul `npx create-next-app` + Cursor openen
2. Skills/Docs configureren
3. Hero-component bouwen via Cmd+L
4. Styling-tweak via Cmd+K
---
## Tools
- Cursor (Student Plan — gratis Pro voor studenten)
- Git & GitHub
- Node.js + npx
- Next.js, TypeScript, Tailwind CSS
- Cursor (Pro Student plan, gratis voor NOVI-studenten)
- Node.js + `npx`
- Next.js (App Router) + TypeScript + Tailwind CSS
- Git
---
## Lesopdracht (75 min — hands-on na pauze)
Beschikbaar als losse PDF: [Les03-Hands-On-Opdracht.pdf](../Les03-Cursor-Basics/Les03-Hands-On-Opdracht.pdf)
## Lesopdracht (na pauze, ±75 minuten)
Stappen:
1. Nieuw project aanmaken (git init, npx create-next-app, npm run dev)
2. Cursor configureren (Skills/Docs, .cursorrules genereren)
3. Componenten bouwen (Hero via Composer, styling via Inline Edit, extra feature)
4. Git commit
Studenten bouwen in hun eigen gescaffolde project:
1. `.cursorrules` genereren via Cmd+L
2. Hero-component bouwen (Cmd+L met specifieke prompt)
3. Styling-tweak op de CTA-knoppen (Cmd+K)
4. Eén extra feature naar keuze: FeatureCards / ContactForm / Footer
5. Eerste git commit
---
## Huiswerk: Debug Challenge
Studenten krijgen een intentioneel kapot Next.js project en moeten het repareren met Cursor. Drie moeilijkheidsniveaus:
| Niveau | Fouten | Categorieën | Geschatte tijd |
|--------|--------|-------------|----------------|
| **Standaard** | 5 | Missing deps, typos, missing imports, inline styles → Tailwind | 1.5-2 uur |
| **Hard** | 12 | + logische fouten, React anti-patterns, useEffect bugs | 2-3 uur |
| **Super Hard** | 18 | + Next.js Server/Client, circular deps, TypeScript, Context | 3-4 uur |
Inleveren via Teams: GitHub link + screenshot + beschrijving van gefixt fouten.
Deadline: Vóór Les 4.
**Inleveren:** screenshot van `localhost:3000` + welke optie (A/B/C) gekozen.
---
@@ -106,9 +69,10 @@ Deadline: Vóór Les 4.
Na deze les kan de student:
- Cursor installeren en het Student Plan activeren
- Skills/Docs configureren voor Next.js, React en Tailwind
- Een .cursorrules bestand genereren via Cursor Chat
- Een nieuw Next.js project opzetten met npx create-next-app
- De keyboard shortcuts (Tab, Ctrl+K, Ctrl+L, Ctrl+I) toepassen
- Requests efficiënt beheren door taken te combineren
- Componenten bouwen met Composer en Inline Edit
- Fouten debuggen met behulp van Cursor
- Een nieuw Next.js project opzetten via `npx create-next-app`
- De drie hoofdsneltoetsen (Tab, Cmd+K, Cmd+L) actief gebruiken
- Context-mentions toepassen in chat (`@file`, `@folder`, `@docs`)
- Requests efficiënt beheren door taken te combineren in één prompt
- Een `.cursorrules`-bestand schrijven voor zijn project
- Componenten bouwen via Cmd+L en bijwerken via Cmd+K
- Een eerste git commit maken na een AI-gestuurde build

93
Samenvattingen/Les14-Samenvatting.md
View File

@@ -1,14 +1,14 @@
# Les 14: Agents — LLM in een loop met tools
# Les 14: Cursor + Vercel — van leeg project naar preview-deploys
> ✅ **Deze les is volledig uitgewerkt**
## Lesmateriaal
- [Slide Overzicht](../Les14-Agents/Les14-Slide-Overzicht.md)
- [Docenttekst](../Les14-Agents/Les14-Docenttekst.md)
- [Lesstof](../Les14-Agents/Les14-Lesstof.md)
- [Lesopdracht](../Les14-Agents/Les14-Lesopdracht.md)
- [Huiswerk](../Les14-Agents/Les14-Huiswerk.md)
- [Slide Overzicht](../Les14-Cursor-Vercel-Deploy/Les14-Slide-Overzicht.md)
- [Docenttekst](../Les14-Cursor-Vercel-Deploy/Les14-Docenttekst.md)
- [Docenttekst Autocue](../Les14-Cursor-Vercel-Deploy/Les14-Docenttekst-Autocue.md)
- [Lesstof](../Les14-Cursor-Vercel-Deploy/Les14-Lesstof.md)
- [Lesopdracht](../Les14-Cursor-Vercel-Deploy/Les14-Lesopdracht.md)
---
@@ -16,62 +16,63 @@
**Deel 3 — AI Development** (Les 11-16)
## Beschrijving
We gaan een stap verder dan multi-step tool calling. Een agent kan 20-50 stappen autonoom uitvoeren, eigen plannen maken en dynamisch bijsturen. We bouwen een research-agent from scratch met `ToolLoopAgent`, `stopWhen` en `prepareStep`.
Online les via Teams. Tim demonstreert live de hele cyclus van een vers `npx create-next-app` project naar een live Vercel-deployment, met Cursor als bouwpartner. We gaan diep op Cursor's features: Chat, Plan, Build, Inline edit, Rules, `AGENTS.md`, en Background agents. Twee features worden in eigen branches gebouwd, elk met preview-URL.
---
## Te Behandelen
### Theorie
- Wat is een agent eigenlijk? (LLM + loop + tools + stopconditie)
- Wanneer wel/niet een agent gebruiken
- AI SDK v6 agent-primitives: `ToolLoopAgent`, `stopWhen`, `prepareStep`
- `prepareStep`: dynamisch model + tools per stap wisselen
- Cost & latency van agents — wat moet je weten?
### Live demo's
1. Setup nieuwe research-agent (los project)
2. Tools: webSearch, fetchPage, summarize, writeReport
3. `stopWhen: stepCountIs(20)` + `hasToolCall("writeReport")`
4. `prepareStep` om Sonnet te gebruiken voor summarize, Haiku voor search
5. Live: vraag de agent een onderwerp te onderzoeken
### Theorie + live demo
- Scaffolden met `npx create-next-app` (alle prompts uitgelegd)
- Git init + GitHub push (via `gh` CLI)
- Vercel project koppelen — productie + preview URLs
- Vercel CLI — `link`, `env pull`, `env add/rm`, `logs`
- Environment variables — drie environments, `NEXT_PUBLIC_` prefix
- Cursor in detail:
- Vier modi: Chat / Plan / Build / Inline
- Context: `@`-mentions (file, folder, code, docs, web, git)
- `.cursor/rules/` met YAML front-matter
- `AGENTS.md` als shared project-context
- Background agents (Kanban-flow)
- Top 7 power-user tips
- Feature-workflow: plan → branch → build → push → preview
- Twee live demo's: hero (plan+build) en about (background agent)
---
## Tools
- Vercel AI SDK v6 (`ToolLoopAgent`, `stopWhen`, `prepareStep`)
- Tavily of Exa API voor web search
- Anthropic + OpenAI providers
- Next.js 16 (App Router)
- Git + GitHub CLI (`gh`)
- Vercel (hobby tier + CLI)
- Cursor (Pro of Business)
---
## Lesopdracht (in-class, 60 min)
## Lesopdracht (na de pauze, ±1,5 uur)
Studenten kijken mee. In-class oefening:
- Voeg een eigen tool toe aan de research-agent
- Tweak de stopconditie: laat de agent na 5 minuten stoppen
- Bekijk de trace: welke stappen koos de agent?
Studenten doorlopen de hele cyclus voor hun eigen project:
1. `npx create-next-app` — eigen onderwerp
2. Push naar eigen GitHub
3. Vercel project + eerste deploy
4. `vercel link` + `vercel env pull`
5. `.cursor/rules/general.mdc` + `AGENTS.md`
6. Feature 1 via Plan + Build
7. Feature 2 via Background agent
8. PR + merge naar productie
**Inleveren:** Screenshot van werkende agent-loop.
---
## Huiswerk (take-home)
Bouw je eigen agent voor een eigen use-case:
- Minimaal 3 tools
- Slimme stop-conditie
- `prepareStep` voor model-routing
- Reflectie 500 woorden: kan dit ook met gewone tool calling?
**Inleveren:** GitHub URL via Teams.
**Inleveren:** productie-URL + tweede preview-URL + PR-URL in de chat.
---
## Leerdoelen
Na deze les kan de student:
- Het verschil uitleggen tussen tool calling en een agent
- Een agent opzetten met `ToolLoopAgent` en custom tools
- Een doordachte stopconditie schrijven met `stopWhen`
- Modellen dynamisch routen per stap via `prepareStep`
- Inschatten wanneer een agent de juiste oplossing is
- Een Next.js project scaffolden met `create-next-app` en zinnige defaults kiezen
- Een lokale repo aan GitHub koppelen (via `gh` CLI of handmatig)
- Een Vercel-project aanmaken via GitHub-import
- Het verschil uitleggen tussen `NEXT_PUBLIC_` en server-only env vars
- Env vars zetten via Vercel UI én via Vercel CLI
- De Cursor CLI `link` + `env pull` workflow uitvoeren
- Cursor's vier interactie-modi inzetten op de juiste momenten
- Een `.cursor/rules/general.mdc` en een `AGENTS.md` schrijven voor zijn project
- Een Background agent inzetten voor parallel werk
- Een feature van Plan tot live preview-URL brengen in onder de 15 minuten

92
Samenvattingen/Les15-Samenvatting.md
View File

@@ -1,14 +1,15 @@
# Les 15: RAG + Embeddings — Praat met je documenten
# Les 15: MCP — Model Context Protocol
> ✅ **Deze les is volledig uitgewerkt**
## Lesmateriaal
- [Slide Overzicht](../Les15-RAG-Embeddings/Les15-Slide-Overzicht.md)
- [Docenttekst](../Les15-RAG-Embeddings/Les15-Docenttekst.md)
- [Lesstof](../Les15-RAG-Embeddings/Les15-Lesstof.md)
- [Lesopdracht](../Les15-RAG-Embeddings/Les15-Lesopdracht.md)
- [Huiswerk](../Les15-RAG-Embeddings/Les15-Huiswerk.md)
- [Slide Overzicht](../Les15-MCP/Les15-Slide-Overzicht.md)
- [Docenttekst](../Les15-MCP/Les15-Docenttekst.md)
- [Docenttekst Autocue](../Les15-MCP/Les15-Docenttekst-Autocue.md)
- [Lesstof](../Les15-MCP/Les15-Lesstof.md)
- [Lesopdracht](../Les15-MCP/Les15-Lesopdracht.md)
- [Huiswerk](../Les15-MCP/Les15-Huiswerk.md)
---
@@ -16,64 +17,71 @@
**Deel 3 — AI Development** (Les 11-16)
## Beschrijving
Hoe laat je een LLM antwoorden op basis van documenten die hij nooit heeft gezien? Antwoord: Retrieval-Augmented Generation (RAG). We bouwen een PDF Q&A-app from scratch met embeddings, vector search (pgvector) en context-injectie.
Bouwt verder op tool calling (Les 12) en agents (Les 13). Met MCP exposeren we onze tools naar EXTERNE AI-clients zoals Cursor en Claude Desktop. We bouwen klassikaal een Polderfest MCP server met vier tools, deployen hem naar Vercel, en koppelen hem in Cursor zodat studenten in chat hun eigen festival-data kunnen bevragen.
---
## Te Behandelen
### Theorie
- Het probleem: LLM kent jouw documenten niet
- Twee oplossingen: alles meesturen vs. RAG
- Wat zijn embeddings? (vectoren, semantische gelijkenis)
- pgvector in Supabase: tabel-setup + index
- De RAG-loop: chunk → embed → store → query → retrieve → answer
- Limieten en valkuilen (chunking, recall vs. precision)
### Theorie + demo (1 uur)
- Het probleem: AI SDK tools leven in jouw app — Cursor/Claude kunnen er niet bij
- Wat is MCP — open protocol van Anthropic, breed geadopteerd
- Drie rollen: Host (Cursor) / Client / Server (jouw code)
- Drie primitives: Tools / Resources / Prompts (focus op tools)
- Transport: stdio vs HTTP/SSE — wij kiezen HTTP/SSE voor Vercel
- Bouwstenen: `@modelcontextprotocol/sdk`, `mcp-handler`, `zod`
### Live demo's
1. Nieuwe Next.js-app + Supabase met pgvector
2. PDF parsen + chunking strategie
3. Embeddings genereren via OpenAI `text-embedding-3-small`
4. Vector-search route + top-K retrieval
5. Chat-interface met context-injectie
### Live demo's (klassikaal)
1. Polderfest MCP server code walkthrough
2. Lokaal draaien — `npm install`, env vars, `npm run dev`
3. Koppelen in Cursor via `.cursor/mcp.json`
4. Vragen stellen in Cursor chat → tool-calls via MCP
5. Deploy naar Vercel met env vars
6. Productie-URL in `.cursor/mcp.json` — werkt zonder lokale dev-server
---
## Tools
- Vercel AI SDK v6
- Supabase + pgvector extension
- OpenAI embeddings API
- pdf-parse / unpdf voor PDF-extractie
- `@modelcontextprotocol/sdk` — officiële MCP SDK
- `mcp-handler` — Vercel adapter voor Next.js API routes
- Zod — input schemas (uit Les 12/13)
- Supabase (bands-tabel uit Les 11/12)
- Open-Meteo API (geen key, uit Les 13)
- Vercel CLI
---
## Lesopdracht (in-class, 60 min)
## Lesopdracht (in-class, na pauze, ±1,5 uur)
Studenten kijken klassikaal mee. In-class oefening:
- Upload een eigen PDF in de demo-app
- Stel 5 vragen — beoordeel de antwoorden
- Probeer een vraag die NIET in de PDF staat: wat gebeurt er?
Studenten krijgen `polderfest-mcp-starter.zip` met twee tools al ingevuld:
1. Starter uitpakken + `npm install` + env vars (uit Les 11/12)
2. Twee tools zelf invullen: `getStageSchedule` + `getWeather`
3. Lokaal testen via Cursor (`.cursor/mcp.json` met localhost)
4. Pushen naar GitHub
5. Deployen naar Vercel met env vars
6. `.cursor/mcp.json` updaten naar productie-URL
7. Drie vragen stellen in Cursor — screenshots maken
8. Productie-URL + screenshots delen in chat
**Inleveren:** Screenshot van Q&A-sessie + reflectie 1 alinea.
**Spiekbriefje:** `polderfest-mcp-finished.zip` voor wie vastloopt.
---
## Huiswerk (take-home)
## Huiswerk (take-home, vóór Les 16)
Bouw een eigen RAG-app:
- Eigen dataset (handleidingen, notities, eigen blog)
- Werkende vector-search met pgvector
- Chat-UI met source-attribution (welke chunks gebruikt?)
- Deploy naar Vercel
Voeg minimaal één eigen tool toe aan je Polderfest MCP server. Ideeën: `findBandsByVibe`, `comparePerformances`, `recommendForGenres`, `getBandDetails`, `searchByTimeSlot`. Push + Vercel deploy't automatisch. Test in Cursor.
**Inleveren:** GitHub + Vercel URL.
**Inleveren:** GitHub-URL + korte beschrijving + 2 screenshots (tool-call + output).
---
## Leerdoelen
Na deze les kan de student:
- Het RAG-pattern uitleggen aan een collega
- pgvector configureren in Supabase
- PDF-content chunken en embedden
- Een werkende vector-search query schrijven
- Bepalen wanneer RAG vs. alles-meesturen vs. fine-tuning past
- Uitleggen wat MCP is en welk probleem het oplost t.o.v. AI SDK tools
- Het verschil tussen host, client en server beschrijven
- De drie primitives (tools / resources / prompts) onderscheiden
- Een MCP server met `mcp-handler` + Zod schema's bouwen in Next.js
- Een MCP server koppelen aan Cursor via `.cursor/mcp.json`
- Een MCP server deployen naar Vercel met env vars
- Een eigen tool toevoegen aan een bestaande MCP server (huiswerk)
- Inschatten wanneer MCP de juiste keuze is t.o.v. AI SDK tools

77
Samenvattingen/Les16-Samenvatting.md
View File

@@ -1,14 +1,14 @@
# Les 16: Model Context Protocol — Bouw je eigen MCP-server
# Les 16: RAG + Embeddings — Praat met je documenten
> ✅ **Deze les is volledig uitgewerkt**
## Lesmateriaal
- [Slide Overzicht](../Les16-MCP/Les16-Slide-Overzicht.md)
- [Docenttekst](../Les16-MCP/Les16-Docenttekst.md)
- [Lesstof](../Les16-MCP/Les16-Lesstof.md)
- [Lesopdracht](../Les16-MCP/Les16-Lesopdracht.md)
- [Huiswerk](../Les16-MCP/Les16-Huiswerk.md)
- [Slide Overzicht](../Les16-RAG-Embeddings/Les16-Slide-Overzicht.md)
- [Docenttekst](../Les16-RAG-Embeddings/Les16-Docenttekst.md)
- [Lesstof](../Les16-RAG-Embeddings/Les16-Lesstof.md)
- [Lesopdracht](../Les16-RAG-Embeddings/Les16-Lesopdracht.md)
- [Huiswerk](../Les16-RAG-Embeddings/Les16-Huiswerk.md)
---
@@ -16,65 +16,64 @@
**Deel 3 — AI Development** (Les 11-16)
## Beschrijving
MCP (Model Context Protocol) is de open standaard waarmee Anthropic, OpenAI en de community AI-clients koppelen aan tools en data. We bouwen een eigen MCP-server voor Polderfest-data en laden hem in Cursor én Claude Desktop.
Hoe laat je een LLM antwoorden op basis van documenten die hij nooit heeft gezien? Antwoord: Retrieval-Augmented Generation (RAG). We bouwen een PDF Q&A-app from scratch met embeddings, vector search (pgvector) en context-injectie.
---
## Te Behandelen
### Theorie
- Wat is MCP en waarom bestaat het?
- Het probleem: tools zitten nu vast aan één app
- MCP-architectuur: server, client, transport (stdio, HTTP)
- Tools vs. Resources vs. Prompts
- Bestaande MCP-ecosysteem (filesystem, git, Slack, GitHub)
- MCP vs. Tool Calling — wanneer welke?
- Het probleem: LLM kent jouw documenten niet
- Twee oplossingen: alles meesturen vs. RAG
- Wat zijn embeddings? (vectoren, semantische gelijkenis)
- pgvector in Supabase: tabel-setup + index
- De RAG-loop: chunk → embed → store → query → retrieve → answer
- Limieten en valkuilen (chunking, recall vs. precision)
### Live demo's
1. MCP SDK installeren + eerste server met 1 tool
2. Server laden in Cursor + in Claude Desktop
3. Eigen Polderfest MCP-server (search, stats, schedule)
4. Resources en Prompts toevoegen
5. Server publiceren op npm
1. Nieuwe Next.js-app + Supabase met pgvector
2. PDF parsen + chunking strategie
3. Embeddings genereren via OpenAI `text-embedding-3-small`
4. Vector-search route + top-K retrieval
5. Chat-interface met context-injectie
---
## Tools
- `@modelcontextprotocol/sdk` (TypeScript)
- Cursor (`.cursor/mcp.json`)
- Claude Desktop (`claude_desktop_config.json`)
- Node.js + TypeScript
- Vercel AI SDK v6
- Supabase + pgvector extension
- OpenAI embeddings API
- pdf-parse / unpdf voor PDF-extractie
---
## Lesopdracht (in-class, 60 min)
Studenten kijken mee. In-class oefening:
- Clone de Polderfest MCP-starter
- Voeg een eigen tool toe (`getBandByCountry`)
- Laad de server in Cursor of Claude Desktop
- Test of de AI je tool vindt en gebruikt
Studenten kijken klassikaal mee. In-class oefening:
- Upload een eigen PDF in de demo-app
- Stel 5 vragen — beoordeel de antwoorden
- Probeer een vraag die NIET in de PDF staat: wat gebeurt er?
**Inleveren:** Screenshot van werkende MCP-tool in Cursor/Claude.
**Inleveren:** Screenshot van Q&A-sessie + reflectie 1 alinea.
---
## Huiswerk (take-home)
Bouw een MCP-server voor je eigen domein:
- Minimaal 3 tools
- 1 resource (bijv. een doc-bestand)
- 1 prompt-template
- README met installatie-instructies voor Cursor
Bouw een eigen RAG-app:
- Eigen dataset (handleidingen, notities, eigen blog)
- Werkende vector-search met pgvector
- Chat-UI met source-attribution (welke chunks gebruikt?)
- Deploy naar Vercel
**Inleveren:** GitHub URL via Teams.
**Inleveren:** GitHub + Vercel URL.
---
## Leerdoelen
Na deze les kan de student:
- MCP uitleggen aan een collega (waarom + hoe)
- Een eigen MCP-server opzetten met de TypeScript SDK
- Een server laden in Cursor en/of Claude Desktop
- Het verschil tussen Tool, Resource en Prompt benoemen
- Bepalen wanneer een MCP-server vs. inline tool calling past
- Het RAG-pattern uitleggen aan een collega
- pgvector configureren in Supabase
- PDF-content chunken en embedden
- Een werkende vector-search query schrijven
- Bepalen wanneer RAG vs. alles-meesturen vs. fine-tuning past