Incorporez du contexte ciblé et des outils MCP dans votre environnement VS Code

Dans le chapitre précédent, vous avez transformé votre fichier  AGENTS.md  en une spécification exécutable. Pour que votre agent exécute sa mission sans dériver, il doit accéder aux bons fichiers de votre application Express/Prisma sans engorger sa fenêtre de contexte, et disposer d'outils via le protocole MCP (Model Context Protocol). Dans ce chapitre, vous allez apprendre à sélectionner un contexte ciblé, exploiter l'indexation sémantique de VS Code, configurer un serveur MCP local (  .vscode/mcp.json  ) et sécuriser vos variables d'environnement dans Node.js (  .env  et  process.env  ). Vous dotez ainsi votre agent d'une sélection de contexte optimale et raccordez un serveur MCP local sécurisé.

Sélectionnez les fichiers pertinents du projet pour préserver la fenêtre de contexte

Pour maximiser l'efficacité de votre agent, vous devez sélectionner soigneusement les fichiers transmis dans chaque requête.

Chaque modèle de langage dispose d'une fenêtre de contexte limitée. Injecter l'intégralité de votre dépôt sature cette mémoire de travail, ralentit les réponses et dégrade la précision du raisonnement.

Pour préserver la fenêtre de contexte, appliquez un ciblage explicite :

  • Sélection manuelle : Attachez uniquement les fichiers utiles (prisma/schema.prisma,src/controllers/product.controller.ts).

  • Mentions ciblées : Utilisez les variables de contexte (ex.#file:schema.prisma) pour désigner les sources.

Dans VS Code, ouvrez le panneau Chat Copilot.

Attachez  prisma/schema.prisma  et  src/controllers/product.controller.ts  pour démarrer votre session de génération.

Schéma comparatif sous forme d'entonnoirs montrant qu'une injection massive dégrade les performances, tandis qu'une sélection restreinte à schema.prisma et au contrôleur optimise la précision.
Filtrage du contexte : Sélection ciblée vs Injection massive

Exploitez la recherche sémantique et l'indexation de workspace de VS Code

VS Code construit un index sémantique de votre espace de travail. Contrairement à une recherche textuelle classique, il permet à l'agent de retrouver du code selon sa signification conceptuelle et ses relations structurelles.

Cette recherche fonctionne de manière complémentaire à votre guidage :

  • Recherche automatique : L'agent utilise la recherche dans le codebase (#codebase) si des informations manquent.

  • Recherche de symboles : L'agent fait le lien entre un DTO Express et le modèle Prisma correspondant.

Puis-je me reposer uniquement sur l'indexation automatique de VS Code ?

Non. Même si l'indexation aide l'agent à naviguer, fournir explicitement les fichiers sources clés garantit qu'aucune dépendance critique ne sera omise.

Exécutez une recherche de symboles sur les DTOs Prisma dans VS Code pour observer comment l'agent retrouve la structure des objets de réponse.

Raccordez un serveur MCP local via la configuration mcp.json

Le Model Context Protocol (MCP) est un standard ouvert permettant aux modèles d'IA d'interagir avec des outils externes. En configurant un serveur MCP local via le transport Standard I/O (stdio), vous fournissez à l'agent des fonctions d'inspection avancées.

La configuration s'effectue dans le fichier  .vscode/mcp.json   à la racine du projet :

{
  "servers": {
    "filesystem": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "${workspaceFolder}"]
    }
  }
}

Créez le fichier  .vscode/mcp.json  dans votre projet Express/Prisma pour déclarer un serveur MCP local d'inspection du système de fichiers.

Dans la vidéo suivante, vous allez apprendre à configurer un serveur MCP local dans VS Code pour permettre à votre agent IA d'accéder à de nouveaux outils et d'interagir avec votre environnement de travail.

Étapes clés de la démonstration

  1. Créez le fichier.vscode/mcp.jsonet configurez un serveur MCPfilesystemen définissant la commandenpxet ses arguments.

  2. Démarrez le serveur MCP en approuvant la demande de confiance, puis vérifiez son statut dans le panneau dédié de VS Code.

  3. Explorez les outils disponibles dans la vue Chat pour identifier les fonctionnalités exposées par le serveur MCP.

  4. Testez le fonctionnement du serveur en demandant à l'agent d'inspecter un dossier, puis vérifiez le résultat de son interaction avec les outils MCP.

Vous savez désormais connecter et tester un serveur MCP local pour étendre les capacités de votre agent. Voyons maintenant comment sécuriser les variables d'environnement et les clés d'accès associées.

Protégez les clés d'API et variables d'environnement dans Node.js

Pour gérer les secrets applicatifs dans Node.js, stockez les clés dans un fichier  .env  et accédez-y via  process.env  . Dans  .vscode/mcp.json  , la section "inputs" permet de demander une valeur dynamiquement à l'utilisateur sans inscrire de secret en dur.

Dans le cadre de l'évolution de l'API REST Express/Prisma, l'équipe back-end introduit l'authentification par jeton JWT (JSON Web Token) pour sécuriser les routes privées (ex.  /api/v1/orders  ). Pour que votre agent documente correctement ces endpoints dans la spécification OpenAPI (déclaration de securitySchemes et du header  Authorization: Bearer <token>  , déclarez la variable  JWT_SECRET  dans le fichier  .env  . L'agent comprendra la structure des requêtes authentifiées sans qu'aucun secret ne soit exposé.

Configurez votre serveur MCP local dans  .vscode/mcp.json  et renseignez uniquement les paramètres nécessaires à son fonctionnement, puis créez le fichier  .env.example  en y documentant la variable  JWT_SECRET  .

Schéma de flux sécurisé montrant comment une variable saisie via la section inputs de mcp.json est transmise à process.env sans jamais inscrire de clé en dur dans les fichiers versionnés.
Architecture de sécurité du fichier mcp.json

À vous de jouer !

Contexte

Vous devez équiper VS Code du serveur MCP local permettant à votre agent de lire le schéma Prisma et de générer la spec OpenAPI en toute sécurité, tout en gérant le secret de signature JWT.

Consignes

Rédigez la configuration  .vscode/mcp.json  pour intégrer un serveur MCP local studio, configurez la demande sécurisée de la clé via les inputs, et préparez le fichier  .env.example  .

En résumé

  • Sélectionnez précisément les fichiers utiles (commeschema.prismaet les contrôleurs Express) pour préserver la fenêtre de contexte et optimiser la qualité du raisonnement de l'agent.

  • Exploitez la recherche sémantique de VS Code pour permettre à l'agent de naviguer intelligemment entre les DTO et les modèles Prisma.

  • Raccordez un serveur MCP local via.vscode/mcp.jsonpour étendre les capacités de l'agent tout en maintenant le processus rattaché à VS Code en stdio.

  • Protégez vos variables sensibles (telles queJWT_SECRET) en utilisant les fichiers.envet la sectioninputsdemcp.jsonpour éviter toute fuite de secret dans Git.

Vous avez incorporé du contexte ciblé et des outils MCP dans votre environnement VS Code ! Vous pouvez maintenant poursuivre avec le chapitre suivant pour évaluer, sécuriser et intégrer les productions de votre agent dans un flux de travail Git.

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous