Verbessern des Copilot-Agent-Modus mit MCP

Hier erfährst du, wie du Model Context Protocol (MCP) verwenden kannst, um die Funktionen des Copilot Chat zu erweitern.

In diesem Artikel

Hinweis

  • Die MCP-Unterstützung ist in Copilot Chat für Visual Studio Code allgemein verfügbar.
  • Die MCP-Unterstützung für Copilot in Visual Studio, JetBrains, Eclipse und Xcode befindet sich in der public preview. Änderungen sind vorbehalten.
  • Die Lizenzbestimmungen für die Vorabversion von GitHub gelten für deine Nutzung dieses Produkts.

Informationen zu den agentbezogenen Funktionen und MCP von Copilot

Die Agent-Funktionen von Copilot beziehen sich auf die Fähigkeit, unabhängig zu arbeiten, indem mehrstufige Workflows ohne ständige Anleitung ausgeführt werden, Entscheidungen zu treffen, indem geeignete Tools und Ansätze basierend auf dem Kontext ausgewählt werden, sowie durchlaufen und anpassen, indem der Ansatz auf Grundlage von Feedback und Ergebnissen angepasst wird. Du kannst über den Agent-Modus auf diese Funktionen zugreifen.

In Kombination mit MCP-Servern (Model Context Protocol) wird der Agent-Modus erheblich leistungsstärker, wodurch Copilot Zugriff auf externe Ressourcen erhalten, ohne den Kontext zu wechseln. Auf diese Weise können Copilot agentbezogene „Schleifen“ abschließen, wo der Dienst seinen Ansatz dynamisch anpassen kann, indem er relevante Informationen autonom suchen, Feedback analysieren und fundierte Entscheidungen treffen kann. Mit MCP kann Copilot eine Aufgabe mit minimaler menschlicher Interaktion ausführen und seine Strategie basierend auf dem ermittelten Ziel kontinuierlich anpassen.

Vorteile der Kombination von MCP mit dem Agent-Modus

Wenn du MCP-Server im Agent-Modus verwendest, entsperrst du mehrere wichtige Vorteile:

  • Erweiterter Kontext: MCP-Server bieten Copilot Zugriff auf externe Datenquellen, APIs und Tools.
  • Reduzierter manueller Aufwand: Copilot kann Aufgaben wie das Erstellen von Issues und das Ausführen von Workflows ausführen, während du dich auf wichtigere Vorgänge konzentrierst.
  • Nahtlose Integration: Copilot kann an einer Aufgabe arbeiten, die mehrere Tools und Plattformen umfasst, ohne den Kontext zu wechseln oder benutzerdefinierte Integrationen zu erfordern.

Best Practices für die Verwendung von MCP mit dem Agent-Modus

Befolge diese Best Practices, um MCP-Server mit dem Agent-Modus optimal zu kombinieren.

Promptingstrategien

  • Sei spezifisch bei deinen Zielen: Definiere in deinem Prompt klar, was du erreichen möchtest und welche Ausgabe du benötigst.
  • Stelle Kontext bereit: Füge relevante Hintergrundinformationen zu deinem Projekt und den Anforderungen hinzu, einschließlich Links zu externen Ressourcen, auf die Copilot zugreifen kann.
  • Lege Grenzen fest: Formuliere Beschränkungen oder Einschränkungen für die Aufgabe. Wenn du z. B. möchtest, dass Copilot nur ein neues Feature plant und noch keine Änderungen vornimmt, gib dies genau an. Du kannst auch einschränken, welche MCP-Tools aktiviert werden.
  • Fordere Bestätigungen an: Bitte Copilot, deine Anforderungen zu bestätigen, bevor der Dienst mit wichtigen Änderungen fortfährt.
  • Promptdateien oder benutzerdefinierte Anweisungen verwenden: Du kannst Promptdateien oder benutzerdefinierte Anforderungsdateien verwenden, um den Copilot-Dienst anzuweisen, wie er sich bei verschiedenen MCP-Servern verhalten soll. Weitere Informationen findest du unter Informationen zum Anpassen der Antworten von GitHub Copilot Chat.

MCP-Serververwendung

  • Wähle relevante Server aus: Wähle MCP-Server aus, die deinen spezifischen Workflowanforderungen entsprechen, und aktiviere diese.
  • Beginne einfach: Beginne mit einigen gut etablierten MCP-Servern, bevor du komplexere Integrationen hinzufügst.
  • Teste die Konnektivität: Stelle sicher, dass alle MCP-Server ordnungsgemäß konfiguriert und zugänglich sind, bevor du Aufgaben im Agent-Modus startest.

Sicherheitshinweise

  • Verwende OAuth, wenn verfügbar: Bevorzuge für MCP-Server wie GitHub MCP die OAuth-Authentifizierung gegenüber personal access tokens. Weitere Informationen findest du unter Verwenden des GitHub-MCP-Servers.
  • Schwänke Berechtigungen ein: Gewähre MCP-Servern nur die Mindestberechtigungen, die für deine Aufgaben erforderlich sind.
  • Überprüfe Verbindungen: Überwache regelmäßig, welche MCP-Server Zugriff auf deine Entwicklungsumgebung haben.
  • Überwache Aktivität: Verfolge, welche Aktionen Copilot über MCP-Server durchführt.

Beispielszenario: Implementieren der Compliance für Barrierefreiheit

Hinweis

Das folgende Szenario dient nur dazu, die Muster und Strategien zu veranschaulichen, die du mit dem Agent-Modus und MCP-Servern verwenden kannst, um eine Aufgabe von Anfang bis Ende abzuschließen. Das Szenario, Prompts und Antworten sind nur Beispiele.

Angenommen, dein Team hat Feedback erhalten, dass dein Kundenportal aktualisiert werden muss, um die neuesten Barrierefreiheitsstandards einzuhalten. Du wurdest beauftragt, die Barrierefreiheit der gesamten Anwendung mithilfe der folgenden Punkte zu verbessern:

  • Liste der vom Designteam definierten Spezifikationen
  • Issues, die im Repository deines Projekts nach einer Barrierefreiheitsüberwachung erstellt wurden

Du kannst den Agent-Modus von Copilot verwenden, um mehrere MCP-Server zu nutzen, um Barrierefreiheitsverbesserungen effizient zu implementieren.

Das folgende Szenario veranschaulicht, wie du separate Prompts für verschiedene Phasen (Recherche, Planung, Implementierung und Validierung) verwenden kannst, was zu mehreren agentbezogenen „Schleifen“ führt, die lose an den Phasen des Softwareentwicklungslebenszyklus ausgerichtet sind. Dieser Ansatz erstellt natürliche Prüfpunkte, mit denen du den Fortschritt überprüfen, Feedback geben und deine Anforderungen anpassen kannst, bevor Copilot die nächste Phase fortsetzt.

Voraussetzungen

Stelle vor der Verwendung des Agent-Modus mit MCP sicher, dass bei dir Folgendes eingerichtet ist:

  • Eine IDE mit Copilot-Integration und MCP-Unterstützung (z. B. Visual Studio Code)
  • Aktivierter Agent-Modus
  • Zugriff auf die erforderlichen MCP-Server, die du verwenden möchtest

Einrichten von MCP-Servern

Zunächst musst du die MCP-Server konfigurieren, von denen du glaubst, dass sie von Copilot benötigt werden. In diesem Beispielszenario wird Folgendes verwendet:

  • GitHub MCP-Server: Konfiguriere den GitHub MCP-Server so, dass Copilot für den Zugriff auf dein Repository aktiviert, deine Codebasis untersucht, vorhandene Issues recherchiert, Verzweigungen erstellt und Pull Requests verwaltet wird. Weitere Informationen findest du unter Verwenden des GitHub-MCP-Servers.

  • Figma MCP-Server: Konfiguriere den Figma MCP-Server so, dass Copilot auf Entwurfsdateien zugreifen kann, die Barrierefreiheitsspezifikationen enthalten, z. B. Farbkontrastanforderungen, Fokuszustände und Interaktionsmuster. Weitere Informationen findest du unter Figma-Context-MCP, oder probiere den neuen Dev Mode MCP-Server in der offenen Betaversion aus.

  • Playwright MCP-Server: Richte den Playwright MCP-Server so ein, dass Copilot zum Schreiben und Ausführen automatisierter Barrierefreiheitstests aktiviert wird, einschließlich Kompatibilitäts- und Tastaturnavigationstests für Bildschirmsprachausgaben. Weitere Informationen findest du unter mcp-playwright.

Schritt 1: Rechercheschleife – Analysieren der Anforderungen an die Barrierefreiheit

Fordere Copilot auf, sowohl Barrierefreiheitsanforderungen als auch vorhandene barrierefreiheitsbezogene GitHub-Issues im Projekt zu analysieren.

Füge in deinem Prompt einen Link zur Figma-Datei hinzu. Damit Copilot die Entwurfsspezifikationen erfolgreich lesen und analysieren kann, wähle einen bestimmten Knoten oder eine bestimmte Ebene in der Datei aus, damit die Knoten-ID in der URL enthalten ist.

Beispielprompt: I need to make our customer portal WCAG 2.1 AA compliant. Use the Figma MCP to analyze our design specifications at https://figma.com/design/DESIGN-FILE-FOR-ACCESSIBILITY-SPECS?node-id=NODE_ID for accessibility requirements. Also use the GitHub MCP to find open GitHub issues with the labels accessibility or WCAG in the customer-portal repository. Then sort them into categories and list each issue that falls under the category with the issue title and number.

Beispielantwort von Copilot:

Copilot sollte zuerst reagieren, indem angefordert wird, Tools über die Figma- und GitHub MCP-Server auszuführen. Sobald du das zulässt, analysiert Copilot die Figma-Entwurfsspezifikationen und sucht nach GitHub-Issues und organisiert diese in Kategorien.

Beispielsweise kann Copilot Farbkontrast als Kategorie identifizieren, wenn mehrere Issues darüber gefunden werden.

  • Issues mit Farbkontrast
    • Issue Nr. 134: Kontrastverhältnis von Dashboardtext unter 4.5:1
    • Issue Nr. 156: Formularfehlerzustände erfüllen keine Kontrastanforderungen

So erhältst du einen umfassenden Überblick über die Anforderungen an die Barrierefreiheit, die du dann über Copilot priorisieren und einen Plan erstellen kannst.

Schritt 2: Planungsschleife – Implementierungsstrategie für Barrierefreiheit

Bitte Copilot als Nächstes, einen detaillierten Implementierungsplan zu erstellen.

Beispielprompt: Based on your accessibility analysis of our Figma designs and GitHub issues, create a focused implementation plan for an immediate pull request addressing the highest priority accessibility issues. Don't make any changes yet. Also suggest follow-up issues we should create for the remaining Figma specifications.

Beispielantwort von Copilot:

Copilot reagiert, indem ein priorisierter Implementierungsplan erstellt wird, der sich auf Issues mit hoher Barrierefreiheit für einen sofortigen Pull Request konzentriert, während Issues zur Nachverfolgung für verbleibende Arbeit vorgeschlagen werden.

Beispielsweise kann Copilot ermitteln, was getan werden muss, um die Probleme in der Farbkontrastkategorie zu beheben.

  • 1. Farbkontrastkorrekturen:
    • Aktualisieren der Textfarbvariablen in variables.scss, um das Kontrastverhältnis von 4.5:1 für den gesamten normalen Text sicherzustellen
    • Ändern der Farben der Benutzeroberflächenkomponenten in DashboardCard.vue und weiteren primären Komponenten, um das Kontrastverhältnis von 3:1 zu erfüllen
    • Priorisieren der Behebung von Issue Nr. 134 (Dashboardtextkontrast) und Issue Nr. 156 (Formularfehlerzustände)

Du kannst Copilot bitten, den Plan basierend darauf anzupassen, auf was du dich konzentrieren möchtest. Das Ergebnis ist ein Plan, für den du Copilot nun bitten kannst, ihn zu implementieren.

Schritt 3: Implementierungsschleife – Verbessern der Barrierefreiheit

Fordere nach der Überprüfung des Plans Copilot auf, mit der Implementierung von Korrekturen für die Barrierefreiheit zu beginnen.

Beispielprompt: Create a new branch and implement the critical accessibility fixes according to your proposed implementation plan. Focus on the top three categories that you identified as highest priority. Create a pull request with proper references to the issues being fixed.

Beispielantwort von Copilot:

Copilot reagiert durch Ausführen des Implementierungsplans, und nimmt gezielte Codeänderungen vor, um die identifizierten Barrierefreiheitsprobleme zu beheben und einen Pull Request zu erstellen.

Beispielsweise kann Copilot einen neuen Branch mit dem Namen fix/critical-accessibility-issues erstellen und Änderungen vornehmen, um die Farbkontrastprobleme zu beheben.

  • Probleme mit dem Kontrast von Dashboardtexten wurden behoben (Issue Nr. 134):
    • Textfarbvariablen in src/styles/variables.scss wurden von #767676 in #595959 geändert.
    • Dunkler Text auf hellgrauen Hintergründen in DashboardCard.vue geändert, um das Verhältnis von 4.5:1 sicherzustellen

Ich habe den Pull Request Nr. 213 mit diesen Änderungen erstellt.

Schritt 4: Testschleife – Überprüfung der Barrierefreiheit mit Playwright

Du kannst Copilot auffordern, Barrierefreiheitstests mithilfe des Playwright MCP zu erstellen und auszuführen.

Beispielprompt: Create focused accessibility tests for the components we've updated in the pull request. Use the Playwright MCP.

Beispielantwort von Copilot:

Copilot reagiert durch Entwickeln von Barrierefreiheitstests und erstellt ggf. eine Playwright-Konfigurationsdatei.

Beispielsweise kann Copilot eine Testdatei um den Textkontrast erstellen.

Testimplementierung:

  • Es wurde eine zielorientierte Testdatei in tests/accessibility/ erstellt:
    • contrast.spec.ts – Überprüft die Kontrastverhältnisse von Text

Nachdem die Tests erstellt wurden, fordert Copilot die Berechtigung zum Ausführen der Tests mit verschiedenen Tools aus Playwright MCP an. Beachte, dass Copilot manchmal zusätzliche Tests durchführen kann, die du nicht unbedingt angefordert hast; Du kannst versuchen, dies zu verhindern, indem du deinen Prompt so anpasst, dass er strenger ist.

Schritt 5: Aktualisieren von Problemen mit GitHub

Fordere schließlich Copilot auf, die GitHub-Issues zu aktualisieren, auf die im Pull Request eingegangen wurde, und erstelle Folgeissues.

Beispielprompt: Update the GitHub issues we've fixed in the pull request with comments summarizing the changes. Create the follow-up issues you suggested for the remaining accessibility work.

Beispielantwort von Copilot:

Copilot bittet um die Berechtigung, die erforderlichen Tools vom GitHub MCP-Server zu verwenden. Anschließend werden die GitHub-Issues mit detaillierten Kommentaren aktualisiert und strukturierte Folgeissues für die verbleibende Arbeit erstellt.

Copilot fügt beispielsweise Kommentare zu den Farbkontrastissues hinzu, die anfänglich im Rechercheschritt identifiziert wurden.

Aktualisierte Issues mit Kommentaren:

  • Issue Nr. 134: „Kontrastverhältnis von Dashboardtext unter 4.5:1“
    • Kommentar: „In PR Nr. 213 durch Aktualisieren von Textfarbvariablen in variables.scss und DashboardCard-Komponente behoben. Der gesamte Dashboardtext erfüllt jetzt das Kontrastverhältnis von 4.5:1, überprüft durch automatisierte Tests.“

Jetzt kannst du den Pull Request überprüfen und Anpassungen vornehmen. Nachdem du überprüft hast, ob die Änderungen gültig sind, kannst du sie wie jeden anderen Pull Request zusammenführen.

Praktische Übungen

Probiere die Qualifikationsübung Integrieren von MCP mit GitHub Copilot aus, um praktische Erfahrungen mit der Integration von MCP mit GitHub Copilot zu erhalten.

Weitere Informationen