fix: better order

2026-01-29 16:16:07 +01:00
parent f5ed2f7f31
commit 04f32babd3
15 changed files with 3917 additions and 1705 deletions
--- a/Samenvattingen/Les12-Samenvatting.md
+++ b/Samenvattingen/Les12-Samenvatting.md
@@ -1,153 +1,363 @@
-# Les 12: Advanced Context Management & AI-Vriendelijke Code
-
-> 📋 **Lesmateriaal nog niet uitgewerkt**
->
-> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
-> - Les12-Slide-Overzicht.md
-> - Les12-Lesplan.md
-> - Les12-Bijlage-A-Lesopdracht.md
-> - Les12-Bijlage-B-Huiswerkopdracht.md
+# Les 12: MCP & Context Management

 ---

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

 ## Beschrijving
-Masterclass in context management voor maximale AI effectiveness.
+Leer over MCP (Model Context Protocol) en hoe je context effectief beheert voor betere AI-assisted development.

 ---

 ## Te Behandelen

-### Context Windows Begrijpen
- Tokens (~4 chars = 1 token)
- Context sizes:
-  - GPT-4: 128K tokens
-  - Claude: 200K tokens
+### Wat is MCP?

-### Waarom Context Belangrijk
- Meer context = beter begrip
- Maar ook: langzamer + duurder
+**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
- Alleen relevante files
- Start breed → narrow down
- Sequential context
- Prunen

-### Project Documentatie voor AI
+**1. Start Breed, Narrow Down**
+```
+Begin: "Bekijk mijn hele project structuur"
+Dan: "Focus op de components folder"
+Dan: "Specifiek TodoList.tsx"
+```

-| Document | Doel |
-|----------|------|
-| README | Project overview |
-| ARCHITECTURE | System design |
-| COMPONENTS | Component library docs |
+**2. Alleen Relevante Files**
+- Niet je hele codebase delen
+- Focus op files die relevant zijn voor de taak

-### Hoe AI Docs Leest
- Structuur matters
- Voorbeelden helpen
+**3. @ Mentions in Cursor**
+```
+@components/Button.tsx @lib/utils.ts
+Hoe kan ik een loading state toevoegen aan de Button?
+```

-### AI-Vriendelijke Code Organisatie
- Semantische naming
- Kleine focused files
- Proper separation
- Comprehensive comments (WHY niet WHAT)
+**4. Fresh Start bij Nieuwe Taken**
+- Nieuwe chat voor nieuwe onderwerpen
+- Voorkomt context pollution

-### Context Pruning
- Wanneer fresh chat
- .cursorignore
- Vorige context samenvatten
+---

-### Knowledge Persistence
- Claude Projects voor long-term memory
+### .cursorignore

-### Tool Vergelijking
-Context handling in:
- Cursor
- OpenCode
- Claude Code
+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
- Cursor
 - Claude Desktop
+- MCP servers
+- Cursor
 - .cursorignore

 ---

 ## Lesopdracht (2 uur)

-### Context Optimization Challenge
+### MCP Setup & Context Optimalisatie

-**Setup:** Docent biedt messy codebase (10-15 files, onduidelijk, missing docs)
+**Deel 1: Claude Desktop MCP Setup (45 min)**

-### Phase 1: Assessment (30 min)
- Test Cursor begrip met 4 vragen
- Score X/10
+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

-### Phase 2: Documentation (45 min)
-Maak comprehensive docs met AI:
- README
- ARCHITECTURE.md
- COMPONENTS.md
+Test prompts:
+- "Wat is de structuur van mijn project?"
+- "Welke dependencies gebruik ik?"
+- "Analyseer mijn TodoList component"

-### Phase 3: Organization (45 min)
-Refactor voor clarity:
- Rename files/functions
- Split files <300 lines
- Add comments
- Organize folders
- Improve imports
+**Deel 2: GitHub MCP (optioneel) (30 min)**

-### Phase 4: Re-test (30 min)
- Zelfde 4 vragen
- Score verbetering
- Analyseer wat hielp
+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)

-### Maak Context Management Playbook
+### Context Deep Dive

-### Deel 1: Playbook (1 uur)
+**Deel 1: MCP Experimenteren (1 uur)**

-Schrijf gids over:
- Pre-project checklist
- Folder structure templates
- File naming conventions
- Prompting templates
- Wanneer welke tool
- Context management tijdens development
- AI begrip meten
- Red flags
- Pro tips
- Troubleshooting
+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)

-### Deel 2: Templates (30 min)
+Test uitgebreid:
+- Wat kun je ermee?
+- Wanneer is het nuttig?
+- Wat zijn beperkingen?

-Maak 3 templates:
-1. README.md
-2. ARCHITECTURE.md
-3. COMPONENT_TEMPLATE.md
+**Deel 2: Context Playbook (1 uur)**

-### Deel 3: Test (30 min)
- Start vers Next.js project
- Pas playbook toe
- Test of Cursor meteen begrijpt
- Itereer
+Schrijf een persoonlijk "Context Management Playbook" (1 pagina):

-**Deel als GitHub repo**
+```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
- Effectieve context strategieën toepassen
- Project documentatie schrijven die AI helpt
- AI-vriendelijke code structuur implementeren
- Context pruning toepassen (.cursorignore, fresh chats)
- Code organisatie verbeteren voor betere AI interactie
+- .cursorignore effectief gebruiken
+- Context strategieën toepassen
+- De juiste tool kiezen voor context management