Mejora del modo de agente de Copilot de GitHub con MCP

Obtenga información sobre cómo usar el Protocolo de contexto de modelo (MCP) para expandir las funcionalidades agente de Chat de Copiloto.

En este artículo

Nota:

La directiva MCP servers in Copilot para empresas y organizaciones, deshabilitada de manera predeterminada, controla el uso de MCP.

Acerca de las capacidades agénticas de Copilot y MCP

          Copilot Las capacidades agénticas se refieren a la capacidad de **trabajar de forma independiente** mediante la ejecución de flujos de trabajo multietapa sin instrucciones constantes, **tomar decisiones** eligiendo las herramientas y enfoques adecuados en función del contexto, e **iterar y adaptarse** ajustando su enfoque según los comentarios y los resultados. Puede acceder a estas capacidades mediante el modo de agente.

Cuando se combina con los servidores del Protocolo de contexto de modelo (MCP), el modo de agente se vuelve significativamente más eficaz, lo que proporciona Copilot acceso a recursos externos sin cambiar de contexto. Esto permite a Copilot completar "bucles agentivos", donde puede adaptar dinámicamente su enfoque al encontrar información relevante de manera autónoma, analizar la retroalimentación y tomar decisiones informadas. Con MCP, Copilot puede completar una tarea con una intervención humana mínima, ajustando continuamente su estrategia en función de lo que detecta.

Ventajas de combinar MCP con el modo de agente

Al usar servidores MCP con el modo de agente, se desbloquean varias ventajas clave:

  •         **Contexto extendido**: los servidores MCP proporcionan Copilot acceso a orígenes de datos externos, API y herramientas.

  •         **Esfuerzo manual reducido**: Copilot puede realizar tareas como crear problemas y ejecutar flujos de trabajo mientras se centra en tareas de mayor valor.

  •         **Integración sin problemas**: Copilot puede funcionar en una tarea que implique varias herramientas y plataformas sin cambiar contextos ni requerir integraciones personalizadas.

Procedimientos recomendados para usar MCP con el modo de agente

Sigue estos procedimientos recomendados para sacar el máximo partido a la combinación de servidores MCP con el modo de agente.

Estrategias de creación de mensajes

  •         **Ser específico sobre los objetivos**: defina claramente lo que quiere lograr en el mensaje y la salida que quiere.

  •         **Proporcionar contexto**: incluya información general relevante sobre el proyecto y los requisitos, incluidos los vínculos a recursos externos a los que Copilot puede acceder.

  •         **Establecer límites**: especifique las restricciones o limitaciones de la tarea. Por ejemplo, si solo quiere Copilot planear una nueva característica y no realizar ningún cambio aún, especifique eso. También puedes limitar qué herramientas de MCP se habilitan.

  •         **Confirmaciones de solicitud**: pida Copilot que confirme su comprensión antes de continuar con cambios significativos.

  •         **Use archivos de comandos o instrucciones personalizadas**: puede crear archivos de comandos o archivos de instrucciones personalizados para guiar a Copilot sobre cómo comportarse para diferentes servidores MCP. Consulte [AUTOTITLE](/copilot/concepts/about-customizing-github-copilot-chat-responses).

Uso del servidor MCP

  •         **Elegir los servidores pertinentes**: seleccione y habilite los servidores MCP que se alineen con las necesidades de su flujo de trabajo específico.

  •         **Inicio sencillo**: comience con algunos servidores MCP bien establecidos antes de agregar integraciones más complejas.

  •         **Probar la conectividad**: asegúrese de que todos los servidores MCP estén configurados correctamente y sean accesibles antes de iniciar tareas en modo de agente.

Consideraciones sobre la seguridad

  •         **Use OAuth cuando esté disponible**: para servidores MCP como GitHub MCP, se prefiera la autenticación de OAuth en lugar de personal access tokens. Consulte [AUTOTITLE](/copilot/customizing-copilot/using-model-context-protocol/using-the-github-mcp-server#remote-mcp-server-configuration-with-oauth).

  •         **Limitar los permisos**: conceda a los servidores MCP solo los permisos mínimos necesarios para las tareas.

  •         **Review connections**: audite periódicamente qué servidores MCP tienen acceso al entorno de desarrollo.

  •         **Supervisión de la actividad**: realice un seguimiento de las acciones Copilot que se realizan a través de servidores MCP.

  •         **Evitar fugas de secretos**: la protección de carga impide que los secretos se incluyan en las respuestas generadas por IA y evita que se expongan secretos a través de las acciones que realice mediante el GitHub servidor MCP. Actualmente esto solo está disponible para repositorios públicos. Consulte [AUTOTITLE](/code-security/secret-scanning/introduction/about-push-protection).

Escenario de ejemplo: Implementación del cumplimiento de accesibilidad

Nota:

El siguiente escenario solo está diseñado para demostrar los patrones y estrategias que puedes usar con el modo de agente y los servidores MCP para completar una tarea de principio a fin; el escenario, los mensajes y las respuestas son solo ejemplos.

Imagina que tu equipo ha recibido comentarios de que el portal de clientes debe actualizarse para cumplir los estándares de accesibilidad más recientes. Se te ha encargado mejorar la accesibilidad en toda la aplicación con las instrucciones siguientes:

  • Lista de especificaciones definidas por el equipo de diseño.
  • Problemas creados en el repositorio del project después de una auditoría de accesibilidad.

Puede usar Copilot el modo de agente para aprovechar varios servidores MCP para implementar de forma eficaz mejoras de accesibilidad.

En el escenario siguiente se muestra cómo puedes usar mensajes independientes para distintas fases (investigación, planificación, implementación y validación), lo que da lugar a varios "bucles" con agente alineados de forma flexible con las fases del ciclo de vida de desarrollo de software. Este enfoque crea puntos de control naturales en los que puede revisar el progreso, proporcionar comentarios y ajustar sus requisitos antes de Copilot continuar con la siguiente fase.

  •         [Requisitos previos](#prerequisites)

  •         [Configuración de servidores MCP](#setting-up-mcp-servers)

  •         [Step 1: Research loop - Análisis de los requisitos de accesibilidad](#step-1-research-loop---analyzing-accessibility-requirements)

  •         [Step 2: Planning loop - Estrategia de implementación de accesibilidad](#step-2-planning-loop---accessibility-implementation-strategy)

  •         [Paso 3: Bucle de implementación - Realizar mejoras de accesibilidad](#step-3-implementation-loop---making-accessibility-improvements)

  •         [Paso 4: Bucle de prueba: comprobación de accesibilidad con Playwright](#step-4-testing-loop---accessibility-verification-with-playwright)

  •         [Paso 5: Actualización de GitHub problemas](#step-5-updating-github-issues)

  •         [Lecturas adicionales](#further-reading)

Requisitos previos

Antes de usar el modo de agente con MCP, asegúrate de que tienes lo siguiente:

  • Un IDE con Copilot integración y compatibilidad con MCP (por ejemplo Visual Studio Code, )
  • El modo de agente habilitado
  • Acceso a los servidores MCP que desea usar necesarios

Configuración de servidores MCP

En primer lugar, debe configurar los servidores MCP que prevé Copilot que necesitará. En este escenario de ejemplo, se usará lo siguiente:

  •         **
        GitHub Servidor MCP**: configurar el GitHub Servidor MCP para permitir Copilot el acceso al repositorio, examinar el código base, investigar problemas existentes, crear ramas y administrar solicitudes de incorporación de cambios. Consulte [AUTOTITLE](/copilot/customizing-copilot/using-model-context-protocol/using-the-github-mcp-server).

  •         **Servidor MCP de Figma**: configure el servidor MCP figma para permitir Copilot el acceso a archivos de diseño que incluyen especificaciones de accesibilidad, como requisitos de contraste de color, estados de foco y patrones de interacción. Consulte [Figma-Context-MCP](https://github.com/GLips/Figma-Context-MCP) o pruebe la [Dev Mode MCP server](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server).

  •         **Servidor MCP de Playwright**: configure el servidor MCP de Playwright para permitir Copilot escribir y ejecutar pruebas de accesibilidad automatizadas, incluida la compatibilidad del lector de pantalla y las pruebas de navegación por teclado. Consulte [mcp-playwright](https://github.com/executeautomation/mcp-playwright).

Paso 1: Ciclo de investigación: Análisis de los requisitos de accesibilidad

Pida Copilot que analice los requisitos de accesibilidad y los problemas relacionados con GitHub la accesibilidad existentes en el proyecto.

En el mensaje, incluye un vínculo al archivo Figma. Para que Copilot leer y analizar correctamente las especificaciones de diseño, seleccione un nodo o una capa específicos en el archivo, de modo que el identificador de nodo se incluya en la dirección URL.

Indicación de ejemplo 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.

Respuesta de ejemplo 1

          Copilot debe responder primero solicitando ejecutar herramientas desde los servidores Figma y GitHub MCP. Una vez que lo autorice, Copilot analizará las especificaciones de diseño de Figma y buscará y organizará los problemas de GitHub en categorías.

Por ejemplo, Copilot puede identificar el contraste de color como una categoría basándose en la identificación de varios problemas relacionados con él.

  • Incidencias de contraste de color
    • Incidencia n.º 134: relación de contraste de texto del panel por debajo de 4.5:1
    • Incidencia n.º 156: los estados de error del formulario no cumplen los requisitos de contraste

Esto le proporciona una visión general completa de los requisitos de accesibilidad, lo que le permite asignar prioridad a Copilot y crear un plan para ello.

Paso 2: Bucle de planeación - estrategia de implementación de accesibilidad

A continuación, pida Copilot que cree un plan de implementación detallado.

Indicación de ejemplo 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.

Respuesta de ejemplo 2

          Copilot responderá mediante la creación de un plan de implementación prioritario centrado en problemas de accesibilidad de alto impacto para una solicitud de incorporación de cambios inmediata, al tiempo que sugiere problemas de seguimiento para el trabajo restante.

Por ejemplo, Copilot puede identificar lo que se debe hacer para corregir los problemas de la categoría de contraste de color.

          **1. Incidencias de contraste de color:**
  • Actualiza las variables de color de texto en variables.scss para garantizar una relación de contraste de 4.5:1 para todo el texto normal
  • Modifica los colores de los componentes de la interfaz de usuario en DashboardCard.vue y otros componentes principales para cumplir la relación de contraste 3:1
  • Prioriza la corrección de la Incidencia n.º 134 (contraste de texto del panel) y la Incidencia n.º 156 (estados de error del formulario)

Puede solicitar a Copilot que ajuste el plan en función de en lo que quiere centrarse. El resultado es un plan con el que usted se siente cómodo, que ahora puede solicitar a Copilot que lo implemente.

Paso 3: Bucle de implementación - Realizar mejoras de accesibilidad

Después de revisar el plan, pida Copilot que empiece a implementar correcciones de accesibilidad.

Indicación de ejemplo 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.

Respuesta de ejemplo 3

          Copilot responderá ejecutando el plan de implementación, realizando cambios específicos en el código para solucionar los problemas de accesibilidad identificados y para crear una solicitud de incorporación de cambios.

Por ejemplo, Copilot puede crear una rama denominada fix/critical-accessibility-issues y realizar cambios para solucionar los problemas de contraste de color.

  • Se han corregido las incidencias de contraste de texto del panel (Incidencia n.º 134):
    • Se han actualizado las variables de color de texto en src/styles/variables.scss de #767676 a #595959
    • Se ha modificado el texto oscuro en los fondos grises claros en DashboardCard.vue para garantizar una relación de 4.5:1

He abierto la solicitud de cambios n.º 213 con estos cambios.

Paso 4: Bucle de pruebas - Verificación de accesibilidad con Playwright

Puede solicitar Copilot que cree y ejecute pruebas de accesibilidad mediante el MCP de Playwright.

Indicación de ejemplo 4

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

Respuesta de ejemplo 4

          Copilot responderá mediante el desarrollo de pruebas de accesibilidad y, si es necesario, la creación de un archivo de configuración de Playwright.

Por ejemplo, Copilot puede crear un archivo de prueba alrededor del contraste de texto.

          **Implementación de prueba:**
  • Se ha creado un archivo de prueba de destino en tests/accessibility/: * contrast.spec.ts: valida las relaciones de contraste de texto

Una vez creadas las pruebas, Copilot solicitará permiso para usar varias herramientas del MCP de Playwright para ejecutar las pruebas. Tenga en cuenta que a veces Copilot pueden realizar pruebas adicionales que no haya pedido necesariamente; puede intentar evitarlo ajustando la solicitud para que sea más estricta.

Paso 5: Actualización de GitHub problemas

Por último, pida Copilot que actualice los GitHub problemas abordados en el pull request y cree problemas de seguimiento.

Indicación de ejemplo 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.

Respuesta de ejemplo 5

          Copilot responderá solicitando permiso para usar las herramientas necesarias del GitHub servidor MCP. A continuación, actualizará las GitHub incidencias con comentarios detallados y generará tareas de seguimiento estructuradas para el trabajo restante.

Por ejemplo, Copilot agregará comentarios en los problemas de contraste de color identificados inicialmente en el paso de investigación.

          **Incidencias actualizadas con comentarios:**
  • Incidencia n.º 134: "Relación de contraste de texto del panel por debajo de 4.5:1"
    • Comentario: "Se ha corregido en PR n.º 213 mediante la actualización de las variables de color de texto en variables.scss y el componente DashboardCard. Todo el texto del panel ahora cumple la relación de contraste 4.5:1, verificada mediante pruebas automatizadas".

Ahora puedes revisar la solicitud de cambios y realizar cualquier ajuste. Una vez que hayas comprobado que los cambios son válidos, puedes combinarlos como con cualquier otra solicitud de cambios.

Ejercicios prácticos

Practique la integración de MCP con GitHub Copilot en el ejercicio de Integración de MCP con GitHub Copilot habilidades.

En este ejercicio, aprenderá a:

  • Configure y conecte el GitHub servidor MCP a GitHub Copilot.
  • Use lenguaje natural para interactuar con servicios externos a través de herramientas de MCP en modo agente.
  • Busque y analice proyectos similares con MCP.
  • Priorice, cree y gestione GitHub incidencias y luego implemente cambios con GitHub Copilot.

Información adicional

  •         **Aspectos básicos de MCP**: para obtener más información sobre cómo instalar y configurar servidores MCP, consulte [AUTOTITLE](/copilot/customizing-copilot/using-model-context-protocol/extending-copilot-chat-with-mcp).

  •         **Using MCP servers**: Para obtener ideas adicionales sobre la integración de MCP con GitHub Copilot, consulte [5 formas de transformar el flujo de trabajo mediante GitHub Copilot y MCP](https://github.blog/ai-and-ml/github-copilot/5-ways-to-transform-your-workflow-using-github-copilot-and-mcp/) en el the GitHub Blog.