Uso do Navegador

O AI Cockpit Reasoning oferece capacidades sofisticadas de automação de navegador que permitem que você interaja com sites diretamente do VS Code. Este recurso possibilita testar aplicações web, automatizar tarefas do navegador e capturar screenshots sem sair do seu ambiente de desenvolvimento.

Suporte de Modelo Necessário

O Uso do Navegador no AI Cockpit Reasoning requer o uso de um modelo agêntico avançado e foi testado apenas com Claude Sonnet 3.5, 3.7 e 4.

Como o Uso do Navegador Funciona

Por padrão, o AI Cockpit Reasoning utiliza um navegador embutido que:

• Inicia automaticamente quando você pede ao AI Cockpit para visitar um site
• Captura screenshots de páginas da web
• Permite que o AI Cockpit interaja com elementos da web
• Roda de forma invisível em segundo plano

Tudo isso acontece diretamente no VS Code, sem necessidade de configuração.

Utilizando o Uso do Navegador

Uma interação típica com o navegador segue este padrão:

1. Peça ao AI Cockpit para visitar um site
2. O AI Cockpit inicia o navegador e mostra uma captura de tela
3. Solicite ações adicionais (clicar, digitar, rolar)
4. O AI Cockpit fecha o navegador quando terminar

Por exemplo:

Abra o navegador e veja nosso site.

Você pode verificar se meu site em https://aicockpit.ai está sendo exibido corretamente?

Navegue por http://localhost:3000, role até o final da página e verifique se as informações do rodapé estão sendo exibidas corretamente.

Como as Ações do Navegador Funcionam

A ferramenta browser_action controla uma instância do navegador que retorna capturas de tela e logs do console após cada ação, permitindo que você veja os resultados das interações.

Características principais:

• Cada sessão do navegador deve começar com launch e terminar com close
• Apenas uma ação do navegador pode ser usada por mensagem
• Enquanto o navegador estiver ativo, nenhuma outra ferramenta pode ser usada
• Você deve esperar pela resposta (captura de tela e logs) antes de realizar a próxima ação

Ações do Navegador Disponíveis

Ação	Descrição	Quando Usar
launch	Abre um navegador em uma URL	Iniciando uma nova sessão do navegador
click	Clica em coordenadas específicas	Interagindo com botões, links, etc.
type	Digita texto no elemento ativo	Preenchendo formulários, caixas de busca
scroll_down	Rola para baixo uma página	Visualizando conteúdo abaixo da dobra
scroll_up	Rola para cima uma página	Retornando ao conteúdo anterior
close	Fecha o navegador	Encerrando uma sessão do navegador

Configuração/Configurações de Uso do Navegador

Configurações Padrão do Navegador

• Ativar ferramenta de navegador: Ativado
• Tamanho da viewport: Desktop Pequeno (900x600)
• Qualidade da captura de tela: 75%
• Usar conexão de navegador remoto: Desativado

Acessando as Configurações

Para alterar as configurações de Uso do Navegador / Computador no AI Cockpit:

1. Abra as Configurações clicando no ícone de engrenagem → Uso do Navegador / Computador

   

Ativar/Desativar Uso do Navegador

Objetivo: Ativa ou desativa a capacidade do AI Cockpit de interagir com sites usando um navegador controlado pelo Puppeteer.

Para alterar esta configuração:

1. Marque ou desmarque a caixa de seleção "Ativar ferramenta de navegador" nas configurações de Uso do Navegador / Computador

   

Tamanho da Viewport

Objetivo: Determina a resolução da sessão do navegador que o AI Cockpit Reasoning utiliza.

Compromisso: Valores mais altos fornecem uma viewport maior, mas aumentam o uso de tokens.

Para alterar esta configuração:

1. Clique no menu suspenso em "Tamanho da viewport" nas configurações de Uso do Navegador / Computador

2. Selecione uma das opções disponíveis:

   • Desktop Grande (1280x800)
   • Desktop Pequeno (900x600) - Padrão
   • Tablet (768x1024)
   • Móvel (360x640)

3. Selecione a resolução desejada.

   

Qualidade da Captura de Tela

Objetivo: Controla a qualidade de compressão WebP das capturas de tela do navegador.

Compromisso: Valores mais altos fornecem capturas de tela mais nítidas, mas aumentam o uso de tokens.

Para alterar esta configuração:

1. Ajuste o controle deslizante em "Qualidade da captura de tela" nas configurações de Uso do Navegador / Computador

2. Defina um valor entre 1-100% (o padrão é 75%)

3. Valores mais altos fornecem capturas de tela mais nítidas, mas aumentam o uso de tokens:

   • 40-50%: Bom para sites básicos baseados em texto
   • 60-70%: Equilibrado para a maioria da navegação geral
   • 80%+: Use quando detalhes visuais finos são críticos
   

Conexão de Navegador Remoto

Objetivo: Conectar o AI Cockpit a um navegador Chrome existente em vez de usar o navegador embutido.

Benefícios:

• Funciona em ambientes containerizados e fluxos de trabalho de desenvolvimento remoto
• Mantém sessões autenticadas entre os usos do navegador
• Elimina etapas repetitivas de login
• Permite o uso de perfis de navegador personalizados com extensões específicas

Requisitos: O Chrome deve estar em execução com a depuração remota ativada.

Para ativar este recurso:

1. Marque a caixa "Usar conexão de navegador remoto" nas configurações de Uso do Navegador / Computador

2. Clique em "Testar Conexão" para verificar

   

Casos de Uso Comuns

• DevContainers: Conecte-se do VS Code containerizado ao navegador Chrome do host
• Desenvolvimento Remoto: Use o Chrome local com o servidor VS Code remoto
• Perfis Personalizados do Chrome: Use perfis com extensões e configurações específicas

Conectando a uma Janela Visível do Chrome

Conecte-se a uma janela visível do Chrome para observar as interações do AI Cockpit em tempo real:

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug --no-first-run

Windows

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir=C:\chrome-debug --no-first-run

Linux

google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug --no-first-run