# Les 15: MCP — Model Context Protocol

> ✅ **Deze les is volledig uitgewerkt**

## Lesmateriaal

- [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)

---

## Deel
**Deel 3 — AI Development** (Les 11-16)

## Beschrijving
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 + 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 (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
- `@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, na pauze, ±1,5 uur)

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

**Spiekbriefje:** `polderfest-mcp-finished.zip` voor wie vastloopt.

---

## Huiswerk (take-home, vóór Les 16)

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-URL + korte beschrijving + 2 screenshots (tool-call + output).

---

## Leerdoelen
Na deze les kan de student:
- 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