337 lines
7.5 KiB
Markdown
337 lines
7.5 KiB
Markdown
# 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
|