Claude Code Meesterschap Deel 7: MCP Servers

Je bent een bug aan het debuggen en moet de database controleren. Dus open je een terminal, maak je verbinding met PostgreSQL, schrijf je een query, kopieer je de resultaten, plak je ze in Claude, leg je het schema uit... Zou het niet makkelijker zijn als Claude gewoon direct de database kon bevragen?

Dat is precies wat MCP-servers mogelijk maken. Het zijn bruggen die Claude verbinden met externe services—databases, GitHub, cloudplatformen, documentatiebronnen—zodat Claude met je hele ontwikkelecosysteem kan werken, niet alleen met je lokale bestanden.

Wat is MCP?

Model Context Protocol (MCP) is een open standaard voor AI-tool-integraties. Zie het als een universele adapter waarmee Claude verbinding kan maken met elke service die het protocol spreekt.

Claude Code ←→ MCP Server ←→ Externe Service
                   │
            (Handelt auth,
             dataformattering,
             rate limiting af)

De MCP-server handelt alle complexiteit af—authenticatie, API-protocollen, datatransformatie—zodat Claude op een natuurlijke manier kan communiceren. Je vraagt "laat me gebruikers zien die vorige week zijn aangemeld," en Claude bevraagt je database direct.

Waarom dit belangrijk is:

• Geen kopieer-plak workflows — Claude benadert data bij de bron
• Realtime informatie — Altijd actueel, geen verouderde context
• Veilig by design — Servers beheren credentials, niet Claude
• Open standaard — Werkt met verschillende tools, niet alleen Claude

Voortbouwend op de basis: Terwijl essentiële commando's uit Deel 1 het gedrag van Claude binnen je lokale project aansturen, breiden MCP-servers uit wat Claude kan benaderen buiten je bestandssysteem—databases, APIs, externe services en meer.

Veiligheid Eerst

MCP-servers voeren code uit op jouw systeem. Voordat je een server gebruikt:

1. Bekijk de broncode — Controleer welke rechten het nodig heeft
2. Gebruik read-only waar mogelijk — Voorkom onbedoelde wijzigingen
3. Beperk de toegang — Geef toegang tot specifieke paden/tabellen
4. Vertrouw je bronnen — Gebruik alleen goed onderhouden servers
5. Bescherm credentials — Gebruik omgevingsvariabelen, nooit hardcoded

MCP-servers van derden zijn niet geverifieerd door Anthropic. Servers die externe content ophalen kunnen je blootstellen aan prompt injection. Wees voorzichtig.

Configuratielocaties

MCP-servers kunnen op verschillende niveaus worden geconfigureerd:

Project-scope (aanbevolen voor teams):

.mcp.json                    # Versiebeheerd, gedeeld met team
.claude/settings.local.json  # Lokale overschrijvingen, in gitignore

Gebruiker-scope (persoonlijke tools):

~/.claude/settings.json      # Al je projecten
~/.claude/settings.local.json # Persoonlijke overschrijvingen

Project-scope configuratie (.mcp.json) is de schoonste optie—check het in bij git en iedereen in je team krijgt dezelfde setup.

Configuratiestructuur

{
  "mcpServers": {
    "server-name": {
      "command": "npx",
      "args": ["-y", "@package/mcp-server"],
      "env": {
        "API_KEY": "${MY_API_KEY}"
      }
    }
  }
}

command — Het uitvoerbare bestand (meestal npx voor Node-gebaseerde servers)

args — Commandoargumenten, doorgaans de pakketnaam

env — Omgevingsvariabelen, met ${VAR} syntax voor secrets

Het /mcp Commando

Beheer MCP-servers vanuit Claude Code:

# Controleer serverstatus
/mcp

# Output:
# MCP Server Status
# • github: connected
# • postgres: connected
# • context7: failed (connection timeout)

Vanuit de terminal gebruik je CLI-commando's:

# Voeg een server toe
Claude mcp add github --scope user

# Lijst geconfigureerde servers
Claude mcp list

# Inspecteer de configuratie van een server
Claude mcp get github

# Verwijder een server
Claude mcp remove github

Scope-opties:

• --scope local — Alleen deze sessie, tijdelijk
• --scope user — Persistent over alle projecten
• --scope project — Opgeslagen in .mcp.json voor teamdeling

Essentiële MCP-servers

GitHub

Volledige repository-integratie—PR's, issues, code review, releases.

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "${GITHUB_TOKEN}"
      }
    }
  }
}

Wat Claude kan doen:

• Pull requests aanmaken en reviewen
• Issues en labels beheren
• Code doorzoeken over repositories
• Workflows triggeren

Voorbeeld:

"Review de open PR's in onze repo en vat samen welke klaar zijn om te mergen"

PostgreSQL

Directe databasetoegang met schemabewustzijn.

{
  "mcpServers": {
    "postgres": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres"],
      "env": {
        "DATABASE_URL": "${DATABASE_URL}",
        "READ_ONLY": "true"
      }
    }
  }
}

Wat Claude kan doen:

• Tabellen bevragen in natuurlijke taal
• Schemarelaties begrijpen
• Migraties genereren
• Dataproblemen debuggen

Voorbeeld:

"Vind alle gebruikers die zich in januari hebben aangemeld maar nog geen aankoop hebben gedaan"

Context7

Realtime, versie-specifieke bibliotheekdocumentatie.

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@context7/mcp-server"]
    }
  }
}

Wat Claude kan doen:

• Actuele documentatie ophalen voor elk npm-pakket
• Versie-specifieke API-details opvragen
• Gehallucideerde APIs vermijden
• Bijblijven met bibliotheekwijzigingen

Voorbeeld:

"gebruik context7 om de correcte API op te zoeken voor React Query's useInfiniteQuery hook"

Dit is bijzonder waardevol omdat de trainingsdata van Claude een afsluittdatum heeft—Context7 geeft het toegang tot documentatie die na de training is uitgebracht.

Filesystem

Toegang tot bestanden buiten je huidige project.

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/Users/me/projects"]
    }
  }
}

Wat Claude kan doen:

• Bestanden lezen uit andere mappen
• Gedeelde configuratie benaderen
• Werken over meerdere projecten

Voorbeeld:

"Controleer mijn dotfiles repo voor hoe ik ESLint heb geconfigureerd"

Supabase

Volledige Supabase-platformintegratie.

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": ["-y", "@supabase/mcp-server"],
      "env": {
        "SUPABASE_URL": "${SUPABASE_URL}",
        "SUPABASE_SERVICE_KEY": "${SUPABASE_SERVICE_KEY}"
      }
    }
  }
}

Wat Claude kan doen:

• Supabase-tabellen bevragen
• Auth-gebruikers beheren
• Werken met storage buckets
• RLS-policies genereren

Web Fetch

Webcontent ophalen en verwerken.

{
  "mcpServers": {
    "fetch": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-fetch"]
    }
  }
}

Wat Claude kan doen:

• Webpagina's en APIs ophalen
• Documentatiesites verwerken
• Servicestatus controleren
• Actuele informatie opzoeken

Playwright

Browserautomatisering voor testen en webinteractie.

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-server-playwright"]
    }
  }
}

Wat Claude kan doen:

• Webpagina's navigeren en met elementen interacteren
• Screenshots maken en paginastatus vastleggen
• Formulieren invullen en knoppen klikken
• End-to-end testscenario's uitvoeren
• UI-problemen debuggen door te zien wat er op het scherm staat

Voorbeeld:

"Gebruik Playwright om naar onze stagingsite te navigeren en te controleren of het loginformulier werkt"

Servercategorieën

Databases

PostgreSQL — @modelcontextprotocol/server-postgres — Volledige SQL-toegang

MySQL — @modelcontextprotocol/server-mysql — MySQL-integratie

SQLite — @modelcontextprotocol/server-sqlite — Lokale databases

MongoDB — Community servers beschikbaar — Documentdatabases

Cloud & DevOps

GitHub — @modelcontextprotocol/server-github — Volledige GitHub API

GitLab — Community servers — GitLab-integratie

Cloudflare — @cloudflare/mcp-server-cloudflare — Workers, KV, D1, R2

AWS — Community servers — S3, Lambda, etc.

Testen & Automatisering

Playwright — @anthropic/mcp-server-playwright — Browserautomatisering en E2E-testen

Documentatie & Onderzoek

Context7 — @context7/mcp-server — Realtime bibliotheekdocumentatie

Perplexity — Community servers — AI-gestuurde zoekfunctie

Fetch — @modelcontextprotocol/server-fetch — Webcontent

Meerdere Servers Samen

De meeste projecten profiteren van meerdere MCP-servers die samenwerken:

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "${GITHUB_TOKEN}"
      }
    },
    "postgres": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres"],
      "env": {
        "DATABASE_URL": "${DATABASE_URL}",
        "READ_ONLY": "true"
      }
    },
    "context7": {
      "command": "npx",
      "args": ["-y", "@context7/mcp-server"]
    }
  }
}

Claude gebruikt automatisch de juiste server op basis van je verzoek. Vraag je naar het databaseschema, dan gebruikt het PostgreSQL. Vraag je naar een PR, dan gebruikt het GitHub.

Praktische Workflows

Database-gedreven Ontwikkeling

Jij: "Laat me het schema van de orders-tabel zien"

Claude: [Query via postgres MCP]
De orders-tabel heeft:
- id (uuid, primary key)
- user_id (uuid, foreign key → users)
- total_amount (decimal)
- status (enum: pending, paid, shipped, delivered)
- created_at (timestamp)

Jij: "Vind bestellingen boven €500 die nog pending zijn"

Claude: [Voert query uit]
23 bestellingen gevonden die aan de criteria voldoen. De oudste is van 3 dagen geleden...

Cross-Service Automatisering

Jij: "Maak een GitHub-issue aan voor de bug die we besproken hebben, wijs het aan mij toe"

Claude: [Gebruikt github MCP]
Issue #234 aangemaakt: "Fix race condition in order processing"
- Label toegevoegd: bug, priority-high
- Toegewezen aan: @jougebruikersnaam
- Gelinkt aan recente commits die de orders-tabel noemen

Documentatie-bewust Programmeren

Jij: "Gebruik context7 om de correcte manier op te zoeken voor optimistic updates in TanStack Query v5"

Claude: [Haalt actuele docs op via context7]
In TanStack Query v5 gebruiken optimistic updates de onMutate callback...
[Biedt accurate, versie-specifieke begeleiding]

Probleemoplossing

Server Maakt Geen Verbinding

1. Controleer status: Voer /mcp uit om de verbindingsstatus te zien
2. Schakel debugmodus in: claude --mcp-debug voor gedetailleerde logs
3. Verifieer credentials: Zorg dat omgevingsvariabelen zijn ingesteld
4. Test handmatig: Voer het servercommando direct uit in de terminal

Windows-specifieke Problemen

Op native Windows (niet WSL) vereist npx een wrapper:

{
  "command": "cmd",
  "args": ["/c", "npx", "-y", "@modelcontextprotocol/server-github"]
}

Zonder cmd /c krijg je "Connection closed"-fouten.

Token Limieten

MCP-outputs hebben limieten om context-overflow te voorkomen:

• Waarschuwingsdrempel: 10.000 tokens
• Standaard maximum: 25.000 tokens

Pas aan met de MAX_MCP_OUTPUT_TOKENS omgevingsvariabele indien nodig.

Server Reageert Niet

Sommige servers hebben tijd nodig om te initialiseren. Als een server direct na het opstarten "failed" toont, wacht even en voer /mcp opnieuw uit.

Best Practices

1. Principe van Minimale Rechten

Vraag alleen de benodigde rechten aan:

{
  "env": {
    "READ_ONLY": "true",
    "ALLOWED_PATHS": "/specific/directory"
  }
}

2. Omgevingsvariabelen voor Secrets

Hardcode nooit tokens:

{
  "env": {
    "GITHUB_TOKEN": "${GITHUB_TOKEN}"
  }
}

Stel variabelen in via je shell-profiel of .env-bestand.

3. Project vs Gebruiker Scope

• Project scope (.mcp.json): Databaseverbindingen, projectspecifieke tools
• Gebruiker scope (~/.claude/settings.json): GitHub, persoonlijke hulpmiddelen

4. Bekijk de Servercode

Voordat je een MCP-server installeert, controleer:

• Welke commando's het kan uitvoeren
• Welke netwerktoegang het nodig heeft
• Wie het onderhoudt
• Recente activiteit en issues

MCP-servers Vinden

Officiële servers:

• modelcontextprotocol.io/examples

Community-directory's:

• mcpservers.org
• mcpcat.io
• awesome-mcp-servers

Zoek op GitHub:

• Topic: mcp-server
• Zoek: "@modelcontextprotocol" in package.json

Wat Volgt

MCP-servers breiden het bereik van Claude uit naar externe services. Gecombineerd met alles wat we tot nu toe hebben behandeld—commando's, skills en subagents—heb je nu een krachtige toolkit voor AI-ondersteunde ontwikkeling.

In Deel 8: Productie Workflows brengen we alles samen met real-world patronen: CI/CD-integratie, teamsamenwerking en workflows die schalen van zijproject tot productiesysteem.