Verbessern des GitHub-Copilot-Agent-Modus mit MCP

Erfahren Sie, wie Sie das Model Context Protocol (MCP) verwenden, um die agentischen Fähigkeiten von Copilot-Chat zu erweitern.

In diesem Artikel

Hinweis

Die standardmäßig deaktivierte Richtlinie MCP servers in Copilot für Unternehmen und Organisationen steuert die Verwendung von MCP.

Informationen zu Copilotagentischen Funktionen und MCP

          CopilotDie Agenticität bezieht 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, und zu **iterieren und anzupassen**, indem der Ansatz basierend auf Feedback und Ergebnissen angepasst wird. Sie können auf diese Funktionen mithilfe des Agentmodus zugreifen.

In Kombination mit MCP-Servern (Model Context Protocol) wird der Agentmodus erheblich leistungsstärker und ermöglicht Copilot den Zugriff auf externe Ressourcen, ohne den Kontext zu wechseln. Dies ermöglicht Copilot es, agentische "Schleifen" abzuschließen, wo sie ihren Ansatz dynamisch anpassen kann, indem sie relevante Informationen autonom finden, Feedback analysieren und fundierte Entscheidungen treffen kann. Mit MCP kann Copilot Aufgaben mit minimalem menschlichem Eingreifen abschließen und seine Strategie kontinuierlich basierend auf neuen Entdeckungen 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 Sie können Aufgaben wie das Erstellen von Problemen und das Ausführen von Workflows ausführen, während Sie sich auf Vorgänge mit höherem Wert konzentrieren.

  •         **Nahtlose Integration**: Copilot Kann an einer Aufgabe arbeiten, die mehrere Tools und Plattformen umfasst, ohne kontextlos 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.

  •         **Bereitstellen von Kontext**: Fügen Sie relevante Hintergrundinformationen zu Ihrem Projekt und ihren Anforderungen hinzu, einschließlich Links zu externen Ressourcen, auf die Copilot zugegriffen werden kann.

  •         **Lege Grenzen fest**: Formuliere Beschränkungen oder Einschränkungen für die Aufgabe. Wenn Sie beispielsweise nur ein neues Feature planen und noch keine Änderungen vornehmen möchten Copilot , geben Sie folgendes an. Du kannst auch einschränken, welche MCP-Tools aktiviert werden.

  •         **Anfordern von Bestätigungen**: Bitten Sie Copilot , ihr Verständnis zu bestätigen, bevor Sie mit erheblichen Änderungen fortfahren.

  •         **Verwenden Sie Eingabeaufforderungsdateien oder benutzerdefinierte Anweisungen: Sie können Eingabeaufforderungsdateien** oder benutzerdefinierte Anweisungen erstellen, um das Verhalten für verschiedene MCP-Server zu unterstützen Copilot . Siehe [AUTOTITLE](/copilot/concepts/about-customizing-github-copilot-chat-responses).

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

  •         **Verwenden Sie OAuth, wenn verfügbar**: Für MCP-Server wie GitHub MCP bevorzugen Sie die OAuth-Authentifizierung gegenüber personal access tokens. Siehe [AUTOTITLE](/copilot/customizing-copilot/using-model-context-protocol/using-the-github-mcp-server#remote-mcp-server-configuration-with-oauth).

  •         **Schwänke Berechtigungen ein**: Gewähre MCP-Servern nur die Mindestberechtigungen, die für deine Aufgaben erforderlich sind.

  •         **Review-Verbindungen**: Überprüfen Sie regelmäßig, welche MCP-Server Zugriff auf Ihre Entwicklungsumgebung haben.

  •         **Überwachen der Aktivität: Verfolgen** Sie, welche Aktionen Copilot über MCP-Server ausgeführt werden.

  •         **Verhindern Sie geheime Lecks**: Der Pushschutz blockiert, dass geheime Schlüssel in KI-generierte Antworten aufgenommen werden, und verhindert, dass Geheime Schlüssel über alle Aktionen verfügbar werden, die Sie mit dem GitHub MCP-Server ausführen. Das ist derzeit lediglich für öffentliche Repositorys verfügbar. Siehe [AUTOTITLE](/code-security/secret-scanning/introduction/about-push-protection).

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
  • Probleme, die nach einer Barrierefreiheitsaudit im Repository Ihres Projekts erstellt wurden.

Sie können den Agentmodus verwenden Copilot , 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, in denen Sie den Fortschritt überprüfen, Feedback geben und Ihre Anforderungen anpassen können, bevor Copilot Sie mit der nächsten Phase fortfahren.

  •         [Voraussetzungen](#prerequisites)

  •         [Einrichten von MCP-Servern](#setting-up-mcp-servers)

  •         [Schritt 1: Recherche-Schleife - Analyse der Anforderungen an die Barrierefreiheit](#step-1-research-loop---analyzing-accessibility-requirements)

  •         [Schritt 2: Planungsschleife – Umsetzungsstrategie für Barrierefreiheit](#step-2-planning-loop---accessibility-implementation-strategy)

  •         [Schritt 3: Implementierungsschleife – Verbesserung der Barrierefreiheit](#step-3-implementation-loop---making-accessibility-improvements)

  •         [Step 4: Testloop – Überprüfung der Barrierefreiheit mit Playwright](#step-4-testing-loop---accessibility-verification-with-playwright)

  •         [Schritt 5: Aktualisierung von GitHub Problemen](#step-5-updating-github-issues)

  •         [Weitere Informationen](#further-reading)

Voraussetzungen

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

  • Eine IDE mit Integration von Copilot und Unterstützung für MCP (z. B. Visual Studio Code).
  • Aktivierter Agent-Modus
  • Access zu den erforderlichen MCP-Servern, die Sie verwenden möchten

Einrichten von MCP-Servern

Zunächst müssen Sie die MCP-Server konfigurieren, die Sie voraussichtlich benötigen werden Copilot. In diesem Beispielszenario wird Folgendes verwendet:

  •         **
        GitHub MCP-Server**: Konfigurieren des GitHub MCP-Server, um den Zugriff auf Ihr Repository zu ermöglichen Copilot , Ihre Codebasis zu untersuchen, vorhandene Probleme zu recherchieren, Verzweigungen zu erstellen und Pullanforderungen zu verwalten. Siehe [AUTOTITLE](/copilot/customizing-copilot/using-model-context-protocol/using-the-github-mcp-server).

  •         **Figma MCP-Server**: Konfigurieren Sie den Figma MCP-Server, um Copilot auf Entwurfsdateien zuzugreifen, die Barrierefreiheitsspezifikationen enthalten, z. B. Farbkontrastanforderungen, Fokuszustände und Interaktionsmuster. Weitere Informationen finden Sie unter [Figma-Context-MCP](https://github.com/GLips/Figma-Context-MCP) oder testen Sie den MCP-Server [Dev Mode MCP](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server).

  •         **Playwright MCP-Server**: Richten Sie den Playwright MCP-Server ein, um Copilot automatisierte Barrierefreiheitstests zu schreiben und auszuführen, einschließlich Bildschirmleserkompatibilitätstests und Tastaturnavigationstests. Siehe [mcp-playwright](https://github.com/executeautomation/mcp-playwright).

Schritt 1: Recherche – Analyse der Anforderungen an die Barrierefreiheit

Aufforderung Copilot, sowohl Barrierefreiheitsanforderungen als auch vorhandene Barrierefreiheitsprobleme GitHub im Projekt zu analysieren.

Füge in deinem Prompt einen Link zur Figma-Datei hinzu. Damit Copilot die Entwurfsspezifikationen erfolgreich lesen und analysieren können, wählen Sie einen bestimmten Knoten oder einen bestimmten Layer in der Datei aus, sodass die Knoten-ID in der URL enthalten ist.

Beispielprompt 1

Copilot prompt
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 1

          Copilot sollte zuerst reagieren, indem sie die Ausführung von Tools von den Figma- und GitHub MCP-Servern anfordert. Sobald Sie dies zulassen, analysiert Copilot die Figma-Entwurfsspezifikationen und sucht und organisiert GitHub Probleme in Kategorien.

Beispielsweise kann Copilot Farbkontrast als Kategorie identifiziert werden, aufgrund der Feststellung von mehreren Problemen.

  • Probleme mit Farbkontrast
    • Issue Nr. 134: Kontrastverhältnis des Dashboard-Texts unter 4,5:1
    • Issue Nr. 156: Fehlerzustände in Formularen erfüllen die Anforderungen an den Kontrast nicht

Dadurch erhalten Sie einen umfassenden Überblick über die Anforderungen an die Barrierefreiheit, die Sie dann priorisieren können, um einen Plan zu erstellen.

Schritt 2: Planungsschleife – Umsetzungsstrategie für Barrierefreiheit

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

Beispielprompt 2

Copilot prompt
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 2

          Copilot reagiert, indem ein priorisierter Implementierungsplan erstellt wird, der sich auf hochgradig wirkungsvolle Barrierefreiheitsprobleme für einen sofortigen Pull-Request konzentriert, während für die verbleibende Arbeit Nachverfolgungsthemen vorgeschlagen werden.

Beispielsweise kann Copilot ermitteln, was getan werden muss, um Probleme in der Kategorie Farbkontrast 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 Sie die Behebung von Problem Nr. 134 (Textkontrast im Dashboard) und Problem Nr. 156 (Fehlerzustände des Formulars)

Sie können den Copilot-Plan basierend auf dem, worauf Sie sich konzentrieren möchten, anpassen. Das Ergebnis ist ein Plan, mit dem Sie sich wohlfühlen und bei dem Sie jetzt um die Implementierung von Copilot bitten können.

Schritt 3: Implementierungsschleife – Verbesserung der Barrierefreiheit

Nachdem Sie den Plan überprüft haben, werden Sie aufgefordert Copilot , mit der Implementierung von Korrekturen für die Barrierefreiheit zu beginnen.

Beispielprompt 3

Copilot prompt
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 3

          Copilot antwortet, indem er den Implementierungsplan ausführt, gezielte Codeänderungen vornimmt, um die identifizierten Barrierefreiheitsprobleme zu beheben und eine Pull-Anforderung zu erstellen.

Beispielsweise kann Copilot einen neuen Branch namens fix/critical-accessibility-issues erstellen und Änderungen vornehmen, um die Probleme mit dem Farbkontrast 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.
    • Geänderter dunkler Text auf hellgrauen Hintergründen in DashboardCard.vue, um ein Verhältnis von 4,5:1 sicherzustellen.

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

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

Sie können Copilot auffordern, Barrierefreiheitstests mithilfe des Playwright MCP zu erstellen und auszuführen.

Beispielprompt 4

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

Beispielantwort 4

          Copilot reagiert durch die Entwicklung von Barrierefreiheitstests und bei Bedarf das Erstellen einer Playwright-Konfigurationsdatei.

          Copilot Beispielsweise kann eine Testdatei um den Textkontrast herum erstellt werden.

          **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 an, verschiedene Tools aus dem Playwright MCP zum Ausführen der Tests zu verwenden. Beachten Sie, dass manchmal Copilot zusätzliche Tests durchführen kann, die Sie nicht unbedingt angefordert haben. Sie können versuchen, dies zu verhindern, indem Sie Ihre Aufforderung so anpassen, dass sie strenger ist.

Schritt 5: Aktualisieren der GitHub-Probleme

Fordern Sie schließlich auf Copilot , die GitHub Probleme zu aktualisieren, die in der Pullanforderung behoben wurden, und erstellen Sie Folgeprobleme.

Beispielprompt 5

Copilot prompt
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 5

          Copilot wird antworten, indem er um Erlaubnis zur Verwendung der erforderlichen Tools vom GitHub MCP-Server bittet. Anschließend werden die GitHub Probleme mit detaillierten Kommentaren aktualisiert und strukturierte Folgeprobleme für die verbleibende Arbeit erstellt.

Fügen Sie beispielsweise Kommentare zu den farbkontrastproblemen hinzu, Copilot die zunächst im Forschungsschritt identifiziert wurden.

          **Aktualisierte Probleme mit Kommentaren:**
  • Issue Nr. 134: „Kontrastverhältnis von Dashboard-Text unter 4.5:1“
    • Kommentar: „Behoben in PR Nr. 213 durch das Aktualisieren von Textfarbvariablen in variables.scss und der Komponente DashboardCard." 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

Üben Sie die Integration von MCP mit im “Integration von MCP mit ” Skills-Übung.

In dieser Übung erfahren Sie, wie Sie:

  • Richten Sie den MCP-Server ein, und verbinden Sie den GitHub MCP-Server mit GitHub Copilot.
  • Verwenden Sie natürliche Sprache, um mit externen Diensten über MCP-Tools im Agentmodus zu interagieren.
  • Suchen und analysieren Sie ähnliche Projekte mit MCP.
  • Sortieren, erstellen und verwalten Sie GitHub Probleme und führen Sie dann Änderungen mit GitHub Copilot durch.

Weitere Informationen

  •         **MCP-Grundlagen**: Weitere Informationen zum Einrichten und Konfigurieren von MCP-Servern findest du unter [AUTOTITLE](/copilot/customizing-copilot/using-model-context-protocol/extending-copilot-chat-with-mcp).

  •         **Benutzung von MCP-Servern** Für weitere Ideen zur Integration von MCP in GitHub Copilot finden Sie unter [5 Möglichkeiten, Ihren Workflow mit GitHub Copilot und MCP zu optimieren](https://github.blog/ai-and-ml/github-copilot/5-ways-to-transform-your-workflow-using-github-copilot-and-mcp/) im the GitHub Blog.