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.
Para clientes corporativos, os controles do navegador são gerenciados pela lista de permissão ou pela lista de bloqueio do MCP.
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
grepe 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
localStorageesessionStoragesã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
Try in Cherri CodeTestes 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
Try in Cherri CodeDo 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
Try in Cherri CodeAjustar 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
Try in Cherri CodeSeguranç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:
| Modo | Descrição |
|---|---|
| Aprovação manual | Revise e aprove cada ação do Browser individualmente (recomendado) |
| Ações permitidas | As ações que correspondem à sua lista de permissões são executadas automaticamente; as demais exigem aprovação |
| Execução automática | Todas 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.
Nunca use o modo de execução automática com código não confiável ou sites desconhecidos. O agente pode executar scripts maliciosos ou enviar dados confidenciais sem seu conhecimento.
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:
- Acesse o Painel de configurações
- Vá para Configuração do MCP
- 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.
A funcionalidade Allowlist de origem do Browser deve estar habilitada na sua organização antes de aparecer no dashboard. Entre em contato com a equipe de contas do Cherri Code para solicitar acesso.
Configuração
Para configurar a allowlist de origem:
- Acesse o painel de administração
- Vá para Configuração do MCP
- Verifique se Habilitar funcionalidades de automação do Browser (v2.0+) está habilitado
- Em Allowlist de origem do Browser (v2.1+), clique em Adicionar origem
- Insira as origens que deseja permitir (por exemplo,
*,http://localhost:3000,https://internal.example.com)
Deixe a lista de permissão vazia para permitir todas as origens. Adicione cada origem separadamente usando o botão Adicionar origem.
Comportamento
Quando uma allowlist de origem está configurada:
- Navegação automática: o agente só pode usar a ferramenta
browser_navigatepara 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.locationou semelhante) de uma origem permitida para uma origem não permitida será concluída
A allowlist de origem restringe a navegação automática do agente, mas não pode impedir todos os caminhos de navegação. Revise regularmente sua lista de permissão e considere as implicações de segurança de permitir o acesso a domínios que podem redirecionar ou conter links para sites externos.