MCP Servers et Claude Code : Guide Complet | IQ Project

Tu utilises Claude Code au quotidien, mais tu as l'impression de n'exploiter qu'une fraction de sa puissance ? C'est normal. Sans MCP servers, Claude Code reste un assistant brillant mais isolé — incapable d'accéder à ta base de données, de lancer tes tests, ou de consulter tes issues GitHub. Le Model Context Protocol change radicalement la donne : il transforme Claude Code en hub central connecté à tous tes outils de développement.

Dans ce guide, on va explorer en profondeur comment les Claude Code MCP servers fonctionnent, comment les configurer, et surtout quels sont les serveurs indispensables pour tout vibe coder sérieux en 2026.

Qu'est-ce que MCP (Model Context Protocol) ?

Le Model Context Protocol est un standard ouvert créé par Anthropic pour permettre aux applications d'IA de communiquer avec des outils externes de manière structurée et sécurisée. Concrètement, MCP définit un langage commun entre Claude Code (le client) et n'importe quel service externe (le serveur) — qu'il s'agisse d'une base de données, d'un navigateur web, d'un outil de monitoring ou d'une API tierce.

Pense à MCP comme un port USB universel pour l'IA. Avant MCP, chaque intégration nécessitait un connecteur sur mesure. Aujourd'hui, n'importe quel outil peut exposer ses fonctionnalités via un MCP server, et n'importe quel client compatible (Claude Code, Claude Desktop, VS Code, Cursor...) peut s'y connecter instantanément.

Ce qui rend MCP révolutionnaire :

Standard ouvert : donné à la Linux Foundation (Agentic AI Foundation), MCP est neutre et communautaire
Adoption massive : OpenAI, Google, Microsoft, Replit, Sourcegraph — tous supportent MCP
Écosystème riche : des centaines de serveurs disponibles, du filesystem local aux API cloud
Sécurisé par design : système de permissions granulaires, sandbox, OAuth 2.0

Comment MCP fonctionne : l'architecture expliquée

Pour bien utiliser les MCP servers, il faut comprendre l'architecture sous-jacente. Pas besoin d'être expert en protocoles réseau — les concepts sont simples.

Le modèle client-serveur

MCP suit une architecture client-serveur classique avec trois acteurs :

Host MCP : l'application IA (Claude Code, Claude Desktop, VS Code). C'est le cerveau qui orchestre
Client MCP : un composant interne au host qui maintient la connexion avec un serveur spécifique
Serveur MCP : le programme qui expose les fonctionnalités d'un outil (Supabase, GitHub, Playwright...)

Quand tu lances Claude Code avec des MCP servers configurés, le host crée un client MCP dédié pour chaque serveur. Chaque client maintient sa propre connexion, ce qui permet d'interroger plusieurs outils simultanément — par exemple, vérifier un bug dans Sentry tout en consultant le code sur GitHub.

Le protocole JSON-RPC 2.0

Sous le capot, MCP utilise JSON-RPC 2.0 comme format d'échange. Trois types de messages circulent :

Requête (Request) : message avec un method et un id — le client demande quelque chose au serveur
Réponse (Response) : message avec un result (ou error) et un id — le serveur répond
Notification : message avec un method mais sans id — information envoyée sans attendre de réponse

Les transports : stdio vs HTTP

MCP supporte deux mécanismes de transport principaux :

stdio (Standard I/O) : communication directe via les entrées/sorties standard. Idéal pour les serveurs locaux (filesystem, scripts). Aucun overhead réseau, performances optimales
Streamable HTTP : utilise HTTP POST avec Server-Sent Events (SSE) optionnels. Conçu pour les serveurs distants (Sentry, GitHub, Notion). Supporte l'authentification OAuth 2.0

Le transport SSE classique existe encore mais est considéré comme déprécié au profit du Streamable HTTP.

Les primitives MCP

Chaque serveur MCP peut exposer trois types de primitives :

Tools (outils) : des fonctions exécutables — requêter une BDD, prendre une capture d'écran, créer une issue
Resources (ressources) : des sources de données — schémas de base, contenus de fichiers, réponses d'API
Prompts (modèles) : des templates réutilisables pour structurer les interactions avec le LLM

Configurer un MCP server dans Claude Code

Passons à la pratique. Claude Code propose trois méthodes pour ajouter un MCP server, adaptées à différents cas d'usage.

Méthode 1 : la commande `claude mcp add`

La façon la plus simple et la plus courante :

# Serveur HTTP distant (recommandé pour les services cloud)
claude mcp add --transport http sentry https://mcp.sentry.dev/mcp

# Serveur stdio local (pour les outils qui tournent sur ta machine)
claude mcp add --transport stdio playwright -- npx -y @playwright/mcp@latest

# Avec des variables d'environnement
claude mcp add --transport stdio supabase \
  --env SUPABASE_ACCESS_TOKEN=sbp_xxx \
  -- npx -y @supabase/mcp-server

Point important : toutes les options (--transport, --env, --scope) doivent être placées avant le nom du serveur. Le double tiret -- sépare ensuite le nom du serveur de la commande à exécuter.

Méthode 2 : le fichier `.mcp.json` (scope projet)

Pour partager la configuration MCP avec toute ton équipe, utilise le scope project :

claude mcp add --transport stdio --scope project supabase \
  --env SUPABASE_ACCESS_TOKEN=sbp_xxx \
  -- npx -y @supabase/mcp-server

Cela crée (ou met à jour) un fichier .mcp.json à la racine du projet :

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

Ce fichier peut être versionné dans Git. Chaque développeur de l'équipe aura automatiquement accès aux mêmes outils MCP. Les variables d'environnement utilisent la syntaxe ${VAR} pour rester sécurisées — chacun définit ses propres tokens localement.

Méthode 3 : configuration globale (scope user)

Pour les serveurs que tu veux disponibles dans tous tes projets :

claude mcp add --transport http --scope user github https://api.githubcopilot.com/mcp/

Cette configuration est stockée dans ~/.claude.json et reste privée.

Les trois scopes résumés

Scope	Stockage	Partage	Usage typique
local (défaut)	`~/.claude.json` (par projet)	Privé, projet courant	Développement personnel, tests
project	`.mcp.json` (racine projet)	Équipe (via Git)	Outils partagés d'équipe
user	`~/.claude.json` (global)	Privé, tous projets	Outils personnels transversaux

Gérer tes serveurs MCP

# Lister tous les serveurs configurés
claude mcp list

# Voir les détails d'un serveur
claude mcp get supabase

# Supprimer un serveur
claude mcp remove playwright

# Dans Claude Code, vérifier le statut
/mcp

Les meilleurs MCP servers pour le Vibe Coding

Avec des centaines de MCP servers disponibles, lesquels valent vraiment le coup ? Voici les incontournables pour tout vibe coder qui veut maximiser sa productivité.

Supabase MCP : ta base de données à portée de prompt

Le Supabase MCP server est probablement le plus transformateur pour le vibe coding fullstack. Il donne à Claude Code un accès direct à ta base de données PostgreSQL, ton authentification, ton storage et tes Edge Functions.

Ce que tu peux faire :

Requêter ta base de données en langage naturel : « Montre-moi les utilisateurs inscrits ce mois-ci »
Créer et appliquer des migrations SQL
Lister tes tables, extensions, fonctions Edge
Générer des types TypeScript depuis ton schéma
Consulter les logs et les advisors de performance

Installation :

claude mcp add --transport stdio supabase \
  --env SUPABASE_ACCESS_TOKEN=sbp_your_token \
  -- npx -y @supabase/mcp-server

Pour obtenir ton SUPABASE_ACCESS_TOKEN, rends-toi sur supabase.com/dashboard/account/tokens.

Playwright MCP : tests browser et automatisation

Le Playwright MCP server permet à Claude Code de contrôler un navigateur — prendre des screenshots, remplir des formulaires, cliquer sur des éléments, exécuter du JavaScript dans la page. C'est le compagnon idéal pour les tests end-to-end.

Ce que tu peux faire :

Tester visuellement ton interface : « Prends une capture d'écran de la page de login sur mobile »
Automatiser des workflows : « Remplis le formulaire d'inscription et vérifie la redirection »
Débugger des problèmes UI en temps réel
Valider que les données Supabase s'affichent correctement dans le navigateur

Installation :

claude mcp add --transport stdio playwright \
  -- npx -y @playwright/mcp@latest

GitHub MCP : repos, issues et PRs

Le GitHub MCP server officiel connecte Claude Code à l'écosystème GitHub. Fini le copier-coller de code depuis l'interface web.

Ce que tu peux faire :

Reviewer des pull requests : « Analyse la PR #42 et suggère des améliorations »
Créer des issues depuis Claude Code
Rechercher du code dans tes repos (bien plus puissant que grep)
Consulter les PRs assignées, les checks CI/CD

Installation :

claude mcp add --transport http github https://api.githubcopilot.com/mcp/

# Puis authentifie-toi dans Claude Code
/mcp
# Sélectionne "Authenticate" pour GitHub

Sentry MCP : monitoring des erreurs en temps réel

Sentry MCP connecte Claude Code à ton monitoring d'erreurs. Plus besoin d'ouvrir l'interface Sentry — Claude Code peut analyser les stack traces et suggérer des corrections directement.

Installation :

claude mcp add --transport http sentry https://mcp.sentry.dev/mcp

# Authentification OAuth
/mcp

Exemples de requêtes :

« Quelles sont les erreurs les plus fréquentes ces dernières 24 heures ? »
« Montre le stack trace de l'erreur ABC123 et propose un fix »
« Quel déploiement a introduit ces nouvelles erreurs ? »

Fetch MCP : requêtes HTTP et scraping

Le Fetch MCP server permet à Claude Code de récupérer du contenu web et de le convertir dans un format exploitable par le LLM. Utile pour consulter des documentations, des API REST, ou scraper des pages.

Installation :

claude mcp add --transport stdio fetch \
  -- npx -y @modelcontextprotocol/server-fetch

Filesystem MCP : accès fichiers contrôlé

Le Filesystem MCP server offre un accès sécurisé au système de fichiers avec des contrôles d'accès configurables. Contrairement à l'accès fichier natif de Claude Code, ce serveur permet de définir précisément quels répertoires sont accessibles.

Installation :

claude mcp add --transport stdio filesystem \
  -- npx -y @modelcontextprotocol/server-filesystem /chemin/autorise

Configuration complète recommandée

Voici un .mcp.json type pour un projet de vibe coding fullstack :

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": ["-y", "@supabase/mcp-server"],
      "env": {
        "SUPABASE_ACCESS_TOKEN": "${SUPABASE_ACCESS_TOKEN}"
      }
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    },
    "fetch": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-fetch"]
    }
  }
}

Cas d'usage concrets : MCP en action

La théorie c'est bien, la pratique c'est mieux. Voici trois scénarios réels où les MCP servers transforment le workflow d'un vibe coder.

Cas 1 : développement fullstack avec Supabase MCP

Imagine que tu construis une application SaaS. Sans MCP, tu alternes constamment entre Claude Code, le dashboard Supabase et ton navigateur. Avec Supabase MCP, une seule conversation suffit :

Tu demandes à Claude Code de créer la migration SQL pour ta table users
Claude applique la migration via le MCP server — pas besoin de copier-coller dans le SQL Editor
Tu lui demandes de générer les types TypeScript depuis le schéma mis à jour
Claude crée les composants React qui utilisent ces types et la librairie Supabase client
Tu vérifies les logs directement depuis Claude Code si quelque chose ne fonctionne pas

Résultat : un workflow fullstack sans quitter le terminal.

Cas 2 : tests end-to-end avec Playwright MCP

Tu viens de finir une feature. Au lieu d'écrire tes tests à la main :

« Navigue vers /login, remplis le formulaire avec test@example.com / password123, et vérifie que la redirection vers /dashboard fonctionne »
Claude utilise Playwright MCP pour contrôler le navigateur, exécuter le scénario et te rapporter le résultat
« Maintenant prends un screenshot de la page dashboard en vue mobile (375px) »
Claude prend la capture et l'intègre dans la conversation

La combinaison Supabase MCP + Playwright MCP est particulièrement puissante : tu peux vérifier qu'un composant affiche les bonnes données en interrogeant la base et en vérifiant le rendu navigateur dans la même conversation.

Cas 3 : debugging avec Sentry + GitHub

Un bug en production ? Voici le workflow avec MCP :

« Quelles sont les erreurs les plus fréquentes sur Sentry ces dernières 24h ? »
Sentry MCP remonte les erreurs avec leurs stack traces
« Quelle PR a introduit cette régression ? » — GitHub MCP identifie le commit responsable
Claude Code propose un fix, crée une branche et ouvre une PR de correction

De la détection du bug au fix déployé, tout se passe dans une seule conversation Claude Code.

Prêt à maîtriser ces workflows ?

Notre formation Vibe Coding t'apprend à configurer et exploiter les MCP servers pour construire des applications complètes en un temps record. De l'idée au produit déployé en 8 soirées.

MCP Tool Search : le chargement intelligent des outils

Quand tu connectes beaucoup de MCP servers, les définitions de tous les outils disponibles peuvent consommer une part importante de ta fenêtre de contexte. C'est là qu'intervient le MCP Tool Search.

Comment ça fonctionne

Claude Code active automatiquement le Tool Search quand les descriptions des outils MCP dépassent 10 % de la fenêtre de contexte. Au lieu de charger tous les outils en mémoire, Claude utilise un mécanisme de lazy loading :

Les outils MCP sont différés plutôt que chargés en amont
Quand Claude a besoin d'un outil, il effectue une recherche parmi les outils disponibles
Seuls les outils pertinents sont chargés dans le contexte
Du point de vue de l'utilisateur, tout fonctionne de manière transparente

Configurer le Tool Search

Tu peux contrôler le comportement via la variable d'environnement ENABLE_TOOL_SEARCH :

Valeur	Comportement
`auto` (défaut)	S'active quand les outils MCP dépassent 10 % du contexte
`auto:5`	Seuil personnalisé à 5 %
`true`	Toujours actif
`false`	Désactivé, tous les outils chargés d'office

# Seuil personnalisé à 5 %
ENABLE_TOOL_SEARCH=auto:5 claude

# Désactiver complètement
ENABLE_TOOL_SEARCH=false claude

Note : le Tool Search nécessite Sonnet 4 ou Opus 4 (et versions ultérieures). Les modèles Haiku ne le supportent pas.

Créer son propre MCP server

L'écosystème MCP ne se limite pas aux serveurs existants. Tu peux créer ton propre MCP server pour exposer n'importe quelle fonctionnalité à Claude Code — une API interne, un outil métier, un workflow spécifique.

Le SDK TypeScript officiel

Le plus simple est d'utiliser le SDK TypeScript officiel (@modelcontextprotocol/sdk). Voici la structure de base :

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";

const server = new McpServer({
  name: "mon-serveur-custom",
  version: "1.0.0",
});

// Définir un outil
server.tool(
  "saluer_utilisateur",
  "Salue un utilisateur par son prénom",
  { prenom: z.string() },
  async ({ prenom }) => ({
    content: [{ type: "text", text: `Bonjour ${prenom} !` }],
  })
);

// Lancer le serveur
const transport = new StdioServerTransport();
await server.connect(transport);

Pour le connecter à Claude Code :

claude mcp add --transport stdio mon-serveur -- node mon-serveur.js

Les possibilités sont immenses : connecter un CRM interne, exposer des métriques business, automatiser des processus métier — tout ce qui peut être modélisé en outils, ressources ou prompts peut devenir un MCP server.

Bonnes pratiques

Descriptions claires : chaque outil doit avoir une description précise pour que Claude sache quand l'utiliser
Schémas stricts : utilise Zod ou JSON Schema pour valider les entrées
Gestion d'erreurs : retourne des messages d'erreur exploitables, pas des stack traces brutes
Tests : utilise le MCP Inspector pour tester ton serveur avant de le connecter

Sécurité : permissions, sandbox et risques

Les MCP servers sont puissants, mais cette puissance implique des responsabilités. Anthropic le rappelle clairement : les MCP servers tiers ne sont ni vérifiés ni audités par Anthropic. C'est à toi de faire preuve de vigilance.

Les risques principaux

Prompt injection : un serveur malveillant peut manipuler les instructions pour faire exécuter des actions non souhaitées à Claude Code
Exfiltration de données : un outil compromis peut accéder à des fichiers sensibles ou des tokens stockés localement
Exécution de code arbitraire : certaines vulnérabilités critiques ont été découvertes (CVE-2025-6514 sur mcp-remote, CVSS 9.6)

Les protections de Claude Code

Claude Code intègre un sandbox OS-level qui utilise bubblewrap sur Linux et seatbelt sur macOS. Ce sandbox :

Bloque l'accès au système de fichiers en dehors des répertoires autorisés
Empêche les requêtes réseau sauf vers les domaines explicitement autorisés
Isole l'exécution des processus du système hôte
Réduit les prompts de permission de 84 % en usage interne chez Anthropic

Bonnes pratiques de sécurité

N'installe que des serveurs de confiance : privilégie les serveurs officiels (GitHub, Supabase, Sentry) et les serveurs référencés sur le repo officiel MCP
Utilise des tokens à permissions limitées : jamais un token admin quand un token en lecture seule suffit
Ne commite jamais tes secrets : utilise la syntaxe ${VAR} dans .mcp.json et définis les variables d'environnement localement
Revois les permissions : la commande /mcp permet de voir et révoquer les accès
Sois prudent avec les serveurs qui récupèrent du contenu externe : ils sont exposés aux risques de prompt injection

Pour les entreprises soucieuses de sécurité, Claude Code propose aussi un système de configuration managée (managed-mcp.json) qui permet aux administrateurs IT de verrouiller les serveurs MCP autorisés.

Claude Code comme MCP server

Détail souvent méconnu : Claude Code peut lui-même fonctionner comme un MCP server. Cela signifie que d'autres applications peuvent se connecter à Claude Code pour exploiter ses capacités d'édition de fichiers et d'exécution de commandes.

# Lancer Claude Code en mode serveur MCP
claude mcp serve

Tu peux par exemple connecter Claude Desktop à Claude Code en ajoutant cette configuration :

{
  "mcpServers": {
    "claude-code": {
      "type": "stdio",
      "command": "claude",
      "args": ["mcp", "serve"],
      "env": {}
    }
  }
}

C'est une fonctionnalité avancée, mais elle ouvre des possibilités intéressantes pour les workflows multi-agents — par exemple, un agent dans Claude Desktop qui délègue l'édition de code à Claude Code via MCP. C'est d'ailleurs l'une des compétences que développent les participants de notre bootcamp Vibe Coding pour orchestrer des systèmes d'IA complexes.

L'avenir de MCP : un écosystème en expansion

MCP n'en est qu'à ses débuts, et la roadmap 2026 est ambitieuse.

Le MCP Registry

Lancé en preview en septembre 2025, le MCP Registry évolue vers une disponibilité générale. Il offrira un annuaire centralisé de serveurs MCP avec métadonnées, versioning et statut de vérification. Des marketplaces tierces pourront s'appuyer sur cette API.

MCP Apps : l'IA interactive

Début 2026, Anthropic a dévoilé MCP Apps — la première extension officielle du protocole. Les outils MCP peuvent désormais retourner des composants UI interactifs rendus directement dans le chat. Rédiger un brouillon Slack, visualiser un diagramme Figma, piloter un timeline Asana — tout cela sans quitter Claude.

OpenAI et Anthropic ont d'ailleurs collaboré sur cette extension (SEP-1865), signe que MCP s'impose comme le standard universel de l'IA agentique.

Standardisation et gouvernance

Anthropic a donné MCP à la Linux Foundation (Agentic AI Foundation), garantissant que le protocole reste ouvert, neutre et piloté par la communauté. Si 2025 a été l'année de l'adoption, 2026 est celle de l'expansion — avec des spécifications stabilisées et des cadres de conformité pour l'adoption en entreprise.

Pour les vibe coders, cela signifie un écosystème toujours plus riche de serveurs MCP, une meilleure interopérabilité entre outils, et la certitude que maîtriser MCP aujourd'hui est un investissement durable.

Conclusion

Les MCP servers transforment Claude Code d'un assistant de codage isolé en véritable hub central de développement. En connectant Supabase pour les données, Playwright pour les tests, GitHub pour la collaboration et Sentry pour le monitoring, tu crées un environnement de travail où tout se pilote depuis une seule conversation.

La configuration est simple — quelques commandes claude mcp add ou un fichier .mcp.json partagé avec ton équipe — et les gains de productivité sont immédiats. Si tu pratiques déjà le vibe coding, les MCP servers sont le prochain niveau d'efficacité à débloquer.

Commence par installer Supabase MCP et Playwright MCP sur ton projet en cours. Expérimente. Et si tu veux aller plus loin, le repo officiel MCP recense des centaines de serveurs prêts à l'emploi. L'écosystème ne fait que grandir.

MCP Servers et Claude Code : Connecter l'IA à Tous Vos Outils

Qu'est-ce que MCP (Model Context Protocol) ?

Comment MCP fonctionne : l'architecture expliquée

Le modèle client-serveur

Le protocole JSON-RPC 2.0

Les transports : stdio vs HTTP

Les primitives MCP

Configurer un MCP server dans Claude Code

Méthode 1 : la commande claude mcp add

Méthode 2 : le fichier .mcp.json (scope projet)

Méthode 3 : configuration globale (scope user)

Les trois scopes résumés

Gérer tes serveurs MCP

Les meilleurs MCP servers pour le Vibe Coding

Supabase MCP : ta base de données à portée de prompt

Playwright MCP : tests browser et automatisation

GitHub MCP : repos, issues et PRs

Sentry MCP : monitoring des erreurs en temps réel

Fetch MCP : requêtes HTTP et scraping

Filesystem MCP : accès fichiers contrôlé

Configuration complète recommandée

Cas d'usage concrets : MCP en action

Cas 1 : développement fullstack avec Supabase MCP

Cas 2 : tests end-to-end avec Playwright MCP

Cas 3 : debugging avec Sentry + GitHub

MCP Tool Search : le chargement intelligent des outils

Comment ça fonctionne

Configurer le Tool Search

Créer son propre MCP server

Le SDK TypeScript officiel

Bonnes pratiques

Sécurité : permissions, sandbox et risques

Les risques principaux

Les protections de Claude Code

Bonnes pratiques de sécurité

Claude Code comme MCP server

L'avenir de MCP : un écosystème en expansion

Le MCP Registry

MCP Apps : l'IA interactive

Standardisation et gouvernance

Conclusion

Pour approfondir

Sources

Articles similaires

Claude Design vs Lovable : quel outil IA choisir pour créer son site ou son app en 2026 ?

Automatiser son workflow avec les plugins Claude Cowork : tutoriel avancé

Claude Cowork : Le Guide Complet de l'Agent IA qui Travaille à Votre Place

Prêt à vous lancer ?

Méthode 1 : la commande `claude mcp add`

Méthode 2 : le fichier `.mcp.json` (scope projet)