Snapshot

Snapshot es la forma en que un agente de IA lee una página web. Convierte la página actual en texto estructurado compacto y asigna números temporales (@1, @2, etc.) a los elementos procesables: botones, entradas y enlaces. El agente decide qué hacer a continuación a partir de ese Snapshot, en lugar de leer el HTML sin formato o adivinar las coordenadas de la 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. Introducir todo eso directamente en un LLM tiene dos costes recurrentes:

• Alto coste en tokens. Una página de administración típica puede alcanzar los 30.000 tokens y hay que volver a leerla antes de cada acción.
• Demasiado ruido. La mayor parte de un DOM completo —estilos, scripts y nodos ocultos— no tiene nada que ver con la decisión y solo estorba.

El Snapshot se crea 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 en unos cientos de tokens:

• Título de la página y URL actual.
• Texto visible y la estructura principal.
• Elementos en los que se puede hacer clic, completar y seleccionar, con sus funciones y nombres.
• Un @N temporal para cada elemento interactivo.

Eso es suficiente para que el agente de IA decida en qué botón hacer clic y qué campo completar, sin HTML sin procesar ni coordenadas de pantalla.

Cómo funcionan las referencias @N

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

@1 [input]  "Buscar"
@2 [button] "Enviar"
@3 [link]   "Página siguiente"

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 fiable consiste en crear un Snapshot después de cada cambio en lugar de conservar un @N.

Si necesitas una referencia estable a un elemento durante varios pasos, usa el selector loc=... del Snapshot o escribe directamente un selector CSS. Consulta ego-browser.

Cuándo notarás el Snapshot

En la mayoría de los casos no interactúas con el Snapshot: el agente de IA lo lee por sí solo. Puede aparecer en dos lugares:

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

Escribir una tarea para el agente

Un Snapshot ayuda al agente a ver la página con claridad, pero los límites de la tarea los estableces tú. Una buena descripción le indica al agente:

• La página o sitio de destino.
• Qué leer, completar, hacer clic o descargar.
• Qué no debe hacer (eliminar, publicar, pagar, enviar correo, etc.).
• Ya sea para pausar en las pantallas de captcha, pago o autorización.
• El formato del resultado que quieres (tabla, resumen, captura de pantalla o ruta del archivo 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 la URL.
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.
Detente si aparece una verificación de inicio de sesión o una confirmación de exportación, e indícame dónde se ha guardado el archivo.

Revisando lo que hizo el agente

Cuando finaliza la tarea, estas son las señales a comprobar:

• ¿El agente indicó qué páginas visitó y las acciones clave que tomó?
• ¿El resultado incluye elementos que puedes verificar, como títulos, ID, URL, importes o marcas de tiempo?
• Para una descarga, ¿te dio la ruta del archivo local?
• Para cualquier cosa que modifique o envíe, ¿se detuvo para confirmar antes del paso final?
• ¿Las páginas relevantes todavía están abiertas en Space para que puedas mirar?

Si algo parece extraño, pídele al agente que genere un nuevo Snapshot de la página actual en lugar de seguir extrapolando a partir de su respuesta anterior.

Preguntas comunes

¿Por qué el agente dice que una referencia no es válida?

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

¿Puede un Snapshot leerlo todo?

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

¿Crear un Snapshot cambia algo en la página?

No. Un Snapshot solo lee la estructura de la página. Los clics, la introducción de datos, los envíos, las cargas y las eliminaciones posteriores son las acciones que modifican el estado.

¿Necesito recordar @1 o @2?

No. Trátelos como números temporales para la página actual. El agente los utiliza; tú estableces la meta y los límites.