Skip to main content

Command Palette

Search for a command to run...

Agente

Browser

O agente pode controlar um navegador para testar aplicações, editar visualmente layouts e estilos, auditar acessibilidade, converter designs em código e muito mais. Com acesso total aos logs do console e ao tráfego de rede, o agente pode depurar issues e automatizar fluxos de trabalho completos de teste.

Integração nativa

O agente exibe no chat ações do navegador, como capturas de tela, além da própria janela do navegador, em uma janela separada ou em um painel embutido.

Otimizamos as ferramentas de navegador para aumentar a eficiência e reduzir o uso de tokens, além de:

  • Processamento eficiente de logs: Os logs do navegador são gravados em arquivos que o agente pode pesquisar com grep e ler seletivamente. Em vez de resumir saídas extensas após cada ação, o agente lê apenas as linhas relevantes de que precisa. Isso preserva todo o contexto e minimiza o uso de tokens.
  • Feedback visual com imagens: As capturas de tela são integradas diretamente à ferramenta de leitura de arquivos, para que o agente veja o estado do navegador como imagens, em vez de depender de descrições textuais. Isso permite entender melhor layouts visuais e elementos da UI.
  • Prompting inteligente: O agente recebe contexto adicional sobre os logs do navegador, incluindo o número total de linhas e trechos de prévia, ajudando-o a decidir o que inspecionar.
  • Detecção de servidores de desenvolvimento: O agente é instruído a detectar servidores de desenvolvimento em execução e usar as portas corretas, em vez de iniciar servidores duplicados ou adivinhar números de porta.

Você pode usar o Browser sem instalar ou configurar ferramentas externas.

Recursos do Browser

O agente tem acesso às seguintes ferramentas do Browser:

Acesse URLs e navegue por páginas da Web. O agente pode navegar para qualquer lugar da Web acessando URLs, seguindo links, avançando e voltando no histórico e atualizando páginas.

Interaja com botões, links e elementos de formulário. O agente pode identificar e interagir com elementos da página, realizando ações de clique, clique duplo, clique com o botão direito e passar o cursor sobre qualquer elemento visível.

Insira texto em campos de entrada e formulários. O agente pode preencher formulários, enviar dados e interagir com campos de formulário, caixas de pesquisa e áreas de texto.

Navegue por páginas e conteúdos longos. O agente pode rolar para exibir conteúdo adicional, encontrar elementos específicos e explorar documentos extensos.

Capture imagens de páginas da Web. As capturas de tela ajudam o agente a entender o layout da página, verificar elementos visuais e confirmar as ações realizadas no Browser.

Leia mensagens, erros e logs do console do Browser. O agente pode monitorar erros de JavaScript, saída de depuração e avisos de rede para solucionar issues e verificar o comportamento da página.

Monitore solicitações e respostas HTTP feitas pela página. O agente pode rastrear chamadas de API, analisar payloads de solicitação, verificar códigos de status das respostas e diagnosticar issues relacionados à rede. No momento, esse recurso está disponível apenas no painel do agente e em breve também estará disponível no layout.

Persistência de sessão

O estado do Browser é mantido entre as sessões do agente com base no seu espaço de trabalho. Isso significa:

  • Cookies: Cookies de autenticação e dados de sessão permanecem disponíveis entre sessões do Browser
  • Armazenamento local: Os dados armazenados em localStorage e sessionStorage são mantidos
  • IndexedDB: O conteúdo do banco de dados é mantido entre sessões

O contexto do Browser é isolado por espaço de trabalho, garantindo que projetos diferentes mantenham estados de armazenamento e cookies separados.

Casos de uso

Fluxo de trabalho de desenvolvimento web

O Browser se integra a fluxos de trabalho de desenvolvimento web junto com ferramentas como Figma e Linear. Consulte o cookbook de desenvolvimento web para ver um guia completo de como usar o Browser com sistemas de design, ferramentas de gerenciamento de projetos e bibliotecas de componentes.

Melhorias de acessibilidade

O agente pode avaliar e melhorar a acessibilidade na web para atender às diretrizes de conformidade das WCAG.

@browser Verifique as taxas de contraste de cores, confira o HTML semântico e os rótulos ARIA, teste a navegação por teclado e identifique textos alternativos ausentes

Cherri Code LogoTry in Cherri Code

Testes automatizados

O agente pode executar suítes de testes abrangentes e capturar capturas de tela para testes de regressão visual.

@browser Preencha formulários com dados de teste, percorra fluxos de trabalho clicando, teste layouts responsivos, valide mensagens de erro e monitore o console em busca de erros de JavaScript

Cherri Code LogoTry in Cherri Code

Do design ao código

O agente pode transformar designs em código funcional com layouts responsivos.

@browser Analise este mockup de design, extraia as cores e a tipografia e gere código HTML e CSS com precisão de pixel

Cherri Code LogoTry in Cherri Code

Ajustar o design da UI com base em capturas de tela

O agente pode refinar interfaces existentes identificando discrepâncias visuais e atualizando os estilos dos componentes.

@browser Compare a UI atual com esta captura de tela do design e ajuste o espaçamento, as cores e a tipografia para que correspondam

Cherri Code LogoTry in Cherri Code

Segurança

O Browser funciona como uma visualização segura da Web e é controlado por um servidor MCP executado como extensão. Várias camadas protegem você contra acessos não autorizados e ações maliciosas. As integrações do Browser do Cherri Code também foram revisadas por vários auditores externos de segurança.

Autenticação e isolamento

O navegador implementa várias medidas de segurança:

  • Autenticação por token: o layout do agente gera um token de autenticação aleatório antes do início de cada sessão do navegador
  • Isolamento de abas: cada aba do navegador recebe um ID aleatório exclusivo para evitar interferências entre abas
  • Segurança baseada em sessão: os tokens são regenerados a cada nova sessão do navegador

Aprovação de ferramentas

Por padrão, as ferramentas de Browser exigem sua aprovação. Revise cada ação antes de o agente executá-la. Isso evita navegação inesperada, envio de dados ou execução de scripts.

Você pode configurar as opções de aprovação nas Configurações do agente. Modos disponíveis:

ModoDescrição
Aprovação manualRevise e aprove cada ação do Browser individualmente (recomendado)
Ações permitidasAs ações que correspondem à sua lista de permissões são executadas automaticamente; as demais exigem aprovação
Execução automáticaTodas as ações do Browser são executadas imediatamente, sem aprovação (use com cautela)

Listas de permissões e bloqueios

As ferramentas de Browser se integram às proteções de segurança do Cherri Code. Configure quais ações do Browser são executadas automaticamente:

  • Lista de permissões: Especifique ações confiáveis que não exigem aprovação
  • Lista de bloqueios: Defina ações que devem ser sempre bloqueadas
  • Acesse as configurações em: Configurações do Cherri Code > Agentes > Execução automática

O sistema de listas de permissões e bloqueios oferece proteção de melhor esforço. O comportamento da IA pode ser imprevisível devido à injeção de prompt e outros problemas. Revise regularmente as ações aprovadas automaticamente.

Contexto do navegador

O navegador é aberto em um painel no Cherri Code, permitindo que o agente tenha controle total por meio de ferramentas MCP.

Modelos recomendados

Recomendamos Sonnet 4.5, GPT-5 e Auto para obter o melhor desempenho.

Uso corporativo

Para clientes corporativos, a funcionalidade do navegador é gerenciada ativando ou desativando sua disponibilidade nos controles do MCP. Os admins têm controle granular sobre cada servidor MCP e sobre o acesso ao navegador.

Como ativar o navegador para empresas

Para ativar recursos do navegador para sua equipe corporativa:

  1. Acesse o Painel de configurações
  2. Vá para Configuração do MCP
  3. Ative as "funcionalidades do navegador"

Depois de configurado, os usuários da sua organização terão acesso a ferramentas de navegador com base nas configurações da lista de permissão ou lista de bloqueio do MCP.

Allowlist de origem

Administradores corporativos podem configurar uma allowlist de origem que restringe os sites para os quais o agente pode navegar automaticamente e onde as ferramentas MCP podem ser executadas. Isso oferece controle granular sobre o acesso ao Browser para fins de segurança e conformidade.

Configuração

Para configurar a allowlist de origem:

  1. Acesse o painel de administração
  2. Vá para Configuração do MCP
  3. Verifique se Habilitar funcionalidades de automação do Browser (v2.0+) está habilitado
  4. Em Allowlist de origem do Browser (v2.1+), clique em Adicionar origem
  5. Insira as origens que deseja permitir (por exemplo, *, http://localhost:3000, https://internal.example.com)

Comportamento

Quando uma allowlist de origem está configurada:

  • Navegação automática: o agente só pode usar a ferramenta browser_navigate para acessar URLs com origens incluídas na allowlist
  • Execução de ferramentas MCP: as ferramentas MCP só podem ser executadas em origens incluídas na allowlist
  • Navegação manual: os usuários ainda podem navegar manualmente para qualquer URL no navegador, incluindo origens fora da allowlist (útil para consultar a documentação ou inspecionar sites externos)
  • Restrições de ferramentas: quando o navegador está em uma origem fora da allowlist, as ferramentas de navegador (clicar, digitar, navegar) são bloqueadas, mesmo que o usuário tenha navegado até ela manualmente

Casos de borda

A allowlist de origem oferece proteção de melhor esforço. Esteja ciente dos seguintes comportamentos:

  • Navegação por link: se o agente clicar em um link de um domínio permitido que leve a uma origem não permitida, a navegação será concluída
  • Redirecionamentos: se o agente navegar para uma origem permitida que posteriormente redirecione para uma origem não permitida, o redirecionamento será permitido
  • Navegação por JavaScript: a navegação no lado do cliente (por window.location ou semelhante) de uma origem permitida para uma origem não permitida será concluída

Relacionados