Snapshot

Snapshot es la forma en que un agente de IA lee una página web. Toma la página actual, la convierte en un texto estructurado compacto y asigna números temporales (@1, @2, …) a los elementos accionables: botones, campos y enlaces. El agente decide el siguiente paso a partir de ese Snapshot, en lugar de leer el HTML crudo o adivinar coordenadas de pantalla.

Qué resuelve

Para una persona, una página web es una interfaz visual. Para un agente de IA, son decenas de miles de tokens de HTML, scripts, estilos y estado dinámico. Pasarlos sin procesar a un LLM tiene dos costos habituales:

• Alto costo de tokens. Una página de admin habitual puede pesar 30k tokens, y hay que releerla antes de cada acción.
• Demasiado ruido. La mayor parte del DOM (estilos, scripts, nodos ocultos) no tiene relación con la decisión y solo entorpece.

El Snapshot se construye a partir del árbol de accesibilidad del navegador —la vista semántica que el navegador mantiene para los lectores de pantalla— y comprime la página a unos pocos cientos de tokens:

• Título de la página y URL actual.
• Texto visible y estructura principal.
• Elementos que se pueden clicar, llenar o seleccionar, con sus roles y nombres.
• Un @N temporal por cada elemento interactivo.

Es suficiente para que el agente de IA decida qué botón presionar y qué campo llenar, sin HTML sin procesar ni coordenadas de pantalla.

Cómo funcionan las refs @N

Cada elemento interactivo del Snapshot recibe un número temporal:

@1 [input]  "Buscar"
@2 [button] "Enviar"
@3 [link]   "Siguiente página"

El agente de IA actúa sobre esos números; por ejemplo, await click('@2').

@N solo es válido para el Snapshot actual. Cuando la página cambia —por una navegación, una actualización, un cuadro de diálogo, el envío de un formulario, un cambio de pestaña o un renderizado dinámico—, los números anteriores pueden dejar de apuntar al elemento correcto. La práctica segura consiste en crear otro Snapshot después de cada cambio en lugar de conservar un @N.

Si necesitas una referencia estable a un elemento a lo largo de varios pasos, usa el selector loc=... que el snapshot devuelve, o escribe un selector CSS directamente. Ver ego-browser.

Cuándo vas a notar el snapshot

La mayor parte del tiempo no interactúas con él: el agente de IA lo lee por sí solo. Puede aparecer en dos momentos:

1. El agente de IA indica que creará un «nuevo Snapshot» o un «Snapshot de la página»: detectó un cambio y va a leer de nuevo el estado actual.
2. El resultado de la tarea incluye un fragmento del Snapshot como evidencia.

Describir la tarea al agente

El snapshot ayuda al agente a ver la página; los límites de la tarea los pones tú. Una buena descripción incluye:

• La página o sitio objetivo.
• Qué leer, llenar, clicar o descargar.
• Qué no debe hacer (eliminar, publicar, pagar, mandar correo, etc.).
• Si debe detenerse ante captcha, pago o autorización.
• La forma del resultado esperado (tabla, resumen, captura, ruta local).

Ejemplos:

Abre mis notificaciones de GitHub y enumera los PR que necesitan mi revisión, con el nombre del repositorio, el título y el enlace.
No archives nada ni marques ninguna notificación como leída.

Abre el panel de pedidos, filtra los pedidos de ayer y descarga el archivo CSV.
Si aparece una verificación de inicio de sesión o una confirmación de exportación, detente e indícame dónde se guardó el archivo.

Revisar lo que hizo el agente

Cuando termina la tarea, conviene revisar con estos indicios:

• ¿Indicó qué páginas visitó y qué acciones clave hizo?
• ¿El resultado trae datos que puedas verificar (títulos, IDs, enlaces, montos, fechas)?
• En descargas, ¿te dio la ruta local del archivo?
• En tareas que modifican o envían, ¿se detuvo antes de la confirmación final?
• ¿La página sigue abierta en el Space para que la revises?

Si algo no cuadra, pide un snapshot nuevo de la página actual antes de seguir suponiendo desde la respuesta previa.

Preguntas frecuentes

¿Por qué dice el agente que una ref ya no vale?

La página cambió después del snapshot anterior. Pídele que tome uno nuevo.

¿El Snapshot puede leer todo el contenido?

No siempre. Es posible que el contenido fuera de la pantalla, el texto dentro de imágenes, los elementos canvas complejos o los iframes de origen cruzado con restricciones no aparezcan por completo. En esos casos, el agente de IA suele combinar Snapshots con capturas de pantalla, extracción de texto o confirmación manual.

¿El Snapshot modifica datos?

No. El Snapshot solo lee la estructura de la página. Lo que realmente cambia el estado son los clics, la introducción de datos, los envíos, las cargas y las eliminaciones posteriores.

¿Necesito recordar @1, @2?

No. Trátalos como "números temporales para la página actual". Quien los usa es el agente; tu parte es dejar claro el objetivo y los límites.