Service MCP de VS Code

MCP (Model Context Protocol) est une norme ouverte qui fournit une interface unifiée, permettant aux modèles d'IA (tels que Copilot Chat) de découvrir et d'appeler des outils externes, ce qui permet de nombreuses opérations telles que la lecture de fichiers, l'appel d'API et l'exécution de tâches.

Dans VS Code, le client MCP (Copilot) accomplit des tâches grâce aux outils fournis par le serveur MCP, tandis que le côté serveur peut être déployé localement ou à distance.

La figure ci-dessus est le diagramme d'architecture MCP :

  • MCP est le cœur, se connectant aux clients (clients MCP) d'un côté, comme les programmes écrits avec client.py ; de l'autre côté, via le serveur (serveur MCP), il se connecte à des services distants (tels que les Apps à l'icône colorée dans le diagramme) et à des sources de données locales (telles que l'icône de smiley bleu).

  • Les clients peuvent également se connecter à des hôtes MCP, tels que Claude et ChatGPT, permettant à MCP d'appeler leurs capacités et de relier toutes les parties pour accomplir le travail~ C'est comme construire un « réseau de collaboration » pour différents outils, permettant à MCP de connecter des ressources distantes et locales tout en tirant parti de la puissance de grands modèles externes.

Avant d'utiliser le service MCP de VS Code, assurez-vous d'installer la dernière version de Visual Studio Code.

Vous devez également installer l'extension IA de VS Code correspondante. Nous pouvons utiliser GitHub Copilot de Microsoft et simplement nous connecter avec un compte (y compris les offres Free, Business ou Enterprise).

À partir de VS Code 1.102, la prise en charge de MCP dans VS Code est entièrement disponible. Vous pouvez vérifier si elle est activée dans les paramètres.

Configurer le serveur MCP

Il existe plusieurs façons d’ajouter un serveur MCP dans VS Code :

  • Installation directe : visitez la liste organisée des serveurs MCPhttps://code.visualstudio.com/mcp, sélectionnez « Installer » sur n’importe quel serveur MCP, et il sera automatiquement ajouté à votre instance VS Code.
  • Paramètres de l’espace de travail : ajoutez un fichier.vscode/mcp.jsondans l’espace de travail pour configurer le serveur MCP pour cet espace de travail et partager la configuration avec les membres de l’équipe.
  • Paramètres utilisateur : spécifiez le serveur dans la configuration utilisateur (via « MCP: Open User Configuration ») pour activer le serveur MCP dans tous les espaces de travail et le synchroniser via « Settings Sync ».
  • Découverte automatique : activez la fonctionnalité de découverte automatique (chat.mcp.discovery.enabled) pour découvrir les serveurs MCP définis dans d’autres outils (tels que Claude Desktop).

Dans cette section, nous utilisons la méthode des paramètres de l’espace de travail.

Exemple

Voici un exemple simple « Hello World » d’une application MCP dans VS Code. Tout d’abord, nous créons un fichier Python test.py avec le code suivant :

Code du fichier test.py

import sys
import json

# Lire la requête d’initialisation MCP
_ = json.load(sys.stdin)

# Sortie de la réponse MCP (JSON standard)
json.dump({
    "type": "text",
    "text": "Hello World from MCP!"
}, sys.stdout)

Ensuite, nous créons une configuration de serveur MCP qui peut renvoyer "Hello World".

Dans le dossier de votre espace de travail, créez le fichier.vscode/mcp.json(si le répertoire.vscoden'existe pas, créez-le), puis remplissez la configuration suivante (simulant un simple serveur MCP local) :

Code du fichier .vscode/mcp.json

{
  "servers": {
    "HelloWorldServer": {
      "type": "stdio",
      "command": "python3",
      "args": ["test.py"]
    }
  }
}

Après avoir enregistré le fichier, ouvrez la palette de commandes de VS Code (Ctrl+Shift+P) : exécutez la commande "MCP: Show Installed Servers" :

Vous verrez le "HelloWorldServer" configuré :

Démarrez le serveur, et il renverra immédiatement le message "Hello World from MCP!"

Nous pouvons saisir "execute HelloWorldServer" dans la fenêtre de chat IA et voir le résultat de sortie :

Ouvrez.vscode/mcp.jsonIl y a une icône "Add Server..." dans le coin inférieur droit, grâce à laquelle nous pouvons ajouter davantage de services, y compris des commandes à exécuter ou des services HTTP distants :

Utiliser MCP pour contrôler le navigateur

Nous pouvons contrôler le navigateur Chrome dans VS Code, par exemple ouvrir automatiquement des pages web, extraire du contenu, prendre des captures d'écran et même remplir des formulaires.

Cela nécessite le projet open source mcp-chrome, dont l'adresse open source est https://github.com/hangwin/mcp-chrome/.

Nous pouvons laisser des agents ou des outils d'IA piloter le navigateur via le protocole MCP.

Configuration requise :

  • Navigateur Chrome ou Chromium
  • Node.js ≥ v18.19.0
  • VS Code, Github Copilot

Installer mcp-chrome-bridge

mcp-chrome-bridge est le pont entre VS Code et le navigateur.

npm install -g mcp-chrome-bridge

Installer et configurer l'extension de navigateur

Rendez-vous sur la page GitHub Releases https://github.com/hangwin/mcp-chrome/releases pour télécharger le code source de l'extension mcp-chrome (pas le .crx, mais le paquet complet extrait).

  • Ouvrez Chrome et saisissez : chrome://extensions

  • Activez « Mode développeur » dans le coin supérieur droit

  • Cliquez sur « Charger l'extension non empaquetée » et sélectionnez le dossier de l'extension que vous avez téléchargé

  • Une fois l'installation réussie, cliquez sur l'icône de l'extension puis sur « Connecter »

    • Cliquez sur l'icône de l'extension pour l'ouvrir, puis cliquez sur Connecter pour voir la configuration MCP :

    Configurer VS Code et la communication MCP

    Créez .vscode/mcp.json dans le répertoire du projet et ajoutez la configuration de base suivante :

    {
  "servers": {
     "chrome-mcp": {
      "type": "http",
      "url": "http://127.0.0.1:12306/mcp"
    }
  }
}

    http://127.0.0.1:12306/ est l'adresse d'écoute par défaut du service de pont de l'extension.

    Démarrez-le :

    Autres extensions