Turbine seu Copilot no VS Code com MCP (Model Context Protocol)

Turbine seu Copilot no VS Code com MCP (Model Context Protocol)

O GitHub Copilot já transformou a maneira como escrevemos código, mas e se ele pudesse ir além? E se, em vez de apenas sugerir código, ele pudesse interagir diretamente com suas ferramentas, bibliotecas e documentações preferidas? É exatamente essa a promessa do Model Context Protocol (MCP), uma tecnologia de fronteira que está sendo integrada ao Copilot e que você já pode começar a testar.

Neste artigo, vamos desmistificar o que é o MCP e mostrar passo a passo como configurá-lo no seu VS Code, transformando seu assistente de IA em um parceiro de desenvolvimento ainda mais poderoso e ciente do contexto do seu projeto.

O que é o Model Context Protocol (MCP)?

Pense no MCP como uma "ponte" universal. Ele é um padrão de comunicação que permite que modelos de IA, como o Copilot, conversem de forma estruturada com ferramentas e fontes de dados externas.

• Sem MCP: O Copilot sabe sobre código, pois foi treinado em bilhões de linhas. No entanto, ele não sabe como usar a CLI do seu framework preferido ou qual o último componente lançado na sua biblioteca de UI.
• Com MCP: Você pode "ensinar" o Copilot a usar essas ferramentas. Ele pode invocar um servidor MCP local que executa um comando (npx, por exemplo) ou se conectar a um serviço na web para buscar informações atualizadas.

Em resumo, o MCP dá ao Copilot ferramentas e contexto em tempo real, permitindo que ele execute tarefas complexas em seu nome, como adicionar componentes, refatorar código seguindo uma lógica específica ou buscar documentação externa.

Como Configurar o MCP no VS Code

A configuração é feita diretamente no seu arquivo settings.json. Você pode abri-lo no VS Code pressionando Ctrl + Shift + P e digitando Preferences: Open User Settings (JSON).

A seguir, vamos analisar o bloco de configuração que você forneceu, explicando cada parte.

1. Habilitando os Recursos MCP e o Agente do Copilot

Primeiro, precisamos ativar os recursos experimentais no settings.json.

{
    "chat.mcp.enabled": true,
    "chat.mcp.discovery.enabled": true,
    "chat.agent.enabled": true,
    "github.copilot.chat.agent.runTasks": true,
    "github.copilot.chat.agent.autoFix": true
}

• "chat.mcp.enabled": true: Ativa o suporte ao Model Context Protocol no chat do VS Code.
• "chat.mcp.discovery.enabled": true: Permite que o VS Code descubra automaticamente alguns servidores MCP.
• "chat.agent.enabled": true: Habilita o "agente" do Copilot, uma versão mais proativa capaz de executar tarefas.
• "github.copilot.chat.agent.runTasks": true e "autoFix": true: Concedem permissão ao agente para executar comandos e propor correções automáticas no seu código.

2. Configurando os Servidores MCP

Esta é a parte principal, onde definimos quais ferramentas o Copilot poderá usar. O bloco mcp.servers define um apelido para cada ferramenta e como o Copilot deve executá-la.

{
    "mcp": {
        "servers": {
            "shadcn": {
                "command": "npx",
                "args": [
                    "-y",
                    "shadcn@canary",
                    "registry:mcp"
                ],
                "env": {
                    "REGISTRY_URL": "https://alpine-registry.vercel.app//r/registry.json"
                }
            },
            "sequentialthinking": {
                "command": "npx",
                "args": [
                    "-y",
                    "@modelcontextprotocol/server-sequential-thinking"
                ]
            },
            "context7": {
                "type": "http",
                "url": "https://mcp.context7.com/mcp"
            }
        }
    }
}

Vamos detalhar os servidores que você configurou:

• shadcn:

  • O que faz? Conecta o Copilot à CLI do shadcn/ui, uma biblioteca de componentes de UI extremamente popular para React.
  • Como? Quando você invocar @shadcn, o Copilot executará o comando npx shadcn@canary registry:mcp. Isso permite que o Copilot interaja com o registro de componentes do shadcn/ui.
  • Exemplo de uso: Você poderá pedir no chat: @shadcn adicione um componente Button ao meu projeto.

• sequentialthinking:

  • O que faz? Carrega um servidor que ajuda o Copilot a "pensar em voz alta", dividindo um problema complexo em uma sequência de passos lógicos antes de apresentar a solução.
  • Como? Executa o pacote npx @modelcontextprotocol/server-sequential-thinking.
  • Exemplo de uso: @sequentialthinking me ajude a criar um plano para refatorar minha API do Express para usar rotas modulares.

• context7:

  • O que faz? Este é um exemplo de servidor remoto. Ele conecta o Copilot a uma fonte de dados externa (context7.com), que pode ser um serviço de busca de documentação ou uma base de conhecimento.
  • Como? Diferente dos outros, ele não executa um comando local (npx). Em vez disso, ele se conecta a uma url via HTTP.
  • Exemplo de uso: @context7 quais as principais mudanças na última versão do React?

Colocando em Prática: Como Usar no Chat do Copilot

Depois de salvar seu settings.json (pode ser necessário reiniciar o VS Code), usar seus novos superpoderes é muito simples.

1. Abra a visualização de Chat do GitHub Copilot (Ctrl + Alt + I).
2. Comece seu prompt usando @ para invocar a ferramenta desejada.
3. Descreva a tarefa que você quer realizar.

Exemplos de Prompts:

@shadcn preciso de um formulário de login. Adicione os componentes de Card, Label, Input e Button.

@sequentialthinking me explique passo a passo como conectar meu aplicativo Node.js a um banco de dados PostgreSQL usando o Prisma.

@context7 me dê um resumo sobre a API de Intersection Observer.

O Copilot irá identificar a ferramenta, executar a tarefa em segundo plano e retornar o resultado, seja um bloco de código, um plano de ação ou uma informação.