# Les 12: MCP & Context Management

---

## Hoofdstuk
**Hoofdstuk 3: Advanced** (Les 10-18)

## Beschrijving
Leer over MCP (Model Context Protocol) en hoe je context effectief beheert voor betere AI-assisted development.

---

## Te Behandelen

### Wat is MCP?

**MCP = Model Context Protocol**

Een protocol van Anthropic waarmee AI tools veilig kunnen verbinden met externe data bronnen.

**Zonder MCP:**
- Je kopieert handmatig data naar Claude
- Context gaat verloren tussen sessies
- Geen toegang tot live data

**Met MCP:**
- Claude kan direct je files lezen
- Toegang tot databases, APIs, GitHub
- Real-time data in je conversations

---

### MCP Servers

MCP werkt met "servers" - kleine programma's die specifieke data bronnen ontsluiten.

**Populaire MCP Servers:**

| Server | Wat het doet |
|--------|--------------|
| **filesystem** | Lees/schrijf lokale files |
| **github** | Toegang tot repos, issues, PRs |
| **postgres** | Direct database queries |
| **slack** | Berichten en channels |
| **brave-search** | Web zoeken |

---

### Claude Desktop + MCP Configureren

**Stap 1:** Open Claude Desktop settings

**Stap 2:** Ga naar "Developer" → "Edit Config"

**Stap 3:** Voeg MCP servers toe in `claude_desktop_config.json`:

```json
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/jouw-username/projects/ai-recipe-generator"
      ]
    }
  }
}
```

**Stap 4:** Herstart Claude Desktop

**Stap 5:** Je ziet nu een 🔧 icoon in Claude - dit toont actieve MCP servers

---

### Filesystem MCP Testen

Met filesystem MCP kan Claude:
- Je project files lezen
- File structuur bekijken
- Code analyseren

**Test prompt:**
```
Analyseer mijn project structuur en geef me een overzicht
van de belangrijkste files en hun functies.
```

Claude kan nu direct je files lezen zonder dat je ze kopieert!

---

### GitHub MCP

```json
{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_xxxxx"
      }
    }
  }
}
```

**Wat kun je doen:**
- "Toon mijn open issues"
- "Maak een nieuwe branch"
- "Wat zijn de recente commits?"

---

## Context Management

### Wat is Context?

**Context = alle informatie die AI heeft tijdens een conversatie**

- Je vraag
- Eerdere berichten
- Geüploade files
- MCP data

**Beperking:** AI heeft een "context window" - maximale hoeveelheid tokens.

| Model | Context Window |
|-------|----------------|
| GPT-4 | ~128K tokens |
| Claude 3.5 | ~200K tokens |
| Claude 3 Opus | ~200K tokens |

**1 token ≈ 4 karakters** (of ~¾ woord)

---

### Waarom Context Belangrijk Is

**Meer context = beter begrip**

Met context over je project kan AI:
- Consistente code genereren
- Bestaande patterns volgen
- Juiste imports gebruiken

**Te veel context = problemen**
- Langzamere responses
- Hogere kosten
- AI raakt "afgeleid"

---

### Context Strategieën

**1. Start Breed, Narrow Down**
```
Begin: "Bekijk mijn hele project structuur"
Dan: "Focus op de components folder"
Dan: "Specifiek TodoList.tsx"
```

**2. Alleen Relevante Files**
- Niet je hele codebase delen
- Focus op files die relevant zijn voor de taak

**3. @ Mentions in Cursor**
```
@components/Button.tsx @lib/utils.ts
Hoe kan ik een loading state toevoegen aan de Button?
```

**4. Fresh Start bij Nieuwe Taken**
- Nieuwe chat voor nieuwe onderwerpen
- Voorkomt context pollution

---

### .cursorignore

Net als .gitignore, maar voor Cursor's AI indexing.

**Maak `.cursorignore` in je project root:**
```
# Dependencies
node_modules/

# Build outputs
.next/
dist/
build/

# Large files
*.log
*.lock

# Sensitive
.env.local
```

**Waarom:**
- Snellere indexing
- Geen irrelevante suggestions
- Betere focus op je code

---

### Context Optimalisatie Checklist

✅ **Goede project documentatie**
- README met overview
- Duidelijke folder structuur
- Comments in complexe code

✅ **Semantische naming**
- `fetchUserData()` niet `getData()`
- `UserProfileCard.tsx` niet `Card1.tsx`

✅ **Kleine, focused files**
- Max ~300 regels per file
- Eén verantwoordelijkheid per file

✅ **Proper imports**
- Absolute imports (`@/components/...`)
- Georganiseerde imports

---

### Context in Cursor vs Claude Desktop

| Aspect | Cursor | Claude Desktop + MCP |
|--------|--------|---------------------|
| Automatische context | Open files | MCP servers |
| File access | @ mentions | Filesystem MCP |
| Project begrip | .cursorrules | Project Knowledge |
| Beste voor | Coding | Research, planning |

**Combineer ze:**
- Claude Desktop + MCP voor planning en grote analyses
- Cursor voor daadwerkelijk coderen

---

## Tools
- Claude Desktop
- MCP servers
- Cursor
- .cursorignore

---

## Lesopdracht (2 uur)

### MCP Setup & Context Optimalisatie

**Deel 1: Claude Desktop MCP Setup (45 min)**

1. Open Claude Desktop settings
2. Configureer filesystem MCP voor je eindproject folder
3. Herstart Claude Desktop
4. Verifieer: vraag Claude om je project te analyseren

Test prompts:
- "Wat is de structuur van mijn project?"
- "Welke dependencies gebruik ik?"
- "Analyseer mijn TodoList component"

**Deel 2: GitHub MCP (optioneel) (30 min)**

1. Maak GitHub Personal Access Token
2. Configureer GitHub MCP
3. Test met je eindproject repo

Test prompts:
- "Toon mijn recente commits"
- "Wat zijn mijn open issues?"

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

1. Maak `.cursorignore` voor je project
2. Voeg node_modules, .next, etc. toe
3. Herindexeer project in Cursor

4. Test context kwaliteit:
   - Vraag Cursor iets over je project
   - Zijn de antwoorden accuraat?
   - Gebruikt hij de juiste patterns?

5. Verbeter indien nodig:
   - Voeg comments toe aan complexe code
   - Verbeter naming
   - Split grote files

### Deliverable
- Werkende MCP configuratie (screenshot)
- .cursorignore file
- Notities over context kwaliteit

---

## Huiswerk (2 uur)

### Context Deep Dive

**Deel 1: MCP Experimenteren (1 uur)**

Kies en configureer nog een MCP server:
- brave-search (voor web zoeken)
- sqlite (voor lokale databases)
- Of een andere uit de [MCP registry](https://github.com/modelcontextprotocol/servers)

Test uitgebreid:
- Wat kun je ermee?
- Wanneer is het nuttig?
- Wat zijn beperkingen?

**Deel 2: Context Playbook (1 uur)**

Schrijf een persoonlijk "Context Management Playbook" (1 pagina):

```markdown
# Mijn Context Management Playbook

## Wanneer gebruik ik wat?

### Claude Desktop + MCP
- [situaties]

### Cursor met @ mentions
- [situaties]

## Mijn .cursorignore template
- [wat ignore ik altijd]

## Context strategieën
- [wat werkt voor mij]

## Red flags
- [wanneer is context slecht]

## Optimalisatie tips
- [mijn beste tips]
```

### Deliverable
- Extra MCP server geconfigureerd
- Context Management Playbook (1 pagina)
- Documentatie in AI-DECISIONS.md over je context keuzes

---

## Leerdoelen
Na deze les kan de student:
- MCP begrijpen en uitleggen
- MCP servers configureren in Claude Desktop
- Filesystem en GitHub MCP gebruiken
- Context windows en token limits begrijpen
- .cursorignore effectief gebruiken
- Context strategieën toepassen
- De juiste tool kiezen voor context management