Mejora del modo de agente de GitHub Copilot con MCP

Aprende a usar el Protocolo de contexto de modelo (MCP) para ampliar las funcionalidades de agente de chat de Copilot.

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 funcionalidades de agente y MCP de Copilot

Las funcionalidades agente de Copilot hacen referencia a la capacidad de trabajar de forma independiente mediante la ejecución de flujos de trabajo de varios pasos sin instrucciones constantes, tomar decisiones mediante la elección de las herramientas y enfoques adecuados basados en el contexto e iterar y adaptar mediante el ajuste de tu enfoque en función de comentarios y resultados. Puede acceder a estas capacidades mediante el modo de agente.

Cuando se combina con servidores de Protocolo de contexto de modelo (MCP), el modo de agente se vuelve significativamente más eficaz, lo que proporciona a Copilot acceso a recursos externos sin cambiar de contexto. Esto permite que Copilot complete "bucles" con agente, donde puede adaptar dinámicamente su enfoque mediante la búsqueda autónoma de información relevante, el análisis de comentarios y la toma de decisiones fundamentadas. Con MCP, Copilot puede completar una tarea con una intervención humana mínima y ajustar continuamente su estrategia en función de lo que detecte.

Ventajas de combinar MCP con el modo de agente

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

  •         **Contexto ampliado**: los servidores MCP proporcionan Copilot con acceso a fuentes de datos externos, API y herramientas.

  •         **Reducción del esfuerzo manual**: Copilot puede realizar tareas como crear incidencias y ejecutar flujos de trabajo mientras se centra en tareas de mayor valor.

  •         **Integración sin problemas**: Copilot puede trabajar en una tarea que implique varias herramientas y plataformas sin cambiar contextos ni necesitar 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.

  •         **Proporcione contexto**: incluya información general relevante sobre su proyecto y requisitos, incluidos vínculos a recursos externos que Copilot pueden acceder.

  •         **Establecer límites**: especifique las restricciones o limitaciones de la tarea. Por ejemplo, si quieres que Copilot solo planee una nueva característica y no realice ningún cambio todavía, debes especificarlo. También puedes limitar qué herramientas de MCP se habilitan.

  •         **Solicitar confirmaciones**: pida a Copilot que confirme su comprensión antes de continuar con cambios significativos.

  •         **Usar archivos de mensaje o instrucciones personalizadas**: puede crear archivos de mensaje o archivos de instrucciones personalizadas 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

  •         **Usar OAuth cuando esté disponible**: para servidores MCP como GitHub MCP, es preferible la autenticación de OAuth antes que 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.

  •         **Supervisar la actividad**: realice el seguimiento de las acciones que Copilot lleva a cabo mediante servidores MCP.

  •           **Evitar filtraciones de secretos**: la protección contra inserción 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 con el servidor MCP de GitHub. Actualmente esto solo está disponible para repositorios públicos. Consulta [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.

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

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 puedes revisar el progreso, proporcionar comentarios y ajustar los requisitos antes de que Copilot continúe 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)

  •         [Step 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 datos integración de Copilot 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, debes configurar los servidores MCP que prevés que Copilot necesitará. En este escenario de ejemplo, se usará lo siguiente:

  •         **GitHub servidor MCP**: Configure el servidor MCP GitHub para habilitar Copilot para acceder a su repositorio, examinar su código base, investigar problemas existentes, crear ramas y administrar pull requests. Consulte [AUTOTITLE](/copilot/customizing-copilot/using-model-context-protocol/using-the-github-mcp-server).

  •         **Figma MCP server**: Configure el servidor MCP de Figma para permitir que Copilot acceda a archivos de diseño que incluyan 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 que Copilot escriba y ejecute 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

Pídele a Copilot que analice los requisitos de accesibilidad y las incidencias de GitHub existentes relacionadas con la accesibilidad en el proyecto.

En el mensaje, incluye un vínculo al archivo Figma. Para que Copilot lea y analice correctamente las especificaciones de diseño, selecciona un nodo o una capa específicos en el archivo para que el identificador del 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 la ejecución de herramientas desde los servidores MCP de Figma y GitHub. Una vez que lo permitas, 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 en función de la búsqueda de varias incidencias sobre é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 te proporciona una visión general completa de los requisitos de accesibilidad para que después le digas a Copilot que los priorice y cree un plan para ellos.

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

A continuación, pídele a 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á con la creación de un plan de implementación prioritario centrado en incidencias de accesibilidad de alto impacto para una solicitud de cambios inmediata mientras sugiere incidencias de seguimiento para el trabajo restante.

Por ejemplo, Copilot puede identificar lo que se debe hacer para corregir las incidencias en 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)

Puedes pedirle a Copilot que ajuste el plan en función de los aspectos en los que quieras centrarte. El resultado es un plan que te convence y que ahora puedes pedir a Copilot que implemente.

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

Después de revisar el plan, pídele a Copilot que empiece a implementar las 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á con la ejecución el plan de implementación, realizando cambios en el código de destino para solucionar las incidencias de accesibilidad identificadas y crear una solicitud de cambios.

Por ejemplo, Copilot puede crear una rama denominada fix/critical-accessibility-issues y realizar cambios para solucionar las incidencias 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

Puedes pedirle a Copilot que cree y ejecute pruebas de accesibilidad mediante Playwright MCP.

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á con el desarrolla de pruebas de accesibilidad y, si es necesario, crea un archivo de configuración de Playwright.

Por ejemplo, Copilot puede crear un archivo de prueba 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 que crea las pruebas, Copilot pedirá permiso para usar varias herramientas de MCP de Playwright para ejecutar las pruebas. Recuerda que a veces Copilot puede realizar pruebas adicionales que no le has pedido; puedes intentar evitarlo si ajustas el mensaje para que sea más preciso.

Paso 5: Problemas al actualizar GitHub

Por último, solicite a Copilot que actualice las incidencias de GitHub que se han solucionado en el pull request y cree incidencias 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 servidor MCP GitHub. A continuación, actualizará los problemas GitHub con comentarios detallados y creará problemas de seguimiento estructurados para el trabajo restante.

Por ejemplo, Copilot agregará comentarios en las incidencias de contraste de color identificadas 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

Prueba el ejercicio de habilidades Integración de MCP con GitHub Copilot para obtener experiencia práctica sobre la integración de MCP 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 the GitHub Blog.