364 lines
7.1 KiB
Markdown
364 lines
7.1 KiB
Markdown
# 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
|