VS Code MCP-Dienst

MCP (Model Context Protocol) ist ein offener Standard, der eine einheitliche Schnittstelle bereitstellt, die es KI-Modellen (wie Copilot Chat) ermöglicht, externe Tools zu entdecken und aufzurufen, wodurch mehrere Vorgänge wie das Lesen von Dateien, das Aufrufen von APIs und das Ausführen von Aufgaben ermöglicht werden.

In VS Code erledigt der MCP-Client (Copilot) Aufgaben mithilfe der vom MCP-Server bereitgestellten Tools, während die Serverseite lokal oder remote bereitgestellt werden kann.

Die obige Abbildung ist das MCP-Architekturdiagramm:

  • MCP ist der Kern; auf der einen Seite stellt es Verbindungen zu Clients (MCP-Clients) her, beispielsweise zu Programmen, die mit client.py geschrieben wurden; auf der anderen Seite verbindet es sich über den Server (MCP-Server) mit Remote-Diensten (wie den bunten Symbol-Apps im Diagramm) und lokalen Datenquellen (wie dem blauen Smiley-Symbol).

  • Clients können sich auch mit MCP-Hosts verbinden, wie Claude und ChatGPT, sodass MCP ihre Funktionen aufrufen und alle Beteiligten miteinander verbinden kann, um Arbeit zu erledigen~ Es ist, als würde man ein "Kollaborationsnetzwerk" für verschiedene Tools aufbauen, das es MCP ermöglicht, entfernte und lokale Ressourcen zu verbinden und dabei die Leistungsfähigkeit externer großer Modelle zu nutzen.

Bevor Sie den VS Code MCP-Dienst verwenden, stellen Sie sicher, dass Sie die neueste Version von Visual Studio Code installieren.

Außerdem müssen Sie die zugehörige VS Code AI-Erweiterung installieren. Wir können Microsofts GitHub Copilot verwenden und uns einfach mit einem Konto anmelden (einschließlich Free-, Business- oder Enterprise-Pläne).

Ab VS Code 1.102 ist die MCP-Unterstützung in VS Code vollständig verfügbar. Du kannst in den Einstellungen prüfen, ob sie aktiviert ist.

MCP-Server konfigurieren

Es gibt mehrere Möglichkeiten, einen MCP-Server in VS Code hinzuzufügen:

  • Direkte Installation: Besuche die kuratierte MCP-Server-Listehttps://code.visualstudio.com/mcp, wähle bei einem beliebigen MCP-Server „Installieren“ aus, und er wird automatisch zu deiner VS Code-Instanz hinzugefügt.
  • Arbeitsbereichseinstellungen: Füge eine.vscode/mcp.json-Datei im Arbeitsbereich hinzu, um den MCP-Server für diesen Arbeitsbereich zu konfigurieren und die Konfiguration mit Teammitgliedern zu teilen.
  • Benutzereinstellungen: Gib den Server in der Benutzerkonfiguration an (über „MCP: Open User Configuration“), um den MCP-Server in allen Arbeitsbereichen zu aktivieren und ihn über „Settings Sync“ zu synchronisieren.
  • Automatische Erkennung: Aktiviere die Funktion zur automatischen Erkennung (chat.mcp.discovery.enabled), um MCP-Server zu erkennen, die in anderen Tools definiert sind (z. B. Claude Desktop).

In diesem Abschnitt verwenden wir die Methode mit den Arbeitsbereichseinstellungen.

Beispiel

Das Folgende ist ein einfaches „Hello World“-Beispiel einer MCP-Anwendung in VS Code. Zuerst erstellen wir eine Python-Datei test.py mit dem folgenden Code:

Code der Datei test.py

import sys
import json

# MCP-Initialisierungsanfrage lesen
_ = json.load(sys.stdin)

# MCP-Antwort ausgeben (Standard-JSON)
json.dump({
    "type": "text",
    "text": "Hello World from MCP!"
}, sys.stdout)

Als Nächstes erstellen wir eine MCP-Serverkonfiguration, die "Hello World" zurückgeben kann.

Erstellen Sie in Ihrem Arbeitsbereichsordner die Datei.vscode/mcp.json(falls das Verzeichnis.vscodenicht existiert, erstellen Sie es), und füllen Sie die folgende Konfiguration aus (simuliert einen einfachen lokalen MCP-Server):

.vscode/mcp.json Datei-Code

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

Öffnen Sie nach dem Speichern der Datei die Befehlspalette von VS Code (Strg+Umschalt+P): Führen Sie den Befehl "MCP: Show Installed Servers" aus:

Sie sehen den konfigurierten "HelloWorldServer":

Starten Sie den Server, und er gibt sofort die Nachricht "Hello World from MCP!" zurück

Wir können "execute HelloWorldServer" im KI-Chatfenster eingeben und das Ausgabeergebnis sehen:

Öffnen Sie.vscode/mcp.jsonIn der unteren rechten Ecke gibt es ein Symbol "Server hinzufügen...", über das wir weitere Dienste hinzufügen können, einschließlich auszuführender Befehle oder Remote-HTTP-Dienste:

Verwendung von MCP zur Steuerung des Browsers

Wir können den Chrome-Browser in VS Code steuern, z. B. automatisch Webseiten öffnen, Inhalte scrapen, Screenshots erstellen und sogar Formulare ausfüllen.

Dies erfordert das Open-Source-Projekt mcp-chrome, dessen Open-Source-Adresse https://github.com/hangwin/mcp-chrome/ ist.

Wir können KI-Agenten oder Tools den Browser über das MCP-Protokoll bedienen lassen.

Umgebungsanforderungen:

  • Chrome- oder Chromium-Browser
  • Node.js ≥ v18.19.0
  • VS Code, Github Copilot

mcp-chrome-bridge installieren

mcp-chrome-bridge ist die Brücke zwischen VS Code und dem Browser.

npm install -g mcp-chrome-bridge

Browsererweiterung installieren und konfigurieren

Gehen Sie zur GitHub Releases-Seite https://github.com/hangwin/mcp-chrome/releases, um den Quellcode der mcp-chrome-Erweiterung herunterzuladen (nicht die .crx, sondern das vollständige entpackte Paket).

  • Chrome öffnen und eingeben: chrome://extensions

  • "Entwicklermodus" in der oberen rechten Ecke aktivieren

  • Klicken Sie auf "Entpackte Erweiterung laden" und wählen Sie den heruntergeladenen Erweiterungsordner aus

  • Klicken Sie nach erfolgreicher Installation auf das Erweiterungssymbol und dann auf "Verbinden"

    • Klicken Sie auf das Erweiterungssymbol, um die Erweiterung zu öffnen, und klicken Sie auf Verbinden, um die MCP-Konfiguration anzuzeigen:

    VS Code und MCP-Kommunikation konfigurieren

    Erstellen Sie .vscode/mcp.json im Projektverzeichnis und fügen Sie die folgende Basiskonfiguration hinzu:

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

    http://127.0.0.1:12306/ ist die standardmäßige Listen-Adresse des Erweiterungsbrückendienstes.

    Starten Sie es:

    Weitere Erweiterungen