novi-lessons/Samenvattingen/Les15-Samenvatting.md

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:

# 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-5	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:

# 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