Uso del Navegador

AI Cockpit Reasoning proporciona sofisticadas capacidades de automatización del navegador que te permiten interactuar con sitios web directamente desde VS Code. Esta función permite probar aplicaciones web, automatizar tareas del navegador y capturar capturas de pantalla sin salir de tu entorno de desarrollo.

Soporte de Modelo Requerido

El Uso del Navegador dentro de AI Cockpit Reasoning requiere el uso de un modelo agéntico avanzado, y solo ha sido probado con Claude Sonnet 3.5, 3.7 y 4

Cómo Funciona el Uso del Navegador

De forma predeterminada, AI Cockpit Reasoning usa un navegador integrado que:

• Se lanza automáticamente cuando le pides a AI Cockpit que visite un sitio web
• Captura capturas de pantalla de páginas web
• Permite a AI Cockpit interactuar con elementos web
• Se ejecuta de forma invisible en segundo plano

Todo esto sucede directamente dentro de VS Code, sin necesidad de configuración.

Usar el Navegador

Una interacción típica con el navegador sigue este patrón:

1. Pídele a AI Cockpit que visite un sitio web
2. AI Cockpit lanza el navegador y te muestra una captura de pantalla
3. Solicita acciones adicionales (hacer clic, escribir, desplazarse)
4. AI Cockpit cierra el navegador cuando termina

Por ejemplo:

Abre el navegador y visita nuestro sitio.

¿Puedes verificar si mi sitio web en https://aicockpit.ai se está mostrando correctamente?

Navega a http://localhost:3000, desplázate hasta el final de la página y verifica si la información del pie de página se muestra correctamente.

Cómo Funcionan las Acciones del Navegador

La herramienta browser_action controla una instancia del navegador que devuelve capturas de pantalla y registros de consola después de cada acción, permitiéndote ver los resultados de las interacciones.

Características clave:

• Cada sesión del navegador debe comenzar con launch y terminar con close
• Solo se puede usar una acción del navegador por mensaje
• Mientras el navegador está activo, no se pueden usar otras herramientas
• Debes esperar la respuesta (captura de pantalla y registros) antes de realizar la siguiente acción

Acciones del Navegador Disponibles

Acción	Descripción	Cuándo Usar
launch	Abre un navegador en una URL	Iniciar una nueva sesión del navegador
click	Hace clic en coordenadas específicas	Interactuar con botones, enlaces, etc.
type	Escribe texto en el elemento activo	Rellenar formularios, cuadros de búsqueda
scroll_down	Se desplaza hacia abajo una página	Ver contenido debajo del pliegue
scroll_up	Se desplaza hacia arriba una página	Volver al contenido anterior
close	Cierra el navegador	Finalizar una sesión del navegador

Configuración del Uso del Navegador

Configuración Predeterminada del Navegador

• Habilitar herramienta del navegador: Habilitado
• Tamaño de ventana gráfica: Escritorio pequeño (900x600)
• Calidad de captura de pantalla: 75%
• Usar conexión remota del navegador: Deshabilitado

Acceder a la Configuración

Para cambiar la configuración de Navegador / Uso del Computador en AI Cockpit:

1. Abre Configuración haciendo clic en el ícono de engranaje → Navegador

   

Habilitar/Deshabilitar el Uso del Navegador

Propósito: Interruptor maestro que permite a AI Cockpit interactuar con sitios web usando un navegador controlado por Puppeteer.

Para cambiar esta configuración:

1. Marca o desmarca la casilla "Habilitar herramienta del navegador" en tu configuración de Navegador / Uso del Computador

   

Tamaño de Ventana Gráfica

Propósito: Determina la resolución de la sesión del navegador que usa AI Cockpit Reasoning.

Compensación: Los valores más altos proporcionan una ventana gráfica más grande pero aumentan el uso de tokens.

Para cambiar esta configuración:

1. Haz clic en el menú desplegable bajo "Tamaño de ventana gráfica" en tu configuración de Navegador / Uso del Computador

2. Selecciona una de las opciones disponibles:

   • Escritorio grande (1280x800)
   • Escritorio pequeño (900x600) - Predeterminado
   • Tableta (768x1024)
   • Móvil (360x640)

3. Selecciona tu resolución deseada.

   

Calidad de Captura de Pantalla

Propósito: Controla la calidad de compresión WebP de las capturas de pantalla del navegador.

Compensación: Los valores más altos proporcionan capturas de pantalla más claras pero aumentan el uso de tokens.

Para cambiar esta configuración:

1. Ajusta el control deslizante bajo "Calidad de captura de pantalla" en tu configuración de Navegador / Uso del Computador

2. Establece un valor entre 1-100% (el predeterminado es 75%)

3. Los valores más altos proporcionan capturas de pantalla más claras pero aumentan el uso de tokens:

   • 40-50%: Bueno para sitios web básicos basados en texto
   • 60-70%: Equilibrado para la mayoría de la navegación general
   • 80%+: Usar cuando los detalles visuales finos son críticos
   

Conexión Remota del Navegador

Propósito: Conectar AI Cockpit a un navegador Chrome existente en lugar de usar el navegador integrado.

Beneficios:

• Funciona en entornos en contenedores y flujos de trabajo de desarrollo remoto
• Mantiene sesiones autenticadas entre usos del navegador
• Elimina pasos de inicio de sesión repetitivos
• Permite el uso de perfiles de navegador personalizados con extensiones específicas

Requisitos: Chrome debe estar ejecutándose con la depuración remota habilitada.

Para habilitar esta función:

1. Marca la casilla "Usar conexión remota del navegador" en la configuración de Navegador / Uso del Computador

2. Haz clic en "Probar Conexión" para verificar

   

Casos de Uso Comunes

• DevContainers: Conectar desde VS Code en contenedor al navegador Chrome del host
• Desarrollo Remoto: Usar Chrome local con servidor VS Code remoto
• Perfiles de Chrome Personalizados: Usar perfiles con extensiones y configuraciones específicas

Conectarse a una Ventana de Chrome Visible

Conéctate a una ventana de Chrome visible para observar las interacciones de AI Cockpit en tiempo 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