Files
novi-lessons/Samenvattingen/Les12-Samenvatting.md
2026-01-29 16:16:07 +01:00

7.1 KiB

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:

{
  "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

{
  "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

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):

# 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