# Les 15: MCP & Context Management

---

## Hoofdstuk
**Deel 4: Advanced AI Features** (Les 13-18)

## Beschrijving
Leer werken met Model Context Protocol (MCP) en geavanceerd context management. Begrijp hoe je AI tools maximale context geeft voor betere resultaten.

---

## Te Behandelen

### Groepsdiscussie (15 min)
Bespreek klassikaal de project setup ervaringen uit Les 14 - welke structuur conventies werken goed en welke niet?

### Wat is Context?

**Context = wat de AI weet over jouw situatie**

**Soorten context:**
- **Code context:** welke files, welke functies
- **Project context:** tech stack, conventies
- **Taak context:** wat je probeert te bereiken
- **Historische context:** eerdere conversatie

**Meer context = betere antwoorden**

---

### Model Context Protocol (MCP)

**Wat is MCP?**
- Open protocol van Anthropic
- Standaard manier om AI models context te geven
- Verbindt AI met externe tools en data

**Waarom MCP?**
- AI kan nu "tools gebruiken"
- Toegang tot je filesystem
- Database queries uitvoeren
- Web searches doen
- En meer...

**Hoe werkt het:**
```
Jij → vraag → AI → MCP → Tool → resultaat → AI → antwoord → Jij
```

---

### MCP in de Praktijk

**Cursor gebruikt MCP onder de hood:**
- `@file` mentions = file context via MCP
- `@codebase` = codebase search via MCP
- `@Docs` = documentation lookup via MCP
- `@Web` = web search via MCP

**Claude Desktop met MCP:**
- Kan tools uitvoeren
- Filesystem access
- Terminal commands
- Database queries

---

### Context Management Strategieën

**1. Expliciete Context**
Geef context direct in je prompt:
```
Context: Next.js 14 project met TypeScript en Supabase.
Dit is een e-commerce app voor verkoop van boeken.

Vraag: Hoe implementeer ik een winkelwagen?
```

**2. File Context**
Gebruik @ mentions om relevante files toe te voegen:
```
@src/types/product.ts
@src/lib/supabase.ts
Hoe maak ik een addToCart functie?
```

**3. Project Context**
Gebruik .cursorrules of Claude Project instructions:
```
# In .cursorrules
Dit project is een e-commerce platform.
Alle prices zijn in cents (niet euros).
```

**4. Fresh Context**
Begin nieuwe chat voor nieuw onderwerp:
- Voorkomt context vervuiling
- AI raakt niet in de war met oude info

---

### @ Mentions Strategisch Gebruiken

**Cursor @ mentions:**

| Mention | Wanneer | Voorbeeld |
|---------|---------|-----------|
| `@file.tsx` | Specifieke file context | `@Button.tsx hoe voeg ik loading toe?` |
| `@folder/` | Hele folder context | `@components/ welke patterns gebruik ik?` |
| `@codebase` | Zoeken in project | `@codebase waar handle ik auth?` |
| `@Docs` | Officiële documentatie | `@Docs Next.js App Router` |
| `@Web` | Live web search | `@Web Supabase RLS policies` |

**Best practice:** Combineer mentions voor rijke context:
```
@src/components/auth/LoginForm.tsx
@src/lib/supabase.ts
@Docs Supabase Auth

Hoe voeg ik Google OAuth toe aan mijn login?
```

---

### Claude Projects voor Persistente Context

**Wat kun je toevoegen aan een Project:**
- Instructies (system prompt)
- Files (code, docs, schema's)
- Kennis die over sessies heen blijft

**Project Instructions Template:**
```markdown
# Project: [Naam]

## Tech Stack
- Next.js 14 met App Router
- TypeScript strict
- Tailwind CSS
- Supabase

## Code Conventies
[jouw conventies]

## Database Schema
[beschrijf je schema]

## Current Focus
[waar werk je nu aan]
```

**Tip:** Upload je database schema, README, en belangrijke types files.

---

### Context Windows en Limieten

**Wat is een context window?**
- Maximum hoeveelheid tekst die AI kan "zien"
- Gemeten in tokens (±4 karakters per token)

**Limieten per model:**
| Model | Context Window |
|-------|---------------|
| GPT-4o | 128K tokens |
| Claude 3 Sonnet | 200K tokens |
| Claude 3 Opus | 200K tokens |

**Praktisch:**
- Lange conversaties → context vol
- Veel file mentions → context vol
- Start fresh chat wanneer nodig

**Signs van vol context:**
- AI vergeet eerdere instructies
- Antwoorden worden minder relevant
- AI herhaalt zichzelf

---

### Context Hygiene

**Do's:**
- Geef alleen relevante context
- Wees specifiek in file mentions
- Start nieuwe chat voor nieuw onderwerp
- Gebruik project-level context voor consistentie

**Don'ts:**
- Hele codebase als context geven
- Oude irrelevante chats voortzetten
- Te veel files tegelijk mentionen
- Context herhalen die AI al heeft

---

### Debugging met Context

**Wanneer AI verkeerde antwoorden geeft:**

1. **Check context:** Heeft AI de juiste files?
2. **Check instructies:** Zijn project rules geladen?
3. **Fresh start:** Begin nieuwe chat
4. **Explicieter:** Voeg meer context toe in prompt

**Debug prompt:**
```
Ik merk dat je antwoord niet klopt.
Heb je toegang tot @src/lib/auth.ts?
Dit is de huidige implementatie: [plak code]
Kun je opnieuw kijken?
```

---

## Tools
- Cursor (@ mentions)
- Claude Projects
- ChatGPT

---

## Lesopdracht (2 uur)

### Context Management Oefenen

**Deel 1: @ Mentions Mastery (45 min)**

Voer deze taken uit in Cursor:

1. **Single file context:**
   - Open je TodoList component
   - Vraag: "@TodoList.tsx Hoe kan ik infinite scroll toevoegen?"
   - Noteer kwaliteit antwoord

2. **Multi-file context:**
   - Vraag: "@src/components/ @src/types/ Welke types mis ik?"
   - Noteer hoe context helpt

3. **Docs context:**
   - Vraag: "@Docs Supabase realtime Hoe voeg ik real-time updates toe aan mijn todo app?"
   - Noteer of antwoord up-to-date is

4. **Codebase search:**
   - Vraag: "@codebase Waar handle ik error states?"
   - Noteer of het de juiste plekken vindt

**Deel 2: Claude Project Setup (30 min)**

1. Maak Claude Project voor je eindproject
2. Schrijf comprehensive instructions
3. Upload 3-5 belangrijke files:
   - Database schema/types
   - Main component
   - Supabase client
4. Test met 3 vragen

**Deel 3: Context Vergelijking (45 min)**

Voer dezelfde taak uit met:
1. Geen context (nieuwe chat, geen mentions)
2. File context (@mentions)
3. Project context (Claude Project)

Taak: "Implementeer een search feature voor todos"

Noteer:
- Kwaliteit code
- Relevantie voor jouw project
- Hoeveel aanpassing nodig

### Deliverable
- Notities over @ mentions effectiviteit
- Claude Project met instructions
- Context vergelijkingsnotities

---

## Huiswerk (2 uur)

### Optimaliseer Je Context Strategie

**Deel 1: .cursorrules Perfectioneren (30 min)**

Update je .cursorrules met:
- Specifieke file structure info
- Naming conventions met voorbeelden
- Common patterns in je project
- DON'Ts specifiek voor jouw situatie

**Deel 2: Claude Project Uitbreiden (45 min)**

1. Upload alle relevante project files
2. Test met complexe vragen:
   - "Hoe implementeer ik feature X?"
   - "Review mijn auth implementatie"
   - "Wat ontbreekt er nog?"
3. Itereer op instructions

**Deel 3: Context Documentation (45 min)**

Maak `docs/CONTEXT-GUIDE.md`:
```markdown
# Context Guide voor [Project]

## Cursor @ Mentions
- Voor UI changes: @src/components/
- Voor data logic: @src/lib/ @src/hooks/
- Voor types: @src/types/

## Claude Project
- Project URL: [link]
- Uploaded files: [lijst]
- Best practices: [jouw learnings]

## Common Prompts
[verzameling werkende prompts]
```

### Deliverable
- Geoptimaliseerde .cursorrules
- Complete Claude Project
- docs/CONTEXT-GUIDE.md

---

## Leerdoelen
Na deze les kan de student:
- Uitleggen wat context is en waarom het belangrijk is
- Model Context Protocol (MCP) begrijpen
- @ mentions strategisch gebruiken in Cursor
- Een Claude Project opzetten met effectieve instructions
- Context windows en limieten begrijpen
- Context management best practices toepassen
- Debuggen wanneer AI verkeerde antwoorden geeft door context issues