Claude Code MCP: servers koppelen uitgelegd

Claude Code MCP: Servers Koppelen Uitgelegd

Wat is MCP (Model Context Protocol)?

Het Probleem dat MCP Oplost

• Direct je GitHub repositories kan lezen en aanpassen?
• Data uit je Supabase database kan ophalen en updaten?
• Geautomatiseerde browser tests kan draaien via Playwright?
• Berichten kan sturen naar je Slack workspace?
• Toegang heeft tot je Google Drive documenten?

Hoe Verschilt MCP van API's?

• Elke tool heeft zijn eigen manier van communiceren met AI
• Developers moeten custom code schrijven per integratie
• Geen standaard voor veiligheid en permissies

• Eén gestandaardiseerd protocol voor alle tools
• Tools worden "plug and play" voor AI-modellen
• Consistente security en permission modellen

Waarom is MCP Belangrijk?

1. Contextuele Intelligentie

• Je volledige codebase (via filesystem MCP)
• Issue tracking en project planning (via GitHub MCP)
• Production data en schemas (via database MCP)
• Team communicatie en beslissingen (via Slack MCP)

2. Automatisering van Repetitieve Taken

• GitHub issue maken voor een bug
• Database query draaien om data te checken
• Screenshot maken voor een UI test
• Documentatie zoeken in Confluence

3. Consistentie en Best Practices

• Code style checks voordat code wordt gecommit
• Automatische tests draaien bij elke wijziging
• Security scans op afhankelijkheden
• Documentatie updates bij API changes

4. Democratisering van Development

Hoe Werkt MCP? De Architectuur Uitgelegd

De Drie Hoofdcomponenten

Communicatie Flow

┌─────────────────┐          MCP Protocol          ┌──────────────────┐
│   Claude Code   │◄──────────(JSON-RPC)──────────►│   MCP Server     │
│   (MCP Host)    │                                 │  (bijv. GitHub)  │
└─────────────────┘                                 └──────────────────┘
         │                                                    │
         │                                                    │
         ▼                                                    ▼
  Jouw prompts                                    GitHub API calls
  + code context                                  + responses

1. Je vraagt iets aan Claude: "Maak een GitHub issue voor deze bug"
2. Claude herkent de intent: Begrijpt dat dit een GitHub operatie vereist
3. MCP request: Claude stuurt een JSON-RPC request naar de GitHub MCP server
4. Server executie: De MCP server voert de GitHub API call uit
5. Response: Server stuurt resultaat terug naar Claude
6. Claude rapporteert: Claude vertelt jou dat het issue is aangemaakt

Security en Permissions

• Volledige controle over wat wel/niet gebeurt
• Je eigen API keys en tokens worden gebruikt
• Je kunt MCP servers stoppen/starten wanneer je wilt
• Audit logs zijn beschikbaar voor security compliance

Populaire MCP Servers voor Claude Code

1. Filesystem MCP Server

• Claude kan bestanden in je hele codebase lezen
• Templates uit andere projecten hergebruiken
• Config bestanden in je home directory aanpassen
• Logs analyseren van verschillende applicaties

npm install -g @modelcontextprotocol/server-filesystem

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

2. GitHub MCP Server

• Issues aanmaken zonder je editor te verlaten
• Pull request reviews direct in Claude
• Repository statistieken opvragen
• Automated workflows triggeren
• Code search over meerdere repos

npm install -g @modelcontextprotocol/server-github

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

1. Ga naar GitHub.com → Settings → Developer settings → Personal access tokens
2. Genereer nieuwe token met scopes: repo, read:org, read:user
3. Kopieer token naar je configuratie

3. Supabase MCP Server

• Database queries schrijven en testen zonder Supabase UI
• Schema changes direct vanuit je development flow
• Production data analyseren voor debugging
• Seed data genereren voor testing
• Real-time data monitoring

npm install -g @modelcontextprotocol/server-supabase

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-supabase"],
      "env": {
        "SUPABASE_URL": "https://jouw-project.supabase.co",
        "SUPABASE_SERVICE_KEY": "jouw_service_role_key_hier"
      }
    }
  }
}

4. Playwright MCP Server

• Automated UI testing tijdens development
• Screenshots genereren voor documentatie
• User flows valideren
• Cross-browser compatibility checken
• Data scraping voor research

npm install -g @modelcontextprotocol/server-playwright

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

5. Slack MCP Server

• Deployment notifications automatisch sturen
• Error alerts naar development channel
• Code review reminders
• Sprint planning updates
• Team stand-ups samenvatten

npm install -g @modelcontextprotocol/server-slack

{
  "mcpServers": {
    "slack": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-slack"],
      "env": {
        "SLACK_BOT_TOKEN": "xoxb-jouw-bot-token",
        "SLACK_APP_TOKEN": "xapp-jouw-app-token"
      }
    }
  }
}

1. Ga naar api.slack.com/apps → Create New App
2. Voeg bot scopes toe: chat:write, channels:read, channels:history
3. Installeer app in je workspace
4. Kopieer tokens naar configuratie

Installatie en Configuratie: Complete Setup Guide

Stap 1: Claude Desktop Installeren

brew install --cask claude

Stap 2: Configuratie Bestand Aanmaken

~/Library/Application Support/Claude/claude_desktop_config.json

%APPDATA%\Claude\claude_desktop_config.json

~/.config/Claude/claude_desktop_config.json

# macOS
mkdir -p ~/Library/Application\ Support/Claude
touch ~/Library/Application\ Support/Claude/claude_desktop_config.json

# Linux
mkdir -p ~/.config/Claude
touch ~/.config/Claude/claude_desktop_config.json

Stap 3: Eerste MCP Server Configureren

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

• Gebruik absolute paths (niet ~/projects maar /Users/naam/projects)
• Windows: gebruik forward slashes (C:/Users/naam/projects)
• Multiple paths: voeg meerdere argumenten toe in de args array

Stap 4: Claude Desktop Herstarten

1. Sluit Claude Desktop volledig af (check je taskbar/menu bar)
2. Start opnieuw op
3. Open Claude Code

Stap 5: Verificatie

"Claude, welke MCP servers zijn momenteel actief?"

"Claude, list alle bestanden in mijn projects directory via de filesystem MCP server."

Stap 6: Meerdere Servers Toevoegen

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/jouw-naam/projects",
        "/Users/jouw-naam/documents"
      ]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "ghp_jouw_token_hier"
      }
    },
    "supabase": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-supabase"],
      "env": {
        "SUPABASE_URL": "https://xyz.supabase.co",
        "SUPABASE_SERVICE_KEY": "jouw_key"
      }
    }
  }
}

Troubleshooting Common Issues

• Check of Node.js geïnstalleerd is (node --version)
• Gebruik volledige pad naar npx: /usr/local/bin/npx
• Check logs in Claude Desktop (Help → View Logs)

• Gebruik geen quotes in waarden (tenzij waarde zelf spaties heeft)
• Check of JSON syntax correct is (validate met jsonlint.com)
• Herstart Claude Desktop na elke wijziging

• Check of paths daadwerkelijk bestaan en leesbaar zijn
• Voor API tokens: verify scopes zijn correct ingesteld
• macOS: check Security & Privacy settings

Je Eigen MCP Server Maken: Basic Tutorial

Project Setup

mkdir mcp-quotes-server
cd mcp-quotes-server
npm init -y
npm install @modelcontextprotocol/sdk

Server Code

#!/usr/bin/env node

import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import {
  CallToolRequestSchema,
  ListToolsRequestSchema,
} from "@modelcontextprotocol/sdk/types.js";

// Onze quote database
const quotes = [
  "Code is like humor. When you have to explain it, it's bad. - Cory House",
  "First, solve the problem. Then, write the code. - John Johnson",
  "Experience is the name everyone gives to their mistakes. - Oscar Wilde",
  "In order to be irreplaceable, one must always be different. - Coco Chanel",
  "The best error message is the one that never shows up. - Thomas Fuchs",
];

// MCP Server initialiseren
const server = new Server(
  {
    name: "quotes-server",
    version: "1.0.0",
  },
  {
    capabilities: {
      tools: {},
    },
  }
);

// Tool registreren
server.setRequestHandler(ListToolsRequestSchema, async () => {
  return {
    tools: [
      {
        name: "get_quote",
        description: "Get a random inspirational programming quote",
        inputSchema: {
          type: "object",
          properties: {},
        },
      },
      {
        name: "add_quote",
        description: "Add a new quote to the collection",
        inputSchema: {
          type: "object",
          properties: {
            quote: {
              type: "string",
              description: "The quote to add",
            },
          },
          required: ["quote"],
        },
      },
    ],
  };
});

// Tool calls afhandelen
server.setRequestHandler(CallToolRequestSchema, async (request) => {
  const { name, arguments: args } = request.params;

  if (name === "get_quote") {
    const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
    return {
      content: [
        {
          type: "text",
          text: randomQuote,
        },
      ],
    };
  }

  if (name === "add_quote") {
    quotes.push(args.quote);
    return {
      content: [
        {
          type: "text",
          text: `Quote added! Total quotes: ${quotes.length}`,
        },
      ],
    };
  }

  throw new Error(`Unknown tool: ${name}`);
});

// Server starten
async function main() {
  const transport = new StdioServerTransport();
  await server.connect(transport);
  console.error("Quotes MCP Server running on stdio");
}

main().catch((error) => {
  console.error("Server error:", error);
  process.exit(1);
});

Package.json Aanpassen

{
  "name": "mcp-quotes-server",
  "version": "1.0.0",
  "type": "module",
  "bin": {
    "mcp-quotes-server": "./index.js"
  },
  "dependencies": {
    "@modelcontextprotocol/sdk": "^0.5.0"
  }
}

Executable Maken

chmod +x index.js
npm link

Configureren in Claude Code

{
  "mcpServers": {
    "quotes": {
      "command": "mcp-quotes-server"
    }
  }
}

"Claude, geef me een inspirerende programming quote via de quotes server."

Uitbreiden naar Productie

try {
  // Server logic
} catch (error) {
  return {
    content: [
      {
        type: "text",
        text: `Error: ${error.message}`,
      },
    ],
    isError: true,
  };
}

import winston from 'winston';

const logger = winston.createLogger({
  level: 'info',
  format: winston.format.json(),
  transports: [
    new winston.transports.File({ filename: 'error.log', level: 'error' }),
    new winston.transports.File({ filename: 'combined.log' }),
  ],
});

import dotenv from 'dotenv';
dotenv.config();

const API_KEY = process.env.QUOTES_API_KEY;

import { describe, it, expect } from 'vitest';

describe('Quotes Server', () => {
  it('should return a quote', async () => {
    const result = await getQuote();
    expect(result).toBeDefined();
    expect(typeof result).toBe('string');
  });
});

Praktische Use Cases: MCP in Actie

Use Case 1: Automated Bug Reporting

1. Noteer bug details
2. Open GitHub in browser
3. Navigate naar Issues
4. Maak nieuw issue
5. Vul titel, beschrijving, labels in
6. Screenshot toevoegen
7. Team taggen
8. Terug naar je code

"Claude, ik zie een bug in de checkout flow. Maak een screenshot van de
huidige state, creëer een GitHub issue met deze screenshot, beschrijf
het probleem, label het als 'bug' en 'priority:high', en assign het
aan @sarah. Tag ook ons #bugs Slack channel."

Use Case 2: Database Schema Evolution

1. Open Supabase dashboard
2. Ga naar SQL editor
3. Schrijf migration
4. Test in development
5. Copy naar migration file
6. Update TypeScript types
7. Update documentatie

"Claude, ik ga user preferences toevoegen. Maak een Supabase migration
voor een 'user_preferences' tabel met kolommen: user_id (foreign key),
theme (text), language (text), notifications (boolean). Update daarna
onze TypeScript types in types/database.ts en documenteer de nieuwe
tabel in docs/schema.md."

Use Case 3: Release Management

1. Bump version in package.json
2. Update CHANGELOG
3. Commit changes
4. Create git tag
5. Push tag
6. Create GitHub release
7. Announce in Slack
8. Update documentation site

"Claude, we gaan versie 2.1.0 releasen met de nieuwe AI chat feature.
Update package.json, voeg entries toe aan CHANGELOG.md, maak een git
tag, push naar GitHub, creëer een release met release notes gebaseerd
op recent merged PRs, en announce het in #announcements op Slack."

Use Case 4: Code Quality Monitoring

"Claude, analyseer alle TypeScript files in src/ die we deze sprint hebben
aangepast (check GitHub commits van afgelopen 2 weken). Maak een rapport van:
- Functies langer dan 50 regels
- Bestanden zonder tests
- TODO comments die ouder zijn dan 1 maand
- Duplicated code patterns
Maak een GitHub issue voor elk gevonden probleem en assign aan de juiste developer."

Troubleshooting: Oplossingen voor Veelvoorkomende Problemen

Probleem 1: MCP Server Start Niet

• Claude rapporteert dat server niet beschikbaar is
• Tools uit die server zijn niet zichtbaar

node --version  # Moet v18 of hoger zijn
npm --version

# macOS
brew install node

# Windows (via installer van nodejs.org)

# Linux
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

"command": "npx"

"command": "/usr/local/bin/npx"  // macOS/Linux
"command": "C:/Program Files/nodejs/npx.cmd"  // Windows

which npx  # macOS/Linux
where npx  # Windows

npm list -g @modelcontextprotocol/server-github

npm install -g @modelcontextprotocol/server-github

Probleem 2: Environment Variables Werken Niet

• Server start, maar API calls falen
• "Unauthorized" of "Invalid token" errors

{
  "env": {
    "GITHUB_TOKEN": ghp_abc123  // ❌ Geen quotes
  }
}

{
  "env": {
    "GITHUB_TOKEN": "ghp_abc123"  // ✅ Met quotes
  }
}

{
  "GITHUB_TOKEN": "ghp_abc123!@#$%"  // ✅ Gewoon tussen quotes
}

console.log('GITHUB_TOKEN:', process.env.GITHUB_TOKEN);

GITHUB_TOKEN=ghp_test node test-env.js

Probleem 3: Permissions Errors

• "Access denied" bij filesystem operaties
• "Permission denied" bij GitHub/Supabase calls

ls -la /path/to/directory

chmod +r /path/to/directory  # Read access
chmod +w /path/to/directory  # Write access

1. Ga naar github.com/settings/tokens
2. Click op je token
3. Check dat deze scopes enabled zijn:

• repo (voor private repos)
• public_repo (voor public repos)
• read:org (voor organization access)

-- Verify RLS policies
SELECT * FROM pg_policies WHERE tablename = 'jouw_tabel';

-- Temporarily disable RLS voor testing (niet in productie!)
ALTER TABLE jouw_tabel DISABLE ROW LEVEL SECURITY;

Probleem 4: Server is Traag

• Claude antwoorden duren lang
• Timeouts bij MCP calls

tail -f ~/Library/Logs/Claude/mcp*.log

"Claude, haal alle users op uit de database"  // Kan miljoenen records zijn!

"Claude, haal de laatste 100 users op, gesorteerd op created_at"

const cache = new Map();
const CACHE_TTL = 5 * 60 * 1000; // 5 minuten

function getCachedData(key, fetchFunction) {
  const cached = cache.get(key);
  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
    return cached.data;
  }

  const data = fetchFunction();
  cache.set(key, { data, timestamp: Date.now() });
  return data;
}

Probleem 5: Config Changes Niet Actief

• Je update config maar servers werken niet
• Oude configuratie blijft actief

# Forceer quit
killall Claude

# Clear cache (optioneel, als hard restart niet helpt)
rm -rf ~/Library/Caches/Claude

# Start opnieuw
open -a Claude

1. Task Manager (Ctrl+Shift+Esc)
2. Find "Claude" proces
3. End Task
4. Start Claude opnieuw

killall claude-desktop
claude-desktop &

{
  "mcpServers": {
    "test": {},  // ← Extra comma
  }
}

Advanced Tips en Best Practices

1. Organiseer MCP Servers per Project

{
  "mcpServers": {
    "github": { /* Project A GitHub */ },
    "supabase-prod": { /* Project A Production DB */ }
  }
}

ln -sf ~/.claude/configs/project-a.json ~/Library/Application\ Support/Claude/claude_desktop_config.json

2. Security Hardening

# .gitignore
claude_desktop_config.json
*.env

export GITHUB_TOKEN=ghp_xxx
export SUPABASE_KEY=yyy

source ~/.claude-secrets.env && open -a Claude

• GitHub: Elke 90 dagen
• Supabase: Elke 180 dagen
• Set calendar reminders

3. Monitoring en Logging

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "DEBUG": "mcp:*",
        "LOG_LEVEL": "debug"
      }
    }
  }
}

import fs from 'fs';

function log(level, message, data = {}) {
  const entry = {
    timestamp: new Date().toISOString(),
    level,
    message,
    data,
  };

  fs.appendFileSync(
    'mcp-server.log',
    JSON.stringify(entry) + '\n'
  );
}

// Gebruik
log('info', 'Tool called', { tool: 'get_quote' });
log('error', 'API call failed', { error: err.message });

4. Performance Optimization

{
  "mcpServers": {
    // Altijd actief (lightweight)
    "filesystem": { /* ... */ },

    // On-demand activeren (heavy)
    // Uncomment wanneer nodig:
    // "playwright": { /* ... */ },
    // "supabase-prod": { /* ... */ }
  }
}

import { Pool } from 'pg';

const pool = new Pool({
  max: 5, // Max 5 simultane connecties
  idleTimeoutMillis: 30000,
});

// Gebruik pool in plaats van individuele clients
const result = await pool.query('SELECT * FROM users');

MCP en de Toekomst van Development

Wat Komt Eraan?

Waarom Dit Belangrijk is voor Jouw Carrière

Conclusie: De Kracht van MCP Benutten

Key Takeaways

Volgende Stappen

1. Installeer filesystem MCP server
2. Experimenteer met basis commando's
3. Voeg GitHub server toe
4. Bouw je eerste custom server (gebruik de quotes tutorial)

1. Set up project-specific MCP configs
2. Build custom servers voor je team workflows
3. Implement security best practices
4. Share je servers met de community

• Lees de officiële MCP specificatie
• Join de MCP community op Discord
• Contribute aan open source MCP servers
• Volg een vibe coding cursus om MCP in context te leren

Blijf Leren