Amélioration du mode assistant Copilot GitHub avec MCP

Découvrez comment utiliser le protocole MCP (Model Context Protocol) pour développer les fonctionnalités agentiques de Copilot Chat.

Dans cet article

Remarque

La stratégie des serveurs MCP dans Copilot pour les entreprises et les organisations, désactivée par défaut, contrôle l’utilisation du MCP.

À propos Copilotdes fonctionnalités agentiques et mcP

          CopilotLes fonctionnalités agentiques font référence à la possibilité de **fonctionner indépendamment** en exécutant des flux de travail en plusieurs étapes sans conseils constants, **prendre des décisions** en choisissant les outils et approches appropriés en fonction du contexte, **et en itérant et en adaptant** son approche en fonction des commentaires et des résultats. Vous pouvez accéder à ces fonctionnalités à l’aide du mode agent.

Lorsqu’il est combiné avec des serveurs MCP (Model Context Protocol), le mode agent devient beaucoup plus puissant, ce qui permet Copilot d’accéder aux ressources externes sans changer de contexte. Cela permet Copilot d’effectuer des « boucles » agentiques, où elle peut adapter dynamiquement son approche en recherchant de manière autonome des informations pertinentes, en analysant les commentaires et en prenant des décisions éclairées. Avec MCP, Copilot peut accomplir une tâche avec une intervention humaine minimale, en ajustant de manière continue sa stratégie en fonction de ce qu’il découvre.

Avantages de la combinaison de MCP avec le mode agent

Lorsque vous utilisez des serveurs MCP avec le mode agent, vous déverrouillez plusieurs avantages clés :

  •         **Contexte étendu** : les serveurs MCP fournissent Copilot un accès aux sources de données externes, aux API et aux outils.

  •         **Réduction de l’effort manuel** : Copilot peut effectuer des tâches telles que la création de problèmes et l’exécution de flux de travail pendant que vous vous concentrez sur des tâches à valeur plus élevée.

  •         **Intégration transparente** : Copilot peut travailler sur une tâche impliquant plusieurs outils et plateformes sans changer de contexte ou exiger des intégrations personnalisées.

Meilleures pratiques pour l’utilisation de MCP avec le mode agent

Suivez ces bonnes pratiques pour tirer le meilleur parti de la combinaison des serveurs MCP avec le mode agent.

Stratégies d'incitation

  •         **Soyez spécifique sur les objectifs** : définissez clairement ce que vous souhaitez accomplir dans votre demande et quel résultat vous désirez.

  •         **Fournissez un contexte : incluez** des informations d’arrière-plan pertinentes sur votre projet et les exigences, y compris des liens vers des ressources externes qui Copilot peuvent y accéder.

  •         **Définir des limites** : spécifiez les contraintes ou limitations de la tâche. Par exemple, si vous souhaitez Copilot uniquement planifier une nouvelle fonctionnalité et ne pas apporter de modifications, spécifiez-le. Vous pouvez également limiter les outils MCP activés.

  •         **Confirmations de la demande** : demandez Copilot à confirmer sa compréhension avant de procéder à des modifications importantes.

  •         **Utilisez des fichiers d’invite ou des instructions personnalisées** : vous pouvez créer des fichiers d’invite ou des fichiers d’instructions personnalisées pour vous guider Copilot sur le comportement des différents serveurs MCP. Consultez [AUTOTITLE](/copilot/concepts/about-customizing-github-copilot-chat-responses).

Utilisation du serveur MCP

  •         **Choisissez les serveurs appropriés**: sélectionnez et activez les serveurs MCP qui s’alignent sur vos besoins de flux de travail spécifiques.

  •         **Démarrer simplement** : commencez par quelques serveurs MCP bien établis avant d’ajouter des intégrations plus complexes.

  •         **Tester la connectivité**: vérifiez que tous les serveurs MCP sont correctement configurés et accessibles avant de démarrer les tâches en mode agent.

Considérations de sécurité

  •         **Utilisez OAuth quand il est disponible** : pour les serveurs MCP comme GitHub MCP, préférez l’authentification OAuth par rapport personal access tokensà . Consultez [AUTOTITLE](/copilot/customizing-copilot/using-model-context-protocol/using-the-github-mcp-server#remote-mcp-server-configuration-with-oauth).

  •         **Limiter les autorisations** : accordez uniquement aux serveurs MCP les autorisations minimales nécessaires pour vos tâches.

  •         **Review connections** : auditez régulièrement les serveurs MCP qui ont access à votre environnement de développement.

  •         **Surveiller l’activité** : effectuez le suivi des actions Copilot effectuées via des serveurs MCP.

  •         **Empêcher les fuites de secrets** : la protection Push bloque l’inclusion des secrets dans les réponses générées par l’IA et vous empêche d’exposer des secrets via toutes les actions que vous effectuez à l’aide du GitHub serveur MCP. Cette fonctionnalité est actuellement disponible uniquement pour les référentiels publics. Consultez [AUTOTITLE](/code-security/secret-scanning/introduction/about-push-protection).

Exemple de scénario : Implémentation de la conformité de l’accessibilité

Remarque

Le scénario suivant est destiné uniquement à illustrer les modèles et les stratégies que vous pouvez utiliser avec le mode agent et les serveurs MCP pour effectuer une tâche du début à la fin ; le scénario, les invites et les réponses ne sont que des exemples.

Supposons que votre équipe a reçu des commentaires indiquant que votre portail client doit être mis à jour pour se conformer aux dernières normes d’accessibilité. Vous avez été chargé d’améliorer l’accessibilité dans l’application avec les instructions suivantes :

  • Liste des spécifications définies par l’équipe de conception.
  • Problèmes créés dans le référentiel de votre project après un audit d'accessibilité.

Vous pouvez utiliser le Copilot mode agent pour tirer parti de plusieurs serveurs MCP pour implémenter efficacement des améliorations de l’accessibilité.

Le scénario ci-dessous montre comment utiliser des invites distinctes pour différentes phases (recherche, planification, implémentation et validation), ce qui entraîne l’alignement libre de plusieurs « boucles » agentiques avec les phases de cycle de vie du développement logiciel. Cette approche crée des points de contrôle naturels dans lesquels vous pouvez passer en revue la progression, fournir des commentaires et ajuster vos besoins avant Copilot de passer à la phase suivante.

  •         [Conditions préalables](#prerequisites)

  •         [Configuration des serveurs MCP](#setting-up-mcp-servers)

  •         [Step 1 : loop de recherche - Analyse des exigences d’accessibilité](#step-1-research-loop---analyzing-accessibility-requirements)

  •         [Step 2 : Planification loop - Stratégie d’implémentation de l’accessibilité](#step-2-planning-loop---accessibility-implementation-strategy)

  •         [Step 3 : Implémentation loop - Améliorations apportées à l’accessibilité](#step-3-implementation-loop---making-accessibility-improvements)

  •         [Step 4 : Test loop - Vérification de l’accessibilité avec playwright](#step-4-testing-loop---accessibility-verification-with-playwright)

  •         [Étape 5 : Mise à jour des GitHub problèmes](#step-5-updating-github-issues)

  •         [Pour aller plus loin](#further-reading)

Prérequis

Avant d’utiliser le mode agent avec MCP, vérifiez que vous disposez des points suivants :

  • Un EDI avec une Copilot intégration et une prise en charge MCP (par exemple Visual Studio Code)
  • Mode agent activé
  • Access aux serveurs MCP requis que vous souhaitez utiliser

Configuration des serveurs MCP

Tout d’abord, vous devez configurer les serveurs MCP dont vous prévoyez Copilot avoir besoin. Pour cet exemple, nous utiliserons :

  •         **
        GitHub Serveur MCP** : Configurez le serveur MCP pour permettre à Copilot d’accéder à votre référentiel, d’examiner votre base de code, de rechercher des problèmes existants, de créer des branches et de gérer les demandes de tirage. Consultez [AUTOTITLE](/copilot/customizing-copilot/using-model-context-protocol/using-the-github-mcp-server).

  •         **Serveur Figma MCP** : configurez le serveur Figma MCP pour permettre Copilot d’accéder aux fichiers de conception qui incluent des spécifications d’accessibilité, telles que les exigences de contraste de couleur, les états de focus et les modèles d’interaction. Consultez [Figma-Context-MCP](https://github.com/GLips/Figma-Context-MCP) ou essayez le serveur MCP en mode [Dev](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server).

  •         **Serveur MCP playwright** : configurez le serveur MCP playwright pour permettre Copilot l’écriture et l’exécution de tests d’accessibilité automatisés, y compris la compatibilité des lecteurs d’écran et les tests de navigation au clavier. Consultez [mcp-playwright](https://github.com/executeautomation/mcp-playwright).

Étape 1 : Boucle de recherche - Analyse des exigences d'accessibilité

Invitez Copilot à analyser les exigences d’accessibilité et les problèmes existants liés à GitHub l’accessibilité dans le projet.

Dans votre invite, incluez un lien vers le fichier Figma. Pour que Copilot lisent et analysent correctement les spécifications de conception, sélectionnez un nœud ou une couche spécifique dans le fichier afin que l’ID de nœud soit inclus dans l’URL.

Exemple d'invite 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.

Exemples de réponse 1

          Copilot doit répondre en premier en demandant d’exécuter des outils à partir des serveurs Figma et GitHub MCP. Une fois que vous l’avez autorisé, Copilot va analyser les spécifications de conception Figma et va rechercher et organiser les problèmes GitHub en catégories.

Par exemple, Copilot peut identifier le contraste de couleur en tant que catégorie en trouvant plusieurs problèmes à ce sujet.

  • Problèmes de contraste des couleurs
    • Problème n° 134 : Rapport de contraste du texte du tableau de bord inférieur à 4,5:1
    • Problème n° 156 : Les états d’erreur de formulaire ne répondent pas aux exigences de contraste

Cela vous donne une vue d’ensemble complète des exigences d’accessibilité que vous pouvez ensuite avoir Copilot hiérarchisées et créer un plan.

Étape 2 : Planification de la boucle - Stratégie d’implémentation de l’accessibilité

Ensuite, demandez Copilot à créer un plan d’implémentation détaillé.

Exemples d’invite 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.

Exemple de réponse 2

          Copilot répondra en créant un plan d’implémentation hiérarchisé axé sur les problèmes d’accessibilité à impact élevé pour une demande de tirage immédiate tout en suggérant des problèmes de suivi pour le travail restant.

Par exemple, Copilot peut identifier ce qui doit être fait pour résoudre les problèmes dans la catégorie de contraste de couleur.

          **1. Corrections du contraste des couleurs :**
  • Mettre à jour les variables de couleur de texte dans variables.scss pour garantir un rapport de contraste 4,5:1 pour tout le texte normal
  • Modifier les couleurs des composants de l’interface utilisateur dans DashboardCard.vue et d’autres composants principaux pour répondre au ratio de contraste 3:1
  • Hiérarchiser la résolution du problème #134 (contraste de texte du tableau de bord) et problème n° 156 (états d’erreur de formulaire)

Vous pouvez demander Copilot à ajuster le plan en fonction de ce que vous souhaitez mettre l’accent sur. Le résultat est un plan avec lequel vous êtes à l'aise et que vous pouvez maintenant demander à Copilot de mettre en œuvre.

Étape 3 : Boucle d'implémentation - Amélioration de l’accessibilité

Après avoir examiné le plan, invitez Copilot à commencer à implémenter des correctifs d’accessibilité.

Exemple de prompt 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.

Exemples de réponse 3

          Copilot répond en exécutant le plan d’implémentation, en effectuant des modifications ciblées du code pour résoudre les problèmes d’accessibilité identifiés et en créant une pull request.

Par exemple, Copilot peut créer une nouvelle branche appelée fix/critical-accessibility-issues et apporter des modifications pour résoudre les problèmes de contraste des couleurs.

  • Correction des problèmes de contraste de texte du tableau de bord (problème n° 134) :
    • Variables de couleur de texte mises à jour dans src/styles/variables.scss de n° 767676 vers n° 595959
    • Texte foncé modifié sur des arrière-plans gris clair dans DashboardCard.vue pour garantir un rapport de 4,5:1

J’ai ouvert la pull request n° 213 avec ces modifications.

Étape 4 : Boucle de test - Vérification de l’accessibilité avec Playwright

Vous pouvez inviter Copilot pour créer et exécuter des tests d’accessibilité à l’aide de Playwright MCP.

Exemple de prompt 4

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

Exemples de réponse 4

          Copilot répond en développant des tests d’accessibilité et, si nécessaire, en créant un fichier de configuration playwright.

Par exemple, Copilot peut créer un fichier de test autour du contraste de texte.

          **Implémentation de test :**
  • Création d’un fichier de test ciblé dans tests/accessibility/: * contrast.spec.ts - Valide les ratios de contraste de texte

Une fois les tests créés, Copilot demandera l’autorisation d’utiliser différents outils du Playwright MCP pour exécuter les tests. Notez que parfois, Copilot peut effectuer des tests supplémentaires que vous n'avez pas nécessairement demandés ; vous pouvez essayer d'éviter cela en ajustant votre invite pour qu'elle soit plus stricte.

Étape 5 : Mise à jour des GitHub problèmes

Enfin, invitez Copilot à mettre à jour les GitHub points qui ont été résolus dans le pull request et à créer des points de suivi.

Exemple de prompt 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.

Exemples de réponse 5

          Copilot répond en demandant l’autorisation d’utiliser les outils nécessaires à partir du GitHub serveur MCP. Il met ensuite à jour les GitHub problèmes avec des commentaires détaillés et crée des problèmes de suivi structurés pour le travail restant.

Par exemple, Copilot ajoutera des commentaires aux problèmes de contraste de couleur identifiés initialement à l'étape de recherche.

          **Problèmes mis à jour avec les commentaires :**
  • Problème n° 134 : Rapport de contraste du texte du tableau de bord inférieur à 4,5:1’’
    • Commentaire : « Corrigé dans PR n° 213 en mettant à jour les variables de couleur du texte dans variables.scss et le composant DashboardCard. Tout le texte du tableau de bord répond désormais au rapport de contraste 4,5:1, vérifié par les tests automatisés.»

Vous pouvez maintenant examiner le pull request et effectuer les ajustements. Une fois que vous avez vérifié que les modifications sont valides, vous pouvez fusionner de la même manière que pour n’importe quel autre pull request.

Travaux pratiques

Pratiquez l’intégration de MCP GitHub Copilot dans l’exercice de compétences Intégrer MCP à GitHub Copilot.

Dans cet exercice, vous allez apprendre à :

  • Configurez et connectez le GitHub serveur MCP à GitHub Copilot.
  • Utilisez le langage naturel pour interagir avec des services externes via des outils MCP en mode agent.
  • Recherchez et analysez des projets similaires avec MCP.
  • Triage, création et gestion GitHub des problèmes, puis implémenter des modifications avec GitHub Copilot.

Pour approfondir

  •         **Notions de base de MCP**: pour plus d’informations sur la configuration et la configuration des serveurs MCP, consultez [AUTOTITLE](/copilot/customizing-copilot/using-model-context-protocol/extending-copilot-chat-with-mcp).

  •         **Utilisant les serveurs MCP** : pour obtenir des idées supplémentaires sur l’intégration de MCP avec GitHub Copilot, consultez [5 façons de transformer votre flux de travail à l’aide de GitHub Copilot et mcP](https://github.blog/ai-and-ml/github-copilot/5-ways-to-transform-your-workflow-using-github-copilot-and-mcp/) sur le the GitHub Blog.