Les 15: MCP — Model Context Protocol

✅ Deze les is volledig uitgewerkt

Lesmateriaal

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)

Polderfest MCP server code walkthrough
Lokaal draaien — npm install, env vars, npm run dev
Koppelen in Cursor via .cursor/mcp.json
Vragen stellen in Cursor chat → tool-calls via MCP
Deploy naar Vercel met env vars
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:

Starter uitpakken + npm install + env vars (uit Les 11/12)
Twee tools zelf invullen: getStageSchedule + getWeather
Lokaal testen via Cursor (.cursor/mcp.json met localhost)
Pushen naar GitHub
Deployen naar Vercel met env vars
.cursor/mcp.json updaten naar productie-URL
Drie vragen stellen in Cursor — screenshots maken
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

3.3 KiB Raw Blame History