Gerar imagens no VS Code: Guia do Copilot MCP

Um servidor MCP para o VS Code é uma caixa de ferramentas externa que o modo agente do GitHub Copilot pode acionar diretamente a partir do chat: basta um único arquivo JSON no seu repositório para que o Copilot ganhe ferramentas que seus modelos não possuem nativamente, incluindo a geração de imagens. O Copilot é capaz de escrever componentes e refatorar testes o dia todo, mas nenhum modelo de linguagem por trás dele consegue gerar um arquivo de imagem por si só. Adicione um servidor de geração e a instrução "crie um banner 16:9 para este README" torna-se um comando de chat simples que resulta em um arquivo real gravado na pasta assets/.

Se você veio apenas em busca disso, aqui está a configuração completa. Crie uma API key no seu perfil da BananaBanana e salve este conteúdo em .vscode/mcp.json na raiz do seu repositório:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "bb-api-key",
      "description": "BananaBanana API key (bb_live_...)",
      "password": true
    }
  ],
  "servers": {
    "bananabanana": {
      "type": "http",
      "url": "https://bananabanana.pro/api/mcp",
      "headers": {
        "Authorization": "Bearer ${input:bb-api-key}"
      }
    }
  }
}

Inicie o servidor (o VS Code exibe uma sugestão de início rápida diretamente no arquivo), cole a sua chave quando solicitada e pronto. O arquivo não contém informações confidenciais, por isso é totalmente seguro incluí-lo nos seus commits. Sem processos locais rodando, sem necessidade de uma conta na Google Cloud e sem assinaturas mensais: as imagens são cobradas a partir de $0.03 diretamente do seu saldo pré-pago, e os vídeos a partir de $0.10. Ambas as imagens de demonstração abaixo foram geradas usando uma chave ativa por meio do mesmo endpoint HTTP apontado nesta configuração enquanto eu escrevia este texto; os detalhes de uso e a cobrança de mídia de $0.55 estão listados mais abaixo.

Por que ensinar o GitHub Copilot a gerar imagens?

Porque os repositórios costumam precisar de imagens nos momentos menos oportunos. Seja uma capa chamativa para o seu README para evitar que a página do projeto seja aberta com um bloco frio de emblemas, ou um banner para o site de documentação. Deixando as capturas de tela de lado, criar cada um desses elementos costumava exigir um desvio: abrir uma aba no navegador, digitar o prompt, fazer o download, renomear, arrastar o arquivo para o repositório e só então voltar ao editor de código. No mínimo dez minutos por imagem quando nada dava errado.

Com um servidor MCP, o Copilot executa todo esse fluxo automaticamente no modo agente. Ele mesmo cria o prompt, chama a função generate_image, baixa o arquivo na pasta correspondente e ajusta a referência no markdown. Você apenas revisa a alteração no código.

O principal motivo é a colaboração em equipe, e é exatamente por isso que este guia é apresentado em um artigo exclusivo em vez de ser apenas um parágrafo no guia do Cursor. O arquivo .vscode/mcp.json faz parte do seu espaço de trabalho. Adicione-o ao repositório uma única vez e qualquer desenvolvedor que clonar o projeto terá a caixa de ferramentas de imagens disponível logo na primeira inicialização; o VS Code se encarrega de solicitar a cada pessoa sua própria credencial de uso. Uma configuração unificada, uma chave por desenvolvedor e nenhuma credencial exposta no git.

Servidores MCP locais para geração de imagens também existem e funcionam muito bem se você gosta de gerenciar processos Node localmente e obter sua própria chave de API do Google com seus próprios limites e cotas. A opção remota descarta todas essas etapas: o endpoint já está ativo e operando em nossa infraestrutura, rodando na mesma pipeline do gerador web da BananaBanana, sendo sua única credencial uma chave bb_live_ que pode ser revogada quando necessário.

Como configurar o mcp.json no VS Code?

Os detalhes desta configuração foram validados com base na documentação oficial de MCP do VS Code atualizada em 11 de julho de 2026. Apenas três passos.

Primeiro, registre-se e acesse Profile → MCP API Keys. A chave é exibida apenas uma vez e armazenada de forma segura com hash em nossos servidores, por isso copie-a imediatamente. Contas novas iniciam com um saldo de teste de $0.20, o suficiente para cerca de seis imagens de teste em nosso modelo mais em conta.

Segundo, crie a configuração. Dois caminhos são possíveis:

• .vscode/mcp.json localizado no próprio repositório (esta é a opção ideal para ser compartilhada no git);
• Um arquivo global mcp.json (Paleta de comandos → MCP: Open User Configuration) que acompanha você em todos os seus espaços de trabalho.

O snippet de código inicial usa a diretiva de inputs, que representa de longe o método mais refinado de segurança que já vi em qualquer cliente MCP. A variável ${input:bb-api-key} instrui o VS Code a solicitar esse parâmetro logo no primeiro início do servidor. O atributo "password": true oculta o que você digita e a chave é armazenada de forma criptografada no gerenciador de senhas do sistema, sem nunca tocar no arquivo de texto. Comparado ao Cursor, no qual a interpolação de ${env:…} depende de o editor conseguir enxergar as variáveis de ambiente do seu terminal (um problema invisível e muito comum em programas inicializados pela interface gráfica), o VS Code elimina essa dor de cabeça por conceito.

Terceiro, inicie o servidor: Paleta de comandos → MCP: List Servers → bananabanana → Start, ou clique na indicação de início rápido sugerida no arquivo JSON. Abra o chat do Copilot no modo agente, verifique a seleção de ferramentas disponíveis e você deverá ver sete opções de ferramentas, de list_models a list_generations. Na nossa página informativa de servidores MCP mantemos uma tabela de compatibilidade para cada cliente testado; a linha do VS Code é a que descrevemos neste guia:

Não está visualizando nada? A seção sobre peculiaridades aborda os três motivos mais prováveis, e um deles diz respeito a uma regra corporativa do GitHub que você não conseguirá resolver a partir do editor.

Caso de uso: Imagens para o README e documentação direto no repositório

O exemplo em torno do qual montei este artigo: seu time publica um projeto de terminal de código aberto e o repositório precisa de uma imagem de destaque no README, além de uma ilustração na seção inicial da documentação. No chat do Copilot (modo agente), você solicita o banner; o assistente monta um prompt detalhado e de teor fotográfico e executa a tarefa. Veja o registro real de execução abaixo, com o ID da tarefa correspondente:

→ generate_image {"prompt": "A wide photorealistic hero banner for a GitHub
   README of an open-source terminal application: a sleek dark laptop on a
   light oak desk showing colorful command-line output, soft morning window
   light from the left, shallow depth of field, 50mm lens, generous clean
   negative space on the right side for a project title, no text, no logos",
   "model": "nano-banana-pro", "aspect_ratio": "16:9"}
← {"job_id": "cmrgq90ou00036k7f86f0y54w", "status": "processing",
   "cost_charged_usd": 0.11, "balance_remaining_usd": 1554.18}
→ get_result {"job_id": "cmrgq90ou00036k7f86f0y54w"}
← {"status": "completed", "files": [{"url": "https://bananabanana.pro/api/files/…"}]}

Cerca de vinte segundos entre a solicitação e a entrega do arquivo. Aqui está o resultado exato na primeira tentativa:

Uma observação realista antes de publicar este tipo de design: ao aproximar a imagem, você perceberá que o "código impresso" na tela é uma simulação muito bem elaborada, mas sem sentido real. Na largura normal em um README, isso passará despercebido por qualquer leitor. Entretanto, para portadas em alta definição na documentação onde o texto é perfeitamente visível, isso pode ser identificado. A legibilidade de texto em telas virtuais ainda é um obstáculo para qualquer modelo de imagem fotorrealista; portanto, prefira exibir telas em dimensões menores ou opte por conceitos de imagens mais abstratos.

Para obter a ilustração da seção inicial de ajuda, o fluxo de trabalho foi o mesmo, porém com uma descrição mais minimalista: visão cenital de um teclado mecânico, esquema impresso com notas adesivas e uma xícara de chá verde. Uma única chamada de $0.11:

Ambas as demonstrações foram executadas utilizando o Nano Banana Pro para que fossem apresentadas nesta página com máxima nitidez. Para wikis corporativas internas ou modelos de chamados, eu escolheria o modelo nano-banana-2-lite de $0.03 sem hesitar; o guia do modelo Lite lista perfeitamente as situações nas quais este modelo acessível é mais do que satisfatório. Os links temporários assinados permanecem válidos por 24 horas, e basta uma nova execução de get_result para revalidar os links.

Geração de vídeo também funciona a partir do mesmo canal de chat. A função generate_video nunca realiza débitos na primeira solicitação: ela primeiramente retorna um orçamento prévio estimado, e o assistente precisa confirmar a operação via confirm_cost concordando com o valor. Um clipe de vídeo sem áudio a 720p se inicia em $0.10, enquanto a renderização no modelo Omni Flash com áudio custa $0.10 por segundo, ou seja, $0.30 para uma cena de três segundos.

Peculiaridades do VS Code que vale a pena conhecer

Aqui estão algumas descobertas importantes observadas em nossos testes práticos, apresentadas por ordem de ocorrência.

1. A propriedade principal deve ser servers e não mcpServers. Todos os outros clientes principais (como Claude, Cursor, Windsurf) utilizam a chave mcpServers. Como consequência, qualquer arquivo de configuração importado das páginas de ajuda de outras ferramentas falhará silenciosamente no VS Code, onde alertas de esquema JSON são fáceis de ignorar. O mesmo ocorre no sentido oposto ao exportar blocos de código do VS Code para outros editores. Para servidores virtuais remotos, mantenha o parâmetro type: "http" explícito.

2. Alterar uma credencial já armazenada é uma tarefa chata. Na primeira interação, sua chave de acesso é gravada de maneira permanente e oculta no gerenciador de segurança local, sem a oferta de um comando fácil de edição rápida. O caminho operacional a seguir é: abra o .vscode/mcp.json, posicione o cursor sobre o bloco do servidor correspondente para ativar as ações integradas e selecione o botão de reinicialização limpando as entradas registradas, ou limpe as senhas gravadas na lista em MCP: List Servers → servidor → disconnect e adicione-o novamente. A dinâmica é mais complexa sob conexões Remote SSH, que apresentam vulnerabilidades de autenticação documentadas no repositório de problemas do VS Code. Atualizar uma chave revogada exigirá alguns minutos de cliques inesperados.

3. Em contas do Copilot Business ou Enterprise, o suporte a servidores MCP permanece inativo até que o gestor da organização modifique a política. A permissão "MCP servers in Copilot" é bloqueada de início para as licenças empresariais cedidas, conforme detalhado no guia de políticas de segurança do GitHub. O aspecto mais confuso é o tipo de falha silenciosa: o servidor é ativado perfeitamente, o formato da configuração é validado, mas as novas ferramentas simplesmente nunca se materializam no chat. Se você utiliza uma assinatura pessoal (inclusive na modalidade gratuita Free), não precisará se preocupar com esse fator.

4. Existe um teto de 128 ferramentas por chamada no chat. Ferramentas nativas do sistema, componentes de extensões de terceiros e cada servidor MCP em execução contam para esse limite unificado, conforme o manual de desenvolvimento do editor. O nosso servidor disponibiliza sete delas — um número modesto para um projeto isolado —, mas ao acumular vários módulos simultaneamente ativos no espaço de trabalho, as consultas começarão a falhar por estouro de limite até que você desmarque servidores inteiros no seletor de ferramentas. Embora o VS Code consiga empacotar itens excedentes por trás de menus virtuais, na prática recomendamos fortemente manter habilitados somente os servidores que você utilize ativamente.

5. As rotinas são acionadas em modo agente e cada operação demanda sua aprovação. Módulos integrados do protocolo MCP não são ativados no chat puramente em modo de conversação normal; caso seu assistente fique apenas detalhando conceitos visuais em vez de gerá-los de fato, confira a configuração no seletor de modalidade de chat. O diálogo de confirmação de uso da ferramenta permite autorizá-la temporariamente na sessão, para o espaço de trabalho inteiro ou de forma automática permanente ("always"). No caso de ações gratuitas de leitura, como list_models ou get_result, o ajuste permanente ("always") é muito conveniente. Para generate_image, por outro lado, sugerimos manter a confirmação passo a passo a cada chamada ativada para evitar gastos indesejados de saldo real; lembrando que a geração de vídeo traz ainda a trava de segurança complementar de confirm_cost de nosso lado.

Qual foi o custo de produção de mídia para este guia?

Foram aplicadas as tarifas padrões estipuladas por geração, apresentadas ao agente de chat por meio do método list_models:

Desta vez, todas as mídias geradas alcançaram o resultado ideal logo de primeira. Como essa nem sempre será a regra geral, convém reservar uma margem de segurança no seu orçamento para casos com exibição de textos em telas virtuais ou formatos de alta complexidade geométrica, avaliando sempre as mídias em dimensão real antes de enviá-las para sua branch principal de produção.

Caso você já utilize este servidor em outra plataforma de desenvolvimento de código, o arquivo .vscode/mcp.json que mostramos acima representa a única peça nova do quebra-cabeça: você utilizará a mesma chave de acesso, a mesma conta financeira e o histórico de gerações. Se está iniciando de forma totalmente nova, o guia passo a passo do Claude Code reúne outros quatro exemplos práticos que podem ser importados de maneira praticamente idêntica. Quando se sentir pronto, basta criar uma chave e solicitar ao Copilot seu primeiro banner de README.

Perguntas frequentes

O VS Code é compatível com servidores MCP remotos utilizando o cabeçalho Authorization?

Sim, nativamente. Um servidor remoto é especificado sob as chaves type: "http", a chave url e um conjunto opcional de cabeçalhos headers no arquivo mcp.json, de modo que o uso de ${input:…} resguarda seu segredo de acessos indevidos no arquivo (conforme verificado no manual oficial de MCP do VS Code de 11 de julho de 2026). O ambiente também garante suporte para fluxos OAuth com servidores externos; nossa API autentica atualmente via chaves Bearer, estando a opção de OAuth 2.1 programada como uma segunda alternativa.

É seguro incluir o .vscode/mcp.json em commits do git?

Sim, contanto que sua credencial esteja configurada em uma referência do bloco inputs em vez de estar gravada de forma literal no arquivo. O arquivo JSON enviado ao seu repositório conterá apenas o marcador de posição; dessa maneira, o VS Code solicitará a cada desenvolvedor sua respectiva chave de uso na primeira ativação e a salvará com segurança em seu chaveiro local criptografado. Esse isolamento individual é altamente desejável: cada chave possui seu próprio log de uso e a definição opcional de limite financeiro de uso diário em dólares (USD) a partir de Profile → MCP API Keys. Assim, o desligamento de um colaborador é feito por um processo de revogação em um único clique sem afetar o restante da equipe.

Por que as ferramentas MCP não são exibidas no chat do Copilot?

Existem três causas prováveis. Primeiro, certifique-se de que está utilizando o chat em modo agente, já que os demais canais convencionais de conversa não têm acesso às ações do protocolo MCP. Segundo, pode ser que o servidor não tenha sido ativado; execute o comando MCP: List Servers para avaliar seu estado atual de execução. Terceiro, caso esteja sob uma licença corporativa do Copilot, pode ser que a regra organizacional "MCP servers in Copilot" esteja desativada por política (esse comportamento falha silenciosamente e só pode ser modificado pelo administrador de sua conta empresarial). Se as ferramentas são listadas mas as requisições retornam erro de credencial 401, significa que a chave registrada é inválida ou foi revogada; você pode atestar isso de forma rápida por meio de uma solicitação usando o exemplo disponível em nossa página informativa de servidores MCP.

É necessária uma API key do Google para gerar imagens no VS Code?

Não. Os servidores locais do ecossistema de imagens se comunicam de forma direta com a API do Gemini, o que impõe a necessidade de você utilizar sua própria credencial do Google, quotas e dados de faturamento pessoal. O nosso servidor remoto, por outro lado, processa as tarefas operando em nossa própria infraestrutura gerenciada de chaves da Vertex AI para a BananaBanana, exigindo unicamente a chave bb_live_ fornecida em seu painel: você paga taxas fixas por geração, sem mínimos mensais obrigatórios de uso e usando o saldo pré-pago unificado do nosso painel web.

O GitHub Copilot é capaz de gerar vídeos por meio deste mesmo servidor?

Sim, por meio de uma etapa preliminar de validação financeira. O comando generate_video primeiramente exibe um orçamento prévio estimado, e o agente precisa repetir a solicitação com a instrução confirm_cost preenchendo o valor exato conhecido antes de efetuar qualquer cobrança de saldo. Os custos oscilam entre $0.10 para pequenos trechos mudos a 720p e $4.40 para renderizações de alta complexidade com áudio integrando o Veo 3.1, sendo o modelo Omni Flash com áudio cobrado a $0.10 por segundo ($0.30–$1.00 por clipe). Como o processamento de cada clipe de vídeo pode durar entre um e dez minutos, o agente continuará efetuando consultas com get_result em segundo plano para obter o link final do arquivo enquanto você continua programando livremente.