This commit is contained in:
2026-06-17 07:15:32 +02:00
parent c023192113
commit ad8b25e70c
115 changed files with 6316 additions and 16971 deletions

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