Communitygithub.com

lunrenyi/ai-agent.sh

Repositorio de aprendizaje para agentes de IA

¿Qué es ai-agent.sh?

Este skill proporciona un conjunto completo de herramientas para la automatización del navegador utilizando `agent-browser`, una interfaz de línea de comandos que controla Chrome/Chromium a través del protocolo CDP directamente. Está diseñado para desarrolladores y agentes de IA que necesitan automatizar interacciones web complejas, como el llenado de formularios, la navegación, la autenticación y la extracción de datos. El skill soporta múltiples plataformas (instalación vía npm, Homebrew o Cargo) y ofrece una amplia gama de comandos para manejo de elementos, esperas, descargas, red, viewport, capturas de pantalla y más. También incluye funcionalidades avanzadas como transmisión en vivo, ejecución por lotes, manejo de iframes y sesiones paralelas, lo que lo hace ideal para tareas de scraping, pruebas automatizadas y orquestación de flujos de trabajo de agentes de IA.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add lunrenyi/ai-agent.sh
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Automatización del Navegador con agent-browser

La CLI usa Chrome/Chromium vía CDP directamente. Instálala con npm i -g agent-browser, brew install agent-browser o cargo install agent-browser. Ejecuta agent-browser install para descargar Chrome. Ejecuta agent-browser upgrade para actualizar a la última versión.

Flujo de Trabajo Principal

Toda automatización del navegador sigue este patrón:

  1. Navegar: agent-browser open <url>
  2. Instantánea: agent-browser snapshot -i (obtén referencias de elementos como @e1, @e2)
  3. Interactuar: Usa las referencias para hacer clic, llenar, seleccionar
  4. Re-instantánea: Después de la navegación o cambios en el DOM, obtén referencias frescas
agent-browser open https://example.com/form
agent-browser snapshot -i
# Salida: @e1 [input type="email"], @e2 [input type="password"], @e3 [button] "Submit"

agent-browser fill @e1 "[email protected]"
agent-browser fill @e2 "password123"
agent-browser click @e3
agent-browser wait --load networkidle
agent-browser snapshot -i  # Verificar resultado

Encadenamiento de Comandos

Los comandos se pueden encadenar con && en una sola invocación de shell. El navegador persiste entre comandos a través de un demonio en segundo plano, por lo que el encadenamiento es seguro y más eficiente que las llamadas separadas.

# Encadenar open + wait + snapshot en una llamada
agent-browser open https://example.com && agent-browser wait --load networkidle && agent-browser snapshot -i

# Encadenar múltiples interacciones
agent-browser fill @e1 "[email protected]" && agent-browser fill @e2 "password123" && agent-browser click @e3

# Navegar y capturar
agent-browser open https://example.com && agent-browser wait --load networkidle && agent-browser screenshot page.png

Cuándo encadenar: Usa && cuando no necesites leer la salida de un comando intermedio antes de continuar (p. ej., open + wait + screenshot). Ejecuta comandos por separado cuando necesites analizar la salida primero (p. ej., instantánea para descubrir referencias, luego interactuar usando esas referencias).

Manejo de Autenticación

Al automatizar un sitio que requiere inicio de sesión, elige el enfoque que mejor se adapte:

Opción 1: Importar autenticación desde el navegador del usuario (más rápido para tareas únicas)

# Conectarse al Chrome en ejecución del usuario (ya ha iniciado sesión)
agent-browser --auto-connect state save ./auth.json
# Usar ese estado de autenticación
agent-browser --state ./auth.json open https://app.example.com/dashboard

Los archivos de estado contienen tokens de sesión en texto plano; agrégalos a .gitignore y elimínalos cuando ya no sean necesarios. Establece AGENT_BROWSER_ENCRYPTION_KEY para el cifrado en reposo.

Opción 2: Perfil persistente (más simple para tareas recurrentes)

# Primera ejecución: inicio de sesión manual o automatizado
agent-browser --profile ~/.myapp open https://app.example.com/login
# ... llenar credenciales, enviar ...

# Todas las ejecuciones futuras: ya autenticado
agent-browser --profile ~/.myapp open https://app.example.com/dashboard

Opción 3: Nombre de sesión (guardar/restaurar cookies + localStorage automáticamente)

agent-browser --session-name myapp open https://app.example.com/login
# ... flujo de inicio de sesión ...
agent-browser close  # Estado guardado automáticamente

# Próxima vez: estado restaurado automáticamente
agent-browser --session-name myapp open https://app.example.com/dashboard

Opción 4: Bóveda de autenticación (credenciales almacenadas cifradas, inicio de sesión por nombre)

echo "$PASSWORD" | agent-browser auth save myapp --url https://app.example.com/login --username user --password-stdin
agent-browser auth login myapp

auth login navega con load y luego espera a que aparezcan los selectores del formulario de inicio de sesión antes de llenar/hacer clic, lo cual es más confiable en pantallas de inicio de sesión SPA con retardo.

Opción 5: Archivo de estado (guardar/cargar manualmente)

# Después de iniciar sesión:
agent-browser state save ./auth.json
# En una sesión futura:
agent-browser state load ./auth.json
agent-browser open https://app.example.com/dashboard

Consulta references/authentication.md para patrones de OAuth, 2FA, autenticación basada en cookies y actualización de tokens.

Comandos Esenciales

# Navegación
agent-browser open <url>              # Navegar (alias: goto, navigate)
agent-browser close                   # Cerrar navegador
agent-browser close --all             # Cerrar todas las sesiones activas

# Instantánea
agent-browser snapshot -i             # Elementos interactivos con referencias (recomendado)
agent-browser snapshot -s "#selector" # Abarcar con selector CSS

# Interacción (usar @refs de la instantánea)
agent-browser click @e1               # Hacer clic en elemento
agent-browser click @e1 --new-tab     # Hacer clic y abrir en nueva pestaña
agent-browser fill @e2 "texto"        # Limpiar y escribir texto
agent-browser type @e2 "texto"        # Escribir sin limpiar
agent-browser select @e1 "opción"     # Seleccionar opción de menú desplegable
agent-browser check @e1               # Marcar casilla de verificación
agent-browser press Enter             # Presionar tecla
agent-browser keyboard type "texto"   # Escribir en el foco actual (sin selector)
agent-browser keyboard inserttext "texto"  # Insertar sin eventos de teclado
agent-browser scroll down 500         # Desplazar página
agent-browser scroll down 500 --selector "div.content"  # Desplazar dentro de un contenedor específico

# Obtener información
agent-browser get text @e1            # Obtener texto del elemento
agent-browser get url                 # Obtener URL actual
agent-browser get title               # Obtener título de la página
agent-browser get cdp-url             # Obtener URL WebSocket de CDP

# Esperar
agent-browser wait @e1                # Esperar elemento
agent-browser wait --load networkidle # Esperar inactividad de red
agent-browser wait --url "**/page"    # Esperar patrón de URL
agent-browser wait 2000               # Esperar milisegundos
agent-browser wait --text "Bienvenido"    # Esperar que aparezca texto (coincidencia de subcadena)
agent-browser wait --fn "!document.body.innerText.includes('Cargando...')"  # Esperar que desaparezca texto
agent-browser wait "#spinner" --state hidden  # Esperar que desaparezca elemento

# Descargas
agent-browser download @e1 ./file.pdf          # Hacer clic en elemento para activar descarga
agent-browser wait --download ./output.zip     # Esperar que se complete cualquier descarga
agent-browser --download-path ./downloads open <url>  # Establecer directorio de descarga predeterminado

# Red
agent-browser network requests                 # Inspeccionar solicitudes rastreadas
agent-browser network requests --type xhr,fetch  # Filtrar por tipo de recurso
agent-browser network requests --method POST   # Filtrar por método HTTP
agent-browser network requests --status 2xx    # Filtrar por estado (200, 2xx, 400-499)
agent-browser network request <requestId>      # Ver detalle completo de solicitud/respuesta
agent-browser network route "**/api/*" --abort  # Bloquear solicitudes coincidentes
agent-browser network har start                # Iniciar grabación HAR
agent-browser network har stop ./capture.har   # Detener y guardar archivo HAR

# Viewport y emulación de dispositivos
agent-browser set viewport 1920 1080          # Establecer tamaño de viewport (predeterminado: 1280x720)
agent-browser set viewport 1920 1080 2        # Retina 2x (mismo tamaño CSS, capturas de mayor resolución)
agent-browser set device "iPhone 14"          # Emular dispositivo (viewport + agente de usuario)

# Captura
agent-browser screenshot              # Captura de pantalla en directorio temporal
agent-browser screenshot --full       # Captura de página completa
agent-browser screenshot --annotate   # Captura anotada con etiquetas numeradas de elementos
agent-browser screenshot --screenshot-dir ./shots  # Guardar en directorio personalizado
agent-browser screenshot --screenshot-format jpeg --screenshot-quality 80
agent-browser pdf output.pdf          # Guardar como PDF

# Vista previa en vivo / transmisión
agent-browser stream enable           # Iniciar transmisión WebSocket en tiempo real en un puerto auto-seleccionado
agent-browser stream enable --port 9223  # Vincular un puerto localhost específico
agent-browser stream status           # Inspeccionar estado habilitado, puerto, conexión y screencasting
agent-browser stream disable          # Detener transmisión en tiempo real y eliminar el archivo de metadatos .stream

# Portapapeles
agent-browser clipboard read                      # Leer texto del portapapeles
agent-browser clipboard write "¡Hola, Mundo!"     # Escribir texto en el portapapeles
agent-browser clipboard copy                      # Copiar selección actual
agent-browser clipboard paste                     # Pegar desde el portapapeles

# Diálogos (alert, confirm, prompt, beforeunload)
# De forma predeterminada, los diálogos alert y beforeunload se aceptan automáticamente para que nunca bloqueen al agente.
# Los diálogos confirm y prompt aún requieren manejo explícito.
# Usa --no-auto-dialog para deshabilitar el manejo automático.
agent-browser dialog accept              # Aceptar diálogo
agent-browser dialog accept "mi entrada" # Aceptar diálogo prompt con texto
agent-browser dialog dismiss             # Descartar/cancelar diálogo
agent-browser dialog status              # Verificar si hay un diálogo abierto actualmente

# Diff (comparar estados de página)
agent-browser diff snapshot                          # Comparar instantánea actual vs última
agent-browser diff snapshot --baseline before.txt    # Comparar instantánea actual vs archivo guardado
agent-browser diff screenshot --baseline before.png  # Diferencia visual de píxeles
agent-browser diff url <url1> <url2>                 # Comparar dos páginas
agent-browser diff url <url1> <url2> --wait-until networkidle  # Estrategia de espera personalizada
agent-browser diff url <url1> <url2> --selector "#main"  # Abarcar a elemento

Transmisión

Cada sesión inicia automáticamente un servidor de transmisión WebSocket en un puerto asignado por el SO. Usa agent-browser stream status para ver el puerto vinculado y el estado de la conexión. Usa stream disable para cerrarlo, y stream enable --port <puerto> para re-habilitarlo en un puerto específico.

Ejecución por Lotes

Ejecuta múltiples comandos en una sola invocación canalizando un arreglo JSON de arreglos de cadenas a batch. Esto evita la sobrecarga de inicio de proceso por comando al ejecutar flujos de trabajo de varios pasos.

echo '[
  ["open", "https://example.com"],
  ["snapshot", "-i"],
  ["click", "@e1"],
  ["screenshot", "result.png"]
]' | agent-browser batch --json

# Detenerse en el primer error
agent-browser batch --bail < commands.json

Usa batch cuando tengas una secuencia conocida de comandos que no dependan de la salida intermedia. Usa comandos separados o encadenamiento con && cuando necesites analizar la salida entre pasos (p. ej., instantánea para descubrir referencias, luego interactuar).

Patrones Comunes

Envío de Formularios

agent-browser open https://example.com/signup
agent-browser snapshot -i
agent-browser fill @e1 "Jane Doe"
agent-browser fill @e2 "[email protected]"
agent-browser select @e3 "California"
agent-browser check @e4
agent-browser click @e5
agent-browser wait --load networkidle

Autenticación con Bóveda de Autenticación (Recomendado)

# Guardar credenciales una vez (cifradas con AGENT_BROWSER_ENCRYPTION_KEY)
# Recomendado: canalizar contraseña por stdin para evitar exposición en el historial del shell
echo "pass" | agent-browser auth save github --url https://github.com/login --username user --password-stdin

# Iniciar sesión usando perfil guardado (el LLM nunca ve la contraseña)
agent-browser auth login github

# Listar/mostrar/eliminar perfiles
agent-browser auth list
agent-browser auth show github
agent-browser auth delete github

auth login espera los selectores de nombre de usuario/contraseña/enviar antes de interactuar, con un tiempo de espera vinculado al tiempo de espera de acción predeterminado.

Autenticación con Persistencia de Estado

# Iniciar sesión una vez y guardar estado
agent-browser open https://app.example.com/login
agent-browser snapshot -i
agent-browser fill @e1 "$USERNAME"
agent-browser fill @e2 "$PASSWORD"
agent-browser click @e3
agent-browser wait --url "**/dashboard"
agent-browser state save auth.json

# Reutilizar en sesiones futuras
agent-browser state load auth.json
agent-browser open https://app.example.com/dashboard

Persistencia de Sesión

# Guardar/restaurar automáticamente cookies y localStorage entre reinicios del navegador
agent-browser --session-name myapp open https://app.example.com/login
# ... flujo de inicio de sesión ...
agent-browser close  # Estado guardado automáticamente en ~/.agent-browser/sessions/

# La próxima vez, el estado se carga automáticamente
agent-browser --session-name myapp open https://app.example.com/dashboard

# Cifrar estado en reposo
export AGENT_BROWSER_ENCRYPTION_KEY=$(openssl rand -hex 32)
agent-browser --session-name secure open https://app.example.com

# Gestionar estados guardados
agent-browser state list
agent-browser state show myapp-default.json
agent-browser state clear myapp
agent-browser state clean --older-than 7

Trabajar con Iframes

El contenido de los iframes se incluye automáticamente en las instantáneas. Las referencias dentro de los iframes llevan contexto de marco, por lo que puedes interactuar con ellas directamente.

agent-browser open https://example.com/checkout
agent-browser snapshot -i
# @e1 [heading] "Checkout"
# @e2 [Iframe] "payment-frame"
#   @e3 [input] "Número de tarjeta"
#   @e4 [input] "Vencimiento"
#   @e5 [button] "Pagar"

# Interactuar directamente — no se necesita cambio de marco
agent-browser fill @e3 "4111111111111111"
agent-browser fill @e4 "12/28"
agent-browser click @e5

# Para abarcar una instantánea a un iframe:
agent-browser frame @e2
agent-browser snapshot -i         # Solo contenido del iframe
agent-browser frame main          # Volver al marco principal

Extracción de Datos

agent-browser open https://example.com/products
agent-browser snapshot -i
agent-browser get text @e5           # Obtener texto de elemento específico
agent-browser get text body > page.txt  # Obtener todo el texto de la página

# Salida JSON para análisis
agent-browser snapshot -i --json
agent-browser get text @e1 --json

Sesiones Paralelas

agent-browser --session site1 open https://site-a.com
agent-browser --session site2 open https://site-b.com

agent-browser --session site1 snapshot -i
agent-browser --session site2 snapshot -i

agent-browser session list

Conectar a Chrome Existente

# Auto-descubrir Chrome en ejecución con depuración remota habilitada
agent-browser --auto-connect open https://example.com
agent-browser --auto-connect snapshot

# O con puerto CDP explícito
agent-browser --cdp 9222 snapshot

Auto-conectar descubre Chrome a través de DevToolsActivePort, puertos de depuración comunes (9222, 9229) y recurre a una conexión WebSocket directa si falla el descubrimiento CDP basado en HTTP.

Esquema de Color

... (truncado para traducción)

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community