Browser
Agent puede controlar un Browser web para probar aplicaciones, auditar la accesibilidad, convertir diseños en código y mucho más. Con acceso completo a los registros de la consola y al tráfico de red, Agent puede depurar problemas y automatizar flujos de trabajo de pruebas exhaustivos.
Para clientes Enterprise, los controles del Browser se rigen por la lista de permitidos o de denegados de MCP.
Integración nativa
Agent muestra en el chat acciones del navegador, como capturas de pantalla, además de la propia ventana del navegador, ya sea en una ventana independiente o en un panel integrado.
Hemos optimizado las herramientas del navegador para mejorar la eficiencia y reducir el consumo de tokens, además de:
- Gestión eficiente de registros: Los registros del navegador se escriben en archivos que Agent puede buscar con grep y leer de forma selectiva. En lugar de resumir una salida extensa después de cada acción, Agent lee solo las líneas relevantes que necesita. Esto conserva todo el contexto y minimiza el consumo de tokens.
- Información visual mediante imágenes: Las capturas de pantalla se integran directamente con la herramienta de lectura de archivos, por lo que Agent ve el estado del navegador como imágenes en lugar de depender de descripciones de texto. Esto permite comprender mejor los diseños visuales y los elementos de la UI.
- Instrucciones inteligentes: Agent recibe contexto adicional sobre los registros del navegador, incluidos el número total de líneas y fragmentos de vista previa, lo que le ayuda a decidir de forma informada qué inspeccionar.
- Detección de servidores de desarrollo: Se indica a Agent que detecte los servidores de desarrollo en ejecución y use los puertos correctos, en lugar de iniciar servidores duplicados o adivinar números de puerto.
Puedes usar Browser sin instalar ni configurar herramientas externas.
Capacidades del Browser
El Agent tiene acceso a las siguientes herramientas del Browser:
Visita URL y explora páginas web. El Agent puede navegar por cualquier sitio web visitando URL, siguiendo enlaces, avanzando y retrocediendo en el historial y actualizando páginas.
Interactúa con botones, enlaces y elementos de formularios. El Agent puede identificar e interactuar con elementos de la página, realizando clics, dobles clics, clics con el botón derecho y acciones al pasar el cursor sobre cualquier elemento visible.
Introduce texto en campos de entrada y formularios. El Agent puede completar formularios, enviar datos e interactuar con campos de formulario, cuadros de búsqueda y áreas de texto.
Navega por páginas y contenido extensos. El Agent puede desplazarse para mostrar contenido adicional, encontrar elementos específicos y explorar documentos largos.
Captura representaciones visuales de páginas web. Las capturas de pantalla ayudan al Agent a comprender el diseño de la página, verificar elementos visuales y confirmar las acciones realizadas en el Browser.
Lee mensajes, errores y registros de la consola del Browser. El Agent puede supervisar errores de JavaScript, salida de depuración y advertencias de red para solucionar problemas y verificar el comportamiento de la página.
Supervisa las solicitudes y respuestas HTTP realizadas por la página. El Agent puede hacer un seguimiento de las llamadas a la API, analizar payloads de solicitudes, comprobar códigos de estado de las respuestas y diagnosticar problemas relacionados con la red. Actualmente, esta función solo está disponible en el panel del Agent; próximamente también estará disponible en el diseño.
Persistencia de sesiones
El estado del Browser se conserva entre sesiones del Agent según tu espacio de trabajo. Esto significa:
- Cookies: Las cookies de autenticación y los datos de sesión permanecen disponibles entre sesiones del Browser
- Almacenamiento local: Los datos almacenados en
localStorageysessionStoragese conservan - IndexedDB: El contenido de la base de datos se conserva entre sesiones
El contexto del Browser está aislado para cada espacio de trabajo, lo que garantiza que los distintos proyectos mantengan estados de almacenamiento y cookies independientes.
Casos de uso
Flujo de trabajo para el desarrollo web
Browser se integra en los flujos de trabajo de desarrollo web junto con herramientas como Figma y Linear. Consulta el recetario de desarrollo web para obtener una guía completa sobre cómo usar Browser con sistemas de diseño, herramientas de gestión de proyectos y bibliotecas de componentes.
Mejoras de accesibilidad
Agent puede auditar y mejorar la accesibilidad web para el cumplimiento de las normas WCAG.
@browser Comprueba las relaciones de contraste de color, verifica el HTML semántico y las etiquetas ARIA, prueba la navegación con teclado e identifica el texto alternativo que falta
Try in Cherri CodePruebas automatizadas
Agent puede ejecutar suites de pruebas exhaustivas y capturar capturas de pantalla para realizar pruebas de regresión visual.
@browser Rellena formularios con datos de prueba, recorre flujos de trabajo haciendo clic, prueba diseños adaptables, valida mensajes de error y supervisa la consola para detectar errores de JavaScript
Try in Cherri CodeDel diseño al código
El Agent puede convertir diseños en código funcional con diseños responsivos.
@browser Analiza esta maqueta de diseño, extrae los colores y la tipografía, y genera código HTML y CSS con precisión de píxel
Try in Cherri CodeAjustar el diseño de la UI a partir de capturas de pantalla
Agent puede perfeccionar interfaces existentes identificando diferencias visuales y actualizando los estilos de los componentes.
@browser Compara la UI actual con esta captura de pantalla de diseño y ajusta el espaciado, los colores y la tipografía para que coincidan
Try in Cherri CodeSeguridad
Browser se ejecuta como una vista web segura y se controla mediante un servidor MCP que funciona como extensión. Varias capas te protegen del acceso no autorizado y las acciones maliciosas. Las integraciones de Browser de Cherri Code también han sido auditadas por varios auditores de seguridad externos.
Autenticación y aislamiento
El navegador implementa varias medidas de seguridad:
- Autenticación mediante token: El diseño del Agent genera un token de autenticación aleatorio antes de iniciar cada sesión del navegador
- Aislamiento de pestañas: Cada pestaña del navegador recibe un ID aleatorio único para evitar interferencias entre pestañas
- Seguridad basada en sesiones: Los tokens se regeneran con cada nueva sesión del navegador
Aprobación de herramientas
Las herramientas del Browser requieren tu aprobación de forma predeterminada. Revisa cada acción antes de que Agent la ejecute. Esto evita navegaciones inesperadas, el envío de datos o la ejecución de scripts.
Puedes configurar los ajustes de aprobación en Ajustes de Agent. Modos disponibles:
| Modo | Descripción |
|---|---|
| Aprobación manual | Revisa y aprueba cada acción del Browser por separado (recomendado) |
| Acciones permitidas | Las acciones que coinciden con tu lista de permitidas se ejecutan automáticamente; las demás requieren aprobación |
| Ejecución automática | Todas las acciones del Browser se ejecutan de inmediato sin aprobación (úsalo con precaución) |
Listas de permitidos y bloqueados
Las herramientas del Browser se integran con las medidas de seguridad de Cherri Code. Configura qué acciones del Browser se ejecutan automáticamente:
- Lista de permitidos: Especifica acciones de confianza que no requieren aprobación
- Lista de bloqueados: Define las acciones que siempre deben bloquearse
- Accede a los ajustes en: Cherri Code Settings > Agents > Auto-Run
El sistema de listas de permitidos y bloqueados ofrece protección basada en el mejor esfuerzo. El comportamiento de la IA puede ser impredecible debido a la inyección de prompts y otros problemas. Revisa periódicamente las acciones aprobadas automáticamente.
Nunca uses el modo de ejecución automática con código no confiable ni sitios web desconocidos. El Agent podría ejecutar scripts maliciosos o enviar datos confidenciales sin que lo sepas.
Contexto del navegador
El navegador se abre como un panel dentro de Cherri Code y permite que Agent tenga control total mediante herramientas MCP.
Modelos recomendados
Recomendamos usar Sonnet 4.5, GPT-5 y Auto para obtener el mejor rendimiento.
Uso empresarial
Para los clientes Enterprise, la funcionalidad del navegador se gestiona activando o desactivando su disponibilidad en los controles de MCP. Los Admins disponen de controles granulares sobre cada servidor MCP y sobre el acceso al navegador.
Activar el navegador para Enterprise
Para activar las capacidades del navegador para tu equipo de Enterprise:
- Ve a tu Panel de control de ajustes
- Ve a configuración de MCP
- Activa las "funciones del navegador"
Una vez configurado, los usuarios de tu organización tendrán acceso a las herramientas del navegador según la configuración de la lista de permitidos o de denegados de MCP.
Allowlist de orígenes
Los administradores de Enterprise pueden configurar una allowlist de orígenes que restringe los sitios a los que el agente puede navegar automáticamente y dónde pueden ejecutarse las herramientas MCP. Esto permite un control granular del acceso al navegador por motivos de seguridad y cumplimiento.
La función Allowlist de orígenes del navegador debe estar activada para tu organización antes de aparecer en el panel de control. Ponte en contacto con el equipo de tu cuenta de Cherri Code para solicitar acceso.
Configuración
Para configurar la allowlist de orígenes:
- Ve al Panel de control de administración
- Ve a Configuración de MCP
- Asegúrate de que Activar funciones de automatización del navegador (v2.0+) esté activado
- En Allowlist de orígenes del navegador (v2.1+), haz clic en Añadir origen
- Introduce los orígenes que quieras permitir (p. ej.,
*,http://localhost:3000,https://internal.example.com)
Deja la allowlist vacía para permitir todos los orígenes. Añade cada origen por separado con el botón Añadir origen.
Comportamiento
Cuando se configura una allowlist de orígenes:
- Navegación automática: El agente solo puede usar la herramienta
browser_navigatepara visitar URL cuyos orígenes estén incluidos en la allowlist - Ejecución de herramientas MCP: Las herramientas MCP solo pueden ejecutarse en orígenes incluidos en la allowlist
- Navegación manual: Los usuarios pueden seguir navegando manualmente a cualquier URL, incluidos orígenes fuera de la allowlist (útil para consultar documentación o inspeccionar sitios externos)
- Restricciones de herramientas: Una vez que el navegador se encuentra en un origen que no está incluido en la allowlist, las herramientas del navegador (hacer clic, escribir, navegar) se bloquean, aunque el usuario haya llegado allí manualmente
Casos límite
La allowlist de orígenes ofrece una protección de máxima eficacia posible. Ten en cuenta los siguientes comportamientos:
- Navegación mediante enlaces: Si el agente hace clic en un enlace de un dominio permitido que lleva a un origen no permitido, la navegación se realizará correctamente.
- Redirecciones: Si el agente navega a un origen permitido que posteriormente redirige a un origen no permitido, se permitirá la redirección.
- Navegación con JavaScript: La navegación del lado del cliente (mediante
window.locationo similar) desde un origen permitido a un origen no permitido se realizará correctamente.
La allowlist de orígenes restringe la navegación automática del agente, pero no puede impedir todas las rutas de navegación. Revisa tu allowlist con regularidad y ten en cuenta las implicaciones de seguridad de permitir el acceso a dominios que pueden redirigir o enlazar a sitios externos.