405 lines
11 KiB
Markdown
405 lines
11 KiB
Markdown
# Les 15 — MCP (Model Context Protocol)
|
||
## Slide Overzicht (Klas A — 3 uur fysiek, demo + hands-on)
|
||
|
||
**Lesvorm:** ±1 uur theorie + live demos (veel koppelen, weinig zelf coderen), daarna ±1,5 uur hands-on
|
||
**Demo-MCPs:** GitHub MCP, Supabase MCP, Vercel MCP (bestaand) + Polderfest MCP (eigen)
|
||
**Vervolg op:** Les 13 — Agents (Polderfest agent met 5 tools)
|
||
**Aansluit op:** Les 16 — RAG + Embeddings
|
||
|
||
---
|
||
|
||
## Blok-structuur
|
||
|
||
| Blok | Onderwerp | Slides |
|
||
|------|-----------|--------|
|
||
| 1 | Welkom + Vandaag | 1–2 |
|
||
| 2 | Wat is MCP + ecosysteem | 3–6 |
|
||
| 3 | Vier MCPs koppelen — live | 7–10 |
|
||
| 4 | Polderfest MCP — eigen server | 11–13 |
|
||
| 5 | LIVE — De drie chats workflow | 14–17 |
|
||
| 6 | Lesopdracht + Extra + Vooruitblik | 18–20 |
|
||
|
||
---
|
||
|
||
## Slide 1: Title
|
||
### Les 15 — MCP
|
||
|
||
**Visual:**
|
||
- Background: CREAM
|
||
- "Les 15" in BLUE
|
||
- "Model Context Protocol" in BLACK
|
||
- Subtitle: "Geef AI-clients superkrachten via standard-tools"
|
||
- Iconen: GitHub + Supabase + Vercel + Polderfest
|
||
|
||
---
|
||
|
||
## Slide 2: Vandaag
|
||
### Drie blokken + climax
|
||
|
||
**Wat we vandaag doen:**
|
||
1. **Theorie** — wat is MCP, waarom bestaat het (kort)
|
||
2. **Vier MCPs koppelen** — GitHub, Supabase, Vercel, Polderfest
|
||
3. **De drie chats workflow** — alles samen aan het werk
|
||
|
||
**Climax (in drie chats):**
|
||
- Chat 1: GitHub MCP maakt repo + voegt remote toe
|
||
- Chat 2: Polderfest features bouwen via Cursor + Supabase MCP
|
||
- Chat 3: Vercel MCP project + deploy
|
||
|
||
Vandaag is dus meer koppelen en zien dan zelf coderen.
|
||
|
||
---
|
||
|
||
## Slide 3: Wat is MCP
|
||
### Eén standaard, vele clients
|
||
|
||
**Model Context Protocol legt vast:**
|
||
- Hoe AI-clients verbinding maken met tools en data
|
||
- Hoe servers tools, resources en prompts beschrijven
|
||
- Hoe data heen-en-weer stroomt over een transport
|
||
|
||
**Open spec — geen vendor lock-in:**
|
||
- Gestart door Anthropic (november 2024)
|
||
- Cursor, Claude Desktop, OpenAI, Windsurf, Zed ondersteunen het
|
||
|
||
**Analogie:** USB-C voor AI. Eén stekker, elke laptop.
|
||
|
||
---
|
||
|
||
## Slide 4: Het probleem
|
||
### Voor MCP
|
||
|
||
| Voor MCP | Met MCP |
|
||
|----------|---------|
|
||
| Cursor: extension API | Eén MCP-server |
|
||
| Claude Desktop: plugins | Cursor: werkt |
|
||
| ChatGPT: GPTs/Actions | Claude Desktop: werkt |
|
||
| Windsurf: eigen API | ChatGPT: werkt |
|
||
| Zed: eigen API | Windsurf: werkt |
|
||
| **= 5 integraties** | **= 1 integratie** |
|
||
|
||
Dezelfde tool, één keer bouwen, overal beschikbaar.
|
||
|
||
---
|
||
|
||
## Slide 5: Architectuur + primitives
|
||
### MCP in één plaatje
|
||
|
||
**Drie rollen:**
|
||
|
||
| Rol | Voorbeeld |
|
||
|-----|-----------|
|
||
| **Host** | Cursor, Claude Desktop |
|
||
| **Client** | MCP library (zit in host) |
|
||
| **Server** | GitHub MCP, jouw Polderfest |
|
||
|
||
**Drie primitives:**
|
||
|
||
| Primitive | Wat |
|
||
|-----------|-----|
|
||
| **Tools** | functies (AI doet iets) |
|
||
| **Resources** | read-only data |
|
||
| **Prompts** | templates / persona's |
|
||
|
||
Vandaag focus op tools.
|
||
|
||
---
|
||
|
||
## Slide 6: Het MCP-ecosysteem
|
||
### Honderden servers beschikbaar
|
||
|
||
**Top servers:**
|
||
|
||
| Server | Wat je krijgt |
|
||
|--------|---------------|
|
||
| GitHub | issues, PRs, repos, commits |
|
||
| Supabase | DB queries, schema, migrations |
|
||
| Vercel | projects aanmaken, deploys |
|
||
| Filesystem | lees/schrijf in folders |
|
||
| Slack / Linear / Jira | werk-tickets |
|
||
| Brave Search / Notion / Postgres | enz. |
|
||
|
||
Vandaag koppelen we **vier** in Cursor: GitHub, Supabase, Vercel — en onze eigen Polderfest.
|
||
|
||
---
|
||
|
||
## Slide 7: Vier MCPs vandaag
|
||
### Het overzicht
|
||
|
||
| MCP | Type | Auth |
|
||
|-----|------|------|
|
||
| **GitHub** | HTTP (remote) | Bearer (PAT) |
|
||
| **Supabase** | HTTP (remote) | Bearer (sbp_-token) |
|
||
| **Vercel** | HTTP (remote) | OAuth (browser-flow) |
|
||
| **Polderfest** | HTTP (lokaal) | geen (jouw eigen server) |
|
||
|
||
**Alle vier in één `mcp.json`** — zelfde patroon, andere URLs.
|
||
|
||
**Visual:** vier logo's met een pijl naar Cursor.
|
||
|
||
---
|
||
|
||
## Slide 8: De `mcp.json` config
|
||
### `~/.cursor/mcp.json` — globaal
|
||
|
||
```jsonc
|
||
{
|
||
"mcpServers": {
|
||
"supabase": {
|
||
"type": "http",
|
||
"url": "https://mcp.supabase.com/mcp?project_ref=<jouw-ref>&read_only=true",
|
||
"headers": { "Authorization": "Bearer sbp_..." }
|
||
},
|
||
"github": {
|
||
"type": "http",
|
||
"url": "https://api.githubcopilot.com/mcp/",
|
||
"headers": { "Authorization": "Bearer ghp_..." }
|
||
},
|
||
"vercel": {
|
||
"type": "http",
|
||
"url": "https://mcp.vercel.com"
|
||
},
|
||
"polderfest": {
|
||
"type": "http",
|
||
"url": "http://localhost:3000/api/mcp"
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
Eén patroon: `type: http` + `url` + optioneel `headers`. Vercel doet OAuth.
|
||
|
||
---
|
||
|
||
## Slide 9: Tokens regelen
|
||
### Drie tokens, één OAuth
|
||
|
||
**GitHub PAT (fine-grained):**
|
||
- github.com → Settings → Developer settings → Personal access tokens → Fine-grained
|
||
- Repo-permissies: Contents + Issues + Pull requests (read+write)
|
||
- Token begint met `ghp_...`
|
||
|
||
**Supabase Personal Access Token:**
|
||
- supabase.com → Account → Access Tokens → Generate
|
||
- ⚠️ Account-level — NIET project anon key / service role
|
||
- Token begint met `sbp_...`
|
||
- `project_ref` haal je uit Supabase project URL
|
||
|
||
**Vercel:** geen token vooraf. Bij eerste gebruik in Cursor → OAuth-prompt → toestaan.
|
||
|
||
---
|
||
|
||
## Slide 10: Live koppelen + check
|
||
### Vier stappen
|
||
|
||
**1.** `mkdir -p ~/.cursor && nano ~/.cursor/mcp.json`
|
||
**2.** Plak de JSON van slide 8 + vul je tokens in
|
||
**3.** **Volledig herstart Cursor** (`Cmd+Q`, opnieuw openen)
|
||
**4.** Open een chat — onderaan MCP-indicator → moet **4 servers groen** tonen
|
||
|
||
**Voor Vercel:** klik op "Needs login" → OAuth-flow → autoriseer
|
||
|
||
**Visual:** screenshot van 4 groene indicators.
|
||
|
||
---
|
||
|
||
## Slide 11: Polderfest MCP
|
||
### Onze eigen server
|
||
|
||
`polderfest-mcp-finished.zip` bevat een complete Next.js-app:
|
||
|
||
```
|
||
polderfest-mcp/
|
||
├── app/
|
||
│ ├── api/mcp/route.ts ← MCP server zelf
|
||
│ ├── lib/supabase.ts ← Supabase client
|
||
│ ├── page.tsx ← landingspagina
|
||
│ └── layout.tsx
|
||
├── package.json ← mcp-handler + sdk + zod
|
||
├── .env.example
|
||
└── README.md
|
||
```
|
||
|
||
**Vier tools:** `searchBands` · `getStageSchedule` · `festivalStats` · `getWeather`
|
||
|
||
---
|
||
|
||
## Slide 12: Code-tour
|
||
### Eén tool — anatomie
|
||
|
||
```typescript
|
||
server.tool(
|
||
"searchBands",
|
||
"Zoek bands op query, genre, of dag.",
|
||
{
|
||
query: z.string().optional(),
|
||
genre: z.string().optional(),
|
||
day: z.enum(["vrijdag","zaterdag","zondag"]).optional(),
|
||
},
|
||
async ({ query, genre, day }) => {
|
||
let q = supabase.from("bands").select("*").limit(50);
|
||
if (query) q = q.ilike("name", `%${query}%`);
|
||
if (day) q = q.eq("day", capitalizeDay(day));
|
||
const { data } = await q;
|
||
return { content: [{ type: "text", text: JSON.stringify(data) }] };
|
||
},
|
||
);
|
||
```
|
||
|
||
**Bekend:** Zod (uit Les 12/13). **Nieuw:** `server.tool()` + content-array.
|
||
|
||
---
|
||
|
||
## Slide 13: Lokaal draaien
|
||
### Drie commando's
|
||
|
||
```bash
|
||
unzip polderfest-mcp-finished.zip
|
||
cd polderfest-mcp-finished
|
||
npm install
|
||
cp .env.example .env.local
|
||
# vul SUPABASE_URL + SERVICE_ROLE_KEY (uit Les 11/12)
|
||
npm run dev
|
||
```
|
||
|
||
- Landingspagina: `localhost:3000`
|
||
- MCP endpoint: `localhost:3000/api/mcp`
|
||
- Polderfest entry zit al in `mcp.json` — herstart Cursor → 4 servers groen
|
||
|
||
---
|
||
|
||
## Slide 14: De drie chats workflow
|
||
### Demo overview — alles samen
|
||
|
||
**Drie aparte Cursor-chats. Elke chat = één doel:**
|
||
|
||
| Chat | MCP | Doel |
|
||
|------|-----|------|
|
||
| **Chat 1** | GitHub MCP | Maak GitHub repo + voeg toe als remote |
|
||
| **Chat 2** | Polderfest + Supabase MCP | Bouw een nieuwe feature in onze MCP-server |
|
||
| **Chat 3** | Vercel MCP | Maak Vercel project + deploy + env vars |
|
||
|
||
**Resultaat:** complete deploy van een nieuwe feature, vanaf je editor, zonder browser of CLI-commando's.
|
||
|
||
**Visual:** flow-diagram drie chats → één live productie-URL.
|
||
|
||
---
|
||
|
||
## Slide 15: Chat 1 — GitHub MCP
|
||
### Repo aanmaken + remote toevoegen
|
||
|
||
**Cursor chat 1 — prompt:**
|
||
|
||
```
|
||
Maak een nieuwe public GitHub repo "polderfest-mcp" aan
|
||
via GitHub MCP. Voeg toe als remote `origin` aan deze folder.
|
||
Push de main branch.
|
||
```
|
||
|
||
**Wat er gebeurt:**
|
||
- GitHub MCP roept `create_repository` aan → krijgt URL terug
|
||
- Cursor draait `git remote add origin <url>` in terminal
|
||
- Cursor draait `git push -u origin main`
|
||
- Open github.com → repo staat er met onze code
|
||
|
||
**Geen browser. Geen `gh repo create` zelf typen.**
|
||
|
||
---
|
||
|
||
## Slide 16: Chat 2 — Polderfest features
|
||
### Bouw via Cursor + Supabase MCP
|
||
|
||
**Cursor chat 2 — prompt (nieuwe chat!):**
|
||
|
||
```
|
||
Ik wil een review-systeem voor de Polderfest MCP.
|
||
|
||
Stap 1: vraag Supabase MCP om een tabel `band_reviews` te maken
|
||
(id, band_id FK naar bands, score 1-10, comment, created_at)
|
||
Stap 2: voeg twee tools toe aan @file:app/api/mcp/route.ts:
|
||
- addReview(bandName, score, comment)
|
||
- getReviews(bandName)
|
||
Gebruik dezelfde patroon als bestaande tools.
|
||
```
|
||
|
||
**Test live in dezelfde chat:**
|
||
- *"Geef Maud and The Cathedrals een review: 9, episch."*
|
||
- *"Toon alle reviews voor Maud and The Cathedrals."*
|
||
|
||
→ Polderfest MCP voert addReview en getReviews uit.
|
||
|
||
---
|
||
|
||
## Slide 17: Chat 3 — Vercel MCP
|
||
### Project + deploy + env vars
|
||
|
||
**Cursor chat 3 — prompt (nieuwe chat!):**
|
||
|
||
```
|
||
Maak via Vercel MCP een nieuw Vercel-project voor mijn
|
||
GitHub repo `polderfest-mcp`. Voeg toe als env vars (production):
|
||
- SUPABASE_URL = <plak>
|
||
- SUPABASE_SERVICE_ROLE_KEY = <plak>
|
||
Daarna: deploy naar productie en geef me de URL terug.
|
||
```
|
||
|
||
**Resultaat:** je krijgt een productie-URL terug — `polderfest-mcp-<scope>.vercel.app/api/mcp`.
|
||
|
||
**Tot slot:** vervang in `mcp.json` de polderfest-URL `localhost:3000` door de productie-URL. Herstart Cursor → werkt nu **zonder** dat npm run dev draait.
|
||
|
||
---
|
||
|
||
## Slide 18: Nu jullie — Lesopdracht
|
||
### Doorloop de hele flow zelf
|
||
|
||
**Stappen (basis, ±1 uur):**
|
||
|
||
1. Pak `polderfest-mcp-finished.zip` uit + `npm install` + env vars
|
||
2. `npm run dev` — test lokaal
|
||
3. Voeg vier MCPs toe aan `~/.cursor/mcp.json` (template in lesbestanden)
|
||
4. Herstart Cursor — check 4 indicators groen
|
||
5. **Chat 1:** GitHub MCP → repo aanmaken + remote
|
||
6. **Chat 2:** Test Polderfest MCP met een paar vragen
|
||
7. **Chat 3:** Vercel MCP → project + deploy
|
||
8. Update mcp.json met productie-URL → herstart Cursor → werkt zonder localhost
|
||
|
||
**Geen deliverables.** Gewoon doen tot het werkt.
|
||
|
||
---
|
||
|
||
## Slide 19: Extra werk
|
||
### Voeg een eigen feature toe
|
||
|
||
**Voor wie sneller is.** Doe wat Tim in Chat 2 deed — voor je eigen idee.
|
||
|
||
**Patroon:**
|
||
1. Supabase MCP → tabel + seed-data via Cursor
|
||
2. Cursor → genereer nieuwe tool(s) in `route.ts`
|
||
3. Push → Vercel deploy't automatisch (omdat het project gekoppeld is)
|
||
4. Test in Cursor chat
|
||
|
||
**Ideeën:**
|
||
- `addReview` + `getReviews` (zoals de demo)
|
||
- `addToWishlist` + `getMyWishlist`
|
||
- `rateStage` + `getStageRatings`
|
||
- `addNote` + `getNotes`
|
||
|
||
**Geen deliverables.**
|
||
|
||
---
|
||
|
||
## Slide 20: Volgende les
|
||
### Les 16 — RAG + Embeddings
|
||
|
||
**Wat we gaan bouwen:**
|
||
- PDF Q&A-app from scratch
|
||
- Embeddings + vector search (pgvector)
|
||
- AI antwoorden op basis van eigen documenten
|
||
|
||
**Voorbereiding:**
|
||
- Polderfest MCP staat live op Vercel
|
||
- Vier MCPs gekoppeld in Cursor — github, supabase, vercel, polderfest
|
||
- Supabase project blijft draaien — we breiden uit met pgvector
|
||
|
||
**Visual:** document → vector → AI.
|