Lab 3.4 : Se Connecter au Monde Extérieur

Module : 3.4 - Intégration MCP | ← SlidesDurée : 30 minutes Projet Exemple : hackathon-starter

Objectifs d'Apprentissage

À la fin de ce lab, vous serez capable de :

• Comprendre ce qu'est MCP (Model Context Protocol)
• Configurer Claude pour utiliser des serveurs MCP
• Utiliser des outils externes dans vos prompts
• Intégrer des données externes dans vos tâches de développement

Prérequis

• Avoir complété les labs précédents du Jour 3
• Node.js installé
• Compréhension de base des APIs

Qu'est-ce que MCP ?

Model Context Protocol est un standard pour connecter les assistants IA à des outils et sources de données externes.

Sans MCP, Claude est limité à :

• Lire des fichiers locaux
• Exécuter des commandes shell
• Effectuer des recherches web

Avec MCP, Claude peut :

• Interroger des bases de données
• Récupérer des tickets Jira
• Accéder à des designs Figma
• Appeler toute API que vous configurez

Configuration

# Naviguez vers le projet exemple
cd sample-projects/hackathon-starter

# Démarrez Claude Code
claude

---

Tâche 1 : Explorer les Outils MCP Intégrés

Durée : 10 minutes

Claude Code dispose de certaines capacités intégrées. Explorons ce qui est disponible.

Vérifier les outils disponibles :

Quels serveurs MCP sont actuellement connectés ?

Essayer la capacité de récupération web :

Récupère l'API GitHub pour obtenir des infos sur le repo hackathon-starter :
https://api.github.com/repos/sahat/hackathon-starter

Critères de réussite :

• [ ] Comprendre quels outils sont disponibles
• [ ] Avoir récupéré des données externes avec succès

---

Tâche 2 : Utiliser des Données Externes dans le Code

Durée : 10 minutes

Utilisez maintenant les données récupérées pour informer une tâche de développement.

Prompt :

1. Récupère les infos de la dernière release depuis : https://api.github.com/repos/sahat/hackathon-starter/releases/latest
2. D'après les notes de release, identifie ce qui a changé
3. Vérifie si notre codebase local pourrait être affecté par ces changements

Alternative s'il n'y a pas de releases :

1. Récupère le package.json depuis : https://raw.githubusercontent.com/sahat/hackathon-starter/master/package.json
2. Compare-le avec notre package.json local
3. Identifie les différences de versions des dépendances

Critères de réussite :

• [ ] Données externes récupérées
• [ ] Données utilisées pour informer l'analyse
• [ ] Insights actionnables générés

---

Tâche 3 : Comprendre la Configuration MCP

Durée : 10 minutes

Apprenez comment les serveurs MCP sont configurés.

Voir la configuration MCP :

# Vérifier la config MCP globale
cat ~/.claude/settings.json | grep -A 20 "mcpServers"

# Ou demandez à Claude

Prompt :

Montre-moi comment configurer un serveur MCP dans les paramètres de Claude Code.
À quoi ressemblerait la configuration pour un serveur Jira hypothétique ?

Exemple de structure de configuration MCP :

{
  "mcpServers": {
    "jira": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-server-jira"],
      "env": {
        "JIRA_URL": "https://votre-entreprise.atlassian.net",
        "JIRA_TOKEN": "votre-token-api"
      }
    }
  }
}

Critères de réussite :

• [ ] Comprendre la structure de configuration MCP
• [ ] Savoir où les paramètres sont stockés
• [ ] Pouvoir expliquer comment ajouter un nouveau serveur MCP

---

Cas d'Usage MCP

Serveur MCP	Cas d'Usage
Jira	"Récupère le ticket PROJ-123 et implémente-le"
Figma	"Obtiens le design de la page de connexion"
Database	"Interroge la table users pour le schéma"
Slack	"Envoie une notification de déploiement"
GitHub	"Liste les PRs ouvertes pour ce repo"

---

Comment Fonctionne MCP

Votre Prompt → Claude → Serveur MCP → Outil Externe → Réponse → Claude → Votre Réponse

1. Vous demandez à Claude quelque chose qui nécessite des données externes
2. Claude reconnaît qu'un outil MCP peut aider
3. Claude appelle le serveur MCP
4. Le serveur MCP récupère les données de la source externe
5. Les données reviennent à Claude
6. Claude les incorpore dans la réponse

---

Conseils pour Réussir

1. Commencez en lecture seule - Récupérez des données avant d'autoriser les écritures
2. Sécurisez les credentials - Utilisez des variables d'environnement, pas des tokens en dur
3. Testez de manière incrémentale - Vérifiez que chaque serveur MCP fonctionne avant de les combiner

---

Dépannage

Serveur MCP non trouvé :

• Vérifiez que le serveur est installé (les commandes npx téléchargent à la première utilisation)
• Vérifiez que le chemin de la commande est correct

Erreurs d'authentification :

• Assurez-vous que les variables d'environnement sont définies
• Vérifiez que les tokens API n'ont pas expiré

Erreurs de timeout :

• Le service externe peut être lent
• Essayez d'abord des requêtes plus simples

---

Serveurs MCP Courants

Serveurs officiels Anthropic :

• @anthropic/mcp-server-github - Intégration GitHub
• @anthropic/mcp-server-slack - Intégration Slack
• @anthropic/mcp-server-postgres - Requêtes PostgreSQL

Serveurs communautaires :

• Recherchez "mcp-server-*" sur npmjs.com

---

Objectifs Bonus

Si vous terminez en avance :

1. Recherchez les serveurs MCP disponibles sur npm
2. Planifiez quelles intégrations MCP aideraient vos vrais projets
3. Rédigez une proposition de serveurs MCP que votre équipe devrait adopter

---

Livrables

À la fin de ce lab, vous devriez avoir :

1. Une compréhension de l'architecture MCP
2. De l'expérience dans l'utilisation de données externes dans les prompts
3. Une connaissance de la configuration MCP
4. Des idées de serveurs MCP utiles pour votre équipe

---

Prochaines Étapes

Après avoir complété ce lab, passez au Lab 3.5 : Revue par les Pairs IA.