fix: implement lessons feedback
This commit is contained in:
Tim Rijkse
@@ -1,363 +1,261 @@
|
||||
# Les 12: MCP & Context Management
|
||||
# Les 12: Introduction to Cursor
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||
**Deel 3: AI Tooling & Prototyping** (Les 10-12)
|
||||
|
||||
## Beschrijving
|
||||
Leer over MCP (Model Context Protocol) en hoe je context effectief beheert voor betere AI-assisted development.
|
||||
Kennismaking met Cursor - de professionele AI code editor. Leer de core features en ontdek waarom dit de tool is voor serieuze AI-assisted development.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Wat is MCP?
|
||||
### Groepsdiscussie (15 min)
|
||||
Bespreek klassikaal de prototype ervaringen uit Les 11 - welke workflow patterns werkten goed? Wat ging fout en hoe loste je dat op?
|
||||
|
||||
**MCP = Model Context Protocol**
|
||||
### Waarom Cursor?
|
||||
|
||||
Een protocol van Anthropic waarmee AI tools veilig kunnen verbinden met externe data bronnen.
|
||||
**Tot nu toe gebruikten we:**
|
||||
- OpenCode (gratis, goed voor leren)
|
||||
- Claude Desktop (voor agents en projects)
|
||||
|
||||
**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
|
||||
**Cursor is de volgende stap:**
|
||||
- Purpose-built voor AI-assisted coding
|
||||
- Professionele editor (gebaseerd op VS Code)
|
||||
- Superieure AI integratie
|
||||
- Free tier beschikbaar (voldoende voor de cursus)
|
||||
|
||||
---
|
||||
|
||||
### MCP Servers
|
||||
### Free vs Pro
|
||||
|
||||
MCP werkt met "servers" - kleine programma's die specifieke data bronnen ontsluiten.
|
||||
| Aspect | Free Tier | Pro ($20/maand) |
|
||||
|--------|-----------|-----------------|
|
||||
| Tab completion | ✅ | ✅ |
|
||||
| CMD+K edits | Beperkt | Onbeperkt |
|
||||
| Chat | Beperkt | Onbeperkt |
|
||||
| Composer | Beperkt | Onbeperkt |
|
||||
| Models | GPT-4, Claude | Alle modellen |
|
||||
|
||||
**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 |
|
||||
**Voor deze cursus:** Free tier is voldoende!
|
||||
|
||||
---
|
||||
|
||||
### Claude Desktop + MCP Configureren
|
||||
### Installatie
|
||||
|
||||
**Stap 1:** Open Claude Desktop settings
|
||||
1. Ga naar [cursor.sh](https://cursor.sh)
|
||||
2. Download voor jouw OS
|
||||
3. Installeer
|
||||
4. Open Cursor
|
||||
5. Sign in met GitHub
|
||||
|
||||
**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
|
||||
**Eerste keer:**
|
||||
- Cursor vraagt om settings te importeren van VS Code (optioneel)
|
||||
- Accept default keybindings
|
||||
|
||||
---
|
||||
|
||||
### Filesystem MCP Testen
|
||||
### Core Features
|
||||
|
||||
Met filesystem MCP kan Claude:
|
||||
- Je project files lezen
|
||||
- File structuur bekijken
|
||||
- Code analyseren
|
||||
#### 1. Tab Completion
|
||||
AI-powered autocomplete die hele blokken code voorspelt.
|
||||
|
||||
**Test prompt:**
|
||||
```
|
||||
Analyseer mijn project structuur en geef me een overzicht
|
||||
van de belangrijkste files en hun functies.
|
||||
**Hoe het werkt:**
|
||||
- Begin met typen
|
||||
- Cursor suggereert code in grijs
|
||||
- Druk Tab om te accepteren
|
||||
- Druk Escape om te negeren
|
||||
|
||||
**Tip:** Schrijf een comment over wat je wilt, en Tab completion vult de code in.
|
||||
|
||||
```typescript
|
||||
// Function that calculates the total price with tax
|
||||
// [Tab completion vult de functie in]
|
||||
```
|
||||
|
||||
Claude kan nu direct je files lezen zonder dat je ze kopieert!
|
||||
#### 2. CMD+K (Inline Editing)
|
||||
Selecteer code en vraag AI om het aan te passen.
|
||||
|
||||
**Hoe het werkt:**
|
||||
1. Selecteer code (of zet cursor op een regel)
|
||||
2. Druk CMD+K (Mac) of Ctrl+K (Windows)
|
||||
3. Typ je instructie
|
||||
4. Enter om te genereren
|
||||
5. Accept of Reject de wijziging
|
||||
|
||||
**Voorbeelden:**
|
||||
- "Add error handling"
|
||||
- "Convert to TypeScript"
|
||||
- "Make this responsive"
|
||||
- "Add loading state"
|
||||
|
||||
#### 3. Chat (Sidebar)
|
||||
Converseer met AI over je code.
|
||||
|
||||
**Hoe het werkt:**
|
||||
1. CMD+Shift+L opent Chat
|
||||
2. Stel je vraag
|
||||
3. AI heeft context van je open file
|
||||
|
||||
**Voorbeelden:**
|
||||
- "Explain what this function does"
|
||||
- "How can I optimize this?"
|
||||
- "What's wrong with this code?"
|
||||
|
||||
#### 4. @ Mentions
|
||||
Refereer naar files, folders, of documentatie.
|
||||
|
||||
**Syntax:**
|
||||
- `@filename.tsx` - specifieke file
|
||||
- `@folder/` - hele folder
|
||||
- `@Docs` - officiële docs zoeken
|
||||
- `@Web` - web zoeken
|
||||
|
||||
**Voorbeeld:**
|
||||
```
|
||||
@components/Button.tsx - How can I add a loading prop to this?
|
||||
```
|
||||
|
||||
#### 5. Composer Mode
|
||||
Multi-file generatie in één keer.
|
||||
|
||||
**Hoe het werkt:**
|
||||
1. CMD+I opent Composer
|
||||
2. Beschrijf wat je wilt bouwen
|
||||
3. AI genereert meerdere files tegelijk
|
||||
4. Review en accept changes
|
||||
|
||||
**Wanneer gebruiken:**
|
||||
- Nieuwe features met meerdere components
|
||||
- Refactoring over meerdere files
|
||||
- Boilerplate code genereren
|
||||
|
||||
---
|
||||
|
||||
### GitHub MCP
|
||||
### Workflow Vergelijking
|
||||
|
||||
```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?"
|
||||
| Taak | OpenCode | Cursor |
|
||||
|------|----------|--------|
|
||||
| Snelle fix | Chat | CMD+K |
|
||||
| Nieuwe component | Chat | Tab completion + CMD+K |
|
||||
| Multi-file feature | Meerdere chats | Composer |
|
||||
| Code uitleg | Chat | Chat + @ mentions |
|
||||
| Refactoring | Chat | CMD+K of Composer |
|
||||
|
||||
---
|
||||
|
||||
## Context Management
|
||||
### Keyboard Shortcuts Cheat Sheet
|
||||
|
||||
### 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
|
||||
| Actie | Mac | Windows |
|
||||
|-------|-----|---------|
|
||||
| Tab completion accept | Tab | Tab |
|
||||
| Inline edit | CMD+K | Ctrl+K |
|
||||
| Open Chat | CMD+Shift+L | Ctrl+Shift+L |
|
||||
| Open Composer | CMD+I | Ctrl+I |
|
||||
| Accept suggestion | CMD+Y | Ctrl+Y |
|
||||
| Reject suggestion | CMD+N | Ctrl+N |
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Claude Desktop
|
||||
- MCP servers
|
||||
- Cursor
|
||||
- .cursorignore
|
||||
- GitHub
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### MCP Setup & Context Optimalisatie
|
||||
### Cursor Verkennen
|
||||
|
||||
**Deel 1: Claude Desktop MCP Setup (45 min)**
|
||||
**Deel 1: Setup (20 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
|
||||
1. Download en installeer Cursor
|
||||
2. Sign in met GitHub
|
||||
3. Open je Todo app project
|
||||
4. Verken de interface
|
||||
|
||||
Test prompts:
|
||||
- "Wat is de structuur van mijn project?"
|
||||
- "Welke dependencies gebruik ik?"
|
||||
- "Analyseer mijn TodoList component"
|
||||
**Deel 2: Tab Completion (30 min)**
|
||||
|
||||
**Deel 2: GitHub MCP (optioneel) (30 min)**
|
||||
Maak nieuwe file `src/components/LoadingSpinner.tsx`:
|
||||
1. Typ comment: `// Loading spinner component with size prop`
|
||||
2. Laat Tab completion de rest doen
|
||||
3. Itereer met meer comments
|
||||
4. Noteer: hoe goed is de completion?
|
||||
|
||||
1. Maak GitHub Personal Access Token
|
||||
2. Configureer GitHub MCP
|
||||
3. Test met je eindproject repo
|
||||
**Deel 3: CMD+K Oefenen (30 min)**
|
||||
|
||||
Test prompts:
|
||||
- "Toon mijn recente commits"
|
||||
- "Wat zijn mijn open issues?"
|
||||
Open je TodoList component:
|
||||
1. Selecteer de list rendering code
|
||||
2. CMD+K → "Add loading state with skeleton"
|
||||
3. Selecteer een button
|
||||
4. CMD+K → "Add disabled state while loading"
|
||||
5. Selecteer een function
|
||||
6. CMD+K → "Add try-catch with error toast"
|
||||
|
||||
**Deel 3: Context Optimalisatie (45 min)**
|
||||
Noteer wat werkt en wat niet.
|
||||
|
||||
1. Maak `.cursorignore` voor je project
|
||||
2. Voeg node_modules, .next, etc. toe
|
||||
3. Herindexeer project in Cursor
|
||||
**Deel 4: Chat + @ Mentions (20 min)**
|
||||
|
||||
4. Test context kwaliteit:
|
||||
- Vraag Cursor iets over je project
|
||||
- Zijn de antwoorden accuraat?
|
||||
- Gebruikt hij de juiste patterns?
|
||||
1. Open Chat (CMD+Shift+L)
|
||||
2. Vraag: "@TodoList.tsx What could I improve in this component?"
|
||||
3. Vraag: "@lib/supabase.ts How do I add real-time subscriptions?"
|
||||
4. Probeer @Docs voor Next.js documentatie
|
||||
|
||||
5. Verbeter indien nodig:
|
||||
- Voeg comments toe aan complexe code
|
||||
- Verbeter naming
|
||||
- Split grote files
|
||||
**Deel 5: Composer Proberen (20 min)**
|
||||
|
||||
1. Open Composer (CMD+I)
|
||||
2. Vraag: "Create a Settings page with dark mode toggle and notification preferences. Use our existing component style."
|
||||
3. Review de gegenereerde files
|
||||
4. Accept of reject
|
||||
|
||||
### Deliverable
|
||||
- Werkende MCP configuratie (screenshot)
|
||||
- .cursorignore file
|
||||
- Notities over context kwaliteit
|
||||
- Screenshot van werkende Tab completion
|
||||
- 3 voorbeelden van CMD+K edits
|
||||
- Notities: wat werkt wel/niet goed
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Context Deep Dive
|
||||
### Bouw Feature met Cursor
|
||||
|
||||
**Deel 1: MCP Experimenteren (1 uur)**
|
||||
**Deel 1: Feature Bouwen (1.5 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)
|
||||
Voeg "Due Dates" toe aan je Todo app:
|
||||
1. Elk todo kan een due date hebben
|
||||
2. Toon due date in de lijst
|
||||
3. Sorteer op due date
|
||||
4. Markeer overdue items in rood
|
||||
|
||||
Test uitgebreid:
|
||||
- Wat kun je ermee?
|
||||
- Wanneer is het nuttig?
|
||||
- Wat zijn beperkingen?
|
||||
**Gebruik ALLE Cursor features:**
|
||||
- Tab completion voor nieuwe code
|
||||
- CMD+K voor aanpassingen
|
||||
- Chat voor vragen
|
||||
- Composer voor multi-file changes
|
||||
|
||||
**Deel 2: Context Playbook (1 uur)**
|
||||
**Deel 2: Reflectie (30 min)**
|
||||
|
||||
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]
|
||||
```
|
||||
Schrijf vergelijking (400 woorden):
|
||||
- Cursor vs OpenCode: wat is beter?
|
||||
- Welke feature gebruik je het meest?
|
||||
- Is free tier voldoende?
|
||||
- Ga je overstappen?
|
||||
|
||||
### Deliverable
|
||||
- Extra MCP server geconfigureerd
|
||||
- Context Management Playbook (1 pagina)
|
||||
- Documentatie in AI-DECISIONS.md over je context keuzes
|
||||
- Werkende Due Dates feature
|
||||
- GitHub commit met de changes
|
||||
- Reflectie (400 woorden)
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
- Cursor installeren en configureren
|
||||
- Tab completion effectief gebruiken
|
||||
- CMD+K gebruiken voor inline edits
|
||||
- Chat gebruiken met @ mentions voor context
|
||||
- Composer mode gebruiken voor multi-file generatie
|
||||
- Het verschil beoordelen tussen Cursor en OpenCode
|
||||
- De juiste Cursor feature kiezen per taak
|
||||
|
||||
Reference in New Issue
Block a user