Como aprimorar o modo de agente do GitHub Copilot com MCP

Saiba como usar o MCP (Protocolo de Contexto de Modelo) para estender as funcionalidades do agente do Copilot Chat.

Neste artigo

Observação

MCP servers in Copilot policy for enterprises and organizations, disabled by default, controls the use of MCP.

Sobre as capacidades de agente do Copilot e MCP

As capacidades de agente do Copilot são a capacidade de trabalhar de modo independente executando fluxos de trabalho de várias etapas sem orientação constante, tomar decisões escolhendo ferramentas e abordagens apropriadas com base no contexto e iterar e adaptar-se ajustando a abordagem conforme comentários e resultados. Você pode acessar esses recursos usando o modo de agente.

Quando combinado com servidores MCP (Protocolo de Contexto do Modelo), o modo de agente se torna significativamente mais avançado, dando ao Copilot acesso a recursos externos sem alternar o contexto. Isso permite que o Copilot conclua "loops" de agente, em que ele pode adaptar dinamicamente sua abordagem encontrando informações relevantes de maneira autônoma, analisando comentários e tomando decisões embasadas. Com o MCP, o Copilot pode concluir uma tarefa com intervenção humana mínima, ajustando continuamente sua estratégia com base no que descobre.

Benefícios de combinar o MCP com o modo de agente

Ao usar servidores MCP com o modo de agente, você possibilita vários benefícios principais:

  • Contexto estendido: os servidores MCP fornecem ao Copilot acesso a fontes de dados externas, APIs e ferramentas.
  • Esforço manual reduzido: o Copilot pode executar tarefas como criar problemas e executar fluxos de trabalho enquanto você se concentra em tarefas de mais valor.
  • Integração perfeita: o Copilot pode funcionar em uma tarefa que envolve várias ferramentas e plataformas sem alternar contextos nem exigir integrações personalizadas.

Práticas recomendadas para usar o MCP com o modo de agente

Siga estas práticas recomendadas para aproveitar ao máximo a combinação de servidores MCP com o modo de agente.

Estratégias de solicitação

  • Estabelecer metas específicas: no prompt, defina claramente o que você quer realizar e a saída desejada.
  • Contextualizar: inclua informações relevantes em segundo plano sobre seu projeto e requisitos, incluindo links para recursos externos que o Copilot pode acessar.
  • Definir limites: especifique todas as restrições ou limitações para a tarefa. Por exemplo, se você quer que o Copilot planeje apenas um novo recurso e ainda não faça nenhuma alteração, especifique isso. Você também pode limitar quais ferramentas do MCP estão habilitadas.
  • Solicitar confirmações: peça que o Copilot confirme a compreensão antes de prosseguir com alterações significativas.
  • Usar arquivos de prompt ou instruções personalizadas: você pode criar arquivos de prompt ou arquivos de instruções personalizados para orientar o Copilot sobre como se comportar para diferentes servidores MCP. Confira Sobre como personalizar as respostas do GitHub Copilot Chat.

Uso do servidor MCP

  • Escolher servidores relevantes: selecione e habilite servidores MCP alinhados às suas necessidades específicas de fluxo de trabalho.
  • Começar de modo simples: comece com alguns servidores MCP bem estabelecidos antes de adicionar integrações mais complexas.
  • Testar a conectividade: verifique se todos os servidores MCP estão configurados corretamente e acessíveis antes de iniciar tarefas do modo de agente.

Considerações de segurança

  • Usar o OAuth quando disponível: para servidores MCP como o GitHub MCP, prefira a autenticação OAuth ao personal access tokens. Confira Como usar o Servidor de MCP do GitHub.
  • Limitar permissões: conceda aos servidores MCP apenas as permissões mínimas necessárias para suas tarefas.
  • Revisar as conexões: audite regularmente quais servidores MCP têm acesso ao seu ambiente de desenvolvimento.
  • Monitorar a atividade: acompanhe as ações que o Copilot executa por meio de servidores MCP.
  • Impedir vazamentos de segredo: a proteção por push impede que os segredos sejam incluídos em respostas geradas por IA e impede que você exclua segredos por meio de ações executadas usando o servidor MCP GitHub. No momento, isso está disponível apenas para repositórios públicos. Confira Sobre a proteção por push.

Exemplo de cenário: implementar a conformidade de acessibilidade

Observação

O cenário a seguir se destina apenas a demonstrar os padrões e estratégias que você pode usar com o modo de agente e servidores MCP para concluir uma tarefa do início ao fim. O cenário, os prompts e as respostas são apenas exemplos.

Digamos que sua equipe tenha recebido comentários de que o portal do cliente precisa ser atualizado para cumprir os padrões de acessibilidade mais recentes. Você foi encarregado de melhorar a acessibilidade em todo o aplicativo com as seguintes diretrizes:

  • Uma lista de especificações definidas pela equipe de design.
  • Problemas criados no repositório do projeto após uma auditoria de acessibilidade.

Você pode usar o para aproveitar vários servidores MCP para implementar melhorias de acessibilidade com eficiência.

O cenário a seguir demonstra como você pode usar prompts separados para diferentes fases (pesquisa, planejamento, implementação e validação), resultando em vários "loops" de agente alinhados livremente com fases de ciclo de vida de desenvolvimento de software. Essa abordagem cria pontos de verificação naturais em que você pode examinar o progresso, fornecer comentários e ajustar seus requisitos antes que o Copilot avance para a próxima fase.

Pré-requisitos

Antes de usar o modo de agente com MCP, verifique se você tem:

  • Um IDE com a integração do Copilot e suporte a MCP (como o Visual Studio Code)
  • Modo de agente habilitado
  • Acesso aos servidores MCP necessários que você deseja usar

Como configurar os servidores MCP

Primeiro, você precisa configurar os servidores MCP de que você acredita que o Copilot precisará. Para este exemplo de cenário, usaremos:

  • Servidor MCP do GitHub: configure o servidor MCP do GitHub para habilitar o Copilot a acessar seu repositório, examinar sua base de código, pesquisar problemas existentes, criar branches e gerenciar pull requests. Confira Como usar o Servidor de MCP do GitHub.

  • Servidor MCP do Figma: configure o servidor MCP do FIGMA para permitir que o Copilot acesse arquivos de design que incluem especificações de acessibilidade, como requisitos de contraste de cores, estados de foco e padrões de interação. Confira Figma-Context-MCP ou experimente o servidor MCP do Modo de Desenvolvimento em versão beta aberta.

  • Servidor MCP do Playwright: configure o servidor MCP do Playwright para habilitar o Copilot a gravar e executar testes de acessibilidade automatizados, incluindo compatibilidade com leitor de tela e testes de navegação de teclado. Confira mcp-playwright.

Etapa 1: Loop de pesquisa – Analisar os requisitos de acessibilidade

Solicite que o Copilot analise os requisitos de acessibilidade e os problemas do GitHub relacionados à acessibilidade no projeto.

No prompt, inclua um link para o arquivo Figma. Para que o Copilot leia e analise com êxito as especificações de design, selecione um nó ou camada específico no arquivo, para que a ID do nó seja incluído no URL.

Exemplo de solicitação: 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.

Exemplo de resposta do Copilot:

O Copilot deve responder primeiro solicitando a execução de ferramentas dos servidores MCP do Figma e do GitHub. Depois de permitir, o Copilot analisará as especificações de design do Figma e procurará e organizará problemas do GitHub em categorias.

Por exemplo, o Copilot pode identificar o contraste de cores como uma categoria com base na localização de vários problemas sobre ele.

  • Problemas de contraste de cores
    • Problema nº 134: taxa de contraste de texto do painel abaixo de 4,5:1
    • Problema nº 156: os estados de erro de formulário não cumprem os requisitos de contraste

Isso apresenta uma visão geral abrangente dos requisitos de acessibilidade para os quais você pode fazer o Copilot priorizar e criar um plano.

Etapa 2: Loop de planejamento – Estratégia de implementação de acessibilidade

Em seguida, peça para o Copilot criar um plano de implementação detalhado.

Exemplo de solicitação: 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.

Exemplo de resposta do Copilot:

O Copilot responderá criando um plano de implementação priorizado focado em problemas de acessibilidade de alto impacto para uma pull request imediata, sugerindo problemas de acompanhamento para o trabalho restante.

Por exemplo, o Copilot pode identificar o que precisa ser feito para corrigir os problemas na categoria de contraste de cores.

  • 1. Correções de contraste de cores:
    • Atualizar variáveis de cor de texto em variables.scss para garantir a taxa de contraste de 4,5:1 para todo o texto normal
    • Modificar as cores do componente da interface do usuário no DashboardCard.vue e em outros componentes primários para atender à taxa de contraste de 3:1
    • Priorizar a correção do Problema nº 134 (contraste de texto do painel) e do Problema nº 156 (estados de erro de formulário)

Você pode solicitar que o Copilot ajuste o plano com base no que você deseja focar. O resultado é um plano em que você está confortável, e que agora pode pedir para o Copilot implementar.

Etapa 3: Loop de implementação – Fazer aprimoramentos de acessibilidade

Depois de examinar o plano, solicite que o Copilot comece a implementar correções de acessibilidade.

Exemplo de solicitação: 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.

Exemplo de resposta do Copilot:

O Copilot responderá executando o plano de implementação, fazendo alterações de código direcionadas para resolver os problemas de acessibilidade identificados e criando uma pull request.

Por exemplo, o Copilot pode criar um novo branch chamado fix/critical-accessibility-issues e fazer alterações para resolver os problemas de contraste de cores.

  • Corrigidos problemas de contraste de texto do painel (problema nº 134):
    • Variáveis de cor de texto atualizadas no src/styles/variables.scss de #767676 para #595959
    • Texto escuro modificado em planos de fundo cinza-claro no DashboardCard.vue para garantir a taxa de 4,5:1

Abri a pull request nº 213 com essas alterações.

Etapa 4: Loop de teste – Verificação de acessibilidade com o Playwright

Você pode solicitar que o Copilot crie e execute testes de acessibilidade usando o MCP do Playwright.

Exemplo de solicitação: Create focused accessibility tests for the components we've updated in the pull request. Use the Playwright MCP.

Exemplo de resposta do Copilot:

O Copilot responderá desenvolvendo testes de acessibilidade e, se necessário, criando um arquivo de configuração do Playwright.

Por exemplo, o Copilot pode criar um arquivo de teste em torno do contraste de texto.

Implementação de teste:

  • Criado um arquivo de teste direcionado no tests/accessibility/:
    • contrast.spec.ts – valida as taxas de contraste de texto

Depois que os testes forem criados, o Copilot pedirá permissão para usar várias ferramentas do MCP do Playwright para executar os testes. Às vezes, o Copilot pode fazer testes adicionais que você não necessariamente pediu. Para tentar evitar, torne o prompt mais rigoroso.

Etapa 5: Atualizar problemas do GitHub

Por fim, solicite que o Copilot atualize os problemas do GitHub que foram resolvidos na pull request e crie problemas de acompanhamento.

Exemplo de solicitação: 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.

Exemplo de resposta do Copilot:

O Copilot responderá solicitando permissão para usar as ferramentas necessárias do servidor MCP do GitHub. Em seguida, ele atualizará os problemas do GitHub com comentários detalhados e criará problemas de acompanhamento estruturados para o trabalho restante.

Por exemplo, o Copilot adicionará comentários nos problemas de contraste de cores inicialmente identificados na etapa de pesquisa.

Problemas atualizados com comentários:

  • Problema nº 134: "Taxa de contraste de texto do painel abaixo de 4,5:1"
    • Comentário: "Corrigido na PR nº 213 atualizando variáveis de cor de texto em variables.scss e no componente DashboardCard. Todo o texto do painel agora cumpre a taxa de contraste de 4,5:1, verificada por testes automatizados".

Agora você pode examinar a pull request e fazer ajustes. Depois de verificar se as alterações são válidas, você pode mesclar como com qualquer outra pull request.

Atividade prática

Tente fazer o exercício do Skills Integrar o MCP com o GitHub Copilot para obter experiência prática de integração do MCP com o GitHub Copilot.

Leitura adicional