Was macht skills-integrate-mcp-with-copilot?
Übung: Integration des Model Context Protocol mit GitHub Copilot
Diese Übung führt Sie Schritt für Schritt in die Integration des Model Context Protocol (MCP) mit GitHub Copilot ein. MCP ist ein offener Standard für den Austausch von Kontextinformationen zwischen KI-Assistenten und Werkzeugen – ähnlich wie USB-C für KI-Interaktionen. Durch MCP kann Copilot kontextrelevante Daten aus Ihrer Entwicklungsumgebung abrufen, z. B. Projektstrukturen, API-Spezifikationen oder interne Dokumentation, und so präzisere, auf Ihre Bedürfnisse zugeschnittene Vorschläge liefern.
Ziele
- Verstehen, was MCP ist und wie es mit GitHub Copilot interagiert
- Einrichten eines MCP-Servers zur Bereitstellung benutzerdefinierter Kontexte
- Verbinden von Copilot mit dem MCP-Server über die Copilot Erweiterungsschnittstelle
- Testen der Integration anhand eines Beispielprojekts
Voraussetzungen
- Ein GitHub-Konto mit aktivem Copilot-Abonnement
- Visual Studio Code (Version 1.90.0 oder neuer) mit aktivierter GitHub Copilot Extension
- Grundlegende Kenntnisse in der Entwicklung mit TypeScript/JavaScript
- Node.js (Version 18 oder neuer) und npm
Schritt-für-Schritt-Anleitung
1. MCP-Server-Projekt erstellen
Erstellen Sie ein neues Verzeichnis für Ihren MCP-Server:
mkdir my-mcp-server
cd my-mcp-server
npm init -y
Installieren Sie die MCP-Server-Bibliothek:
npm install @modelcontextprotocol/sdk
2. Eine einfache Kontextquelle definieren
Erstellen Sie die Datei server.js:
import { Server } from '@modelcontextprotocol/sdk/server/index.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
const server = new Server(
{
name: 'example-context-server',
version: '1.0.0',
},
{
capabilities: {
resources: {},
tools: {},
},
}
);
// Ressourcendefinition (liefert Kontextdaten)
server.setRequestHandler(ListResourcesRequestSchema, async () => {
return {
resources: [
{
uri: 'project://api-docs',
name: 'API-Dokumentation',
mimeType: 'text/markdown',
description: 'Auszug aus der internen API-Dokumentation',
},
],
};
});
// Lesen einer Ressource
server.setRequestHandler(ReadResourceRequestSchema, async (request) => {
if (request.params.uri === 'project://api-docs') {
return {
contents: [
{
uri: 'project://api-docs',
mimeType: 'text/markdown',
text: '# Interne API
`GET /api/users` – Liste aller Benutzer
`GET /api/users/:id` – Einzelnen Benutzer abrufen',
},
],
};
}
throw new Error('Ressource nicht gefunden');
});
// Transport mit stdio einrichten
const transport = new StdioServerTransport();
await server.connect(transport);
3. MCP-Server starten
node server.js
Der Server läuft nun im stdio-Modus und wartet auf Anfragen von Copilot.
4. Copilot für MCP konfigurieren
Fügen Sie in Ihrer VS Code settings.json folgende Konfiguration hinzu:
{
"github.copilot.mcpServers": {
"my-mcp-server": {
"command": "node",
"args": ["/absoluter/pfad/zu/my-mcp-server/server.js"],
"env": {}
}
}
}
5. Integration testen
Öffnen Sie eine beliebige Datei in VS Code, in der Copilot aktiv ist. Tippen Sie @mcp und wählen Sie den Befehl MCP: Kontext aus server anfordern. Sie sollten die API-Dokumentation als kontextuelle Hilfe erhalten.
Fehlerbehebung
| Problem | Mögliche Ursache | Lösung |
|---|---|---|
@mcp wird nicht erkannt | Copilot Extension ist nicht aktiv | Aktualisieren Sie VS Code und die Copilot-Erweiterung |
| Server startet nicht | Fehler in server.js | Überprüfen Sie die Syntax mit node --check server.js |
| Kontext wird nicht geliefert | Falscher Ressourcen-URI | Vergewissern Sie sich, dass die Ressource in resources registriert ist |
Weiterführende Links
Fazit
Sie haben erfolgreich MCP in GitHub Copilot integriert! Diese Grundlage ermöglicht es Ihnen, komplexere Kontextquellen wie Projektmetadaten, Datenbankabfragen oder CI/CD-Status bereitzustellen und so die Copilot-Erfahrung in Ihrer täglichen Arbeit erheblich zu verbessern.