Crea sitios web aptos para agentes

Kasper Kulikowski

Omkar More

Tu sitio web tiene un nuevo tipo de visitante. Algunos usuarios humanos están pasando de la navegación manual a delegar viajes orientados a objetivos en agentes de IA. Esos sistemas autónomos pueden interpretar entradas, planificar y ejecutar acciones en nombre de un usuario.

Sin embargo, muchos de nuestros sitios web están diseñados para ser atractivos para los humanos, con estados de desplazamiento complejos, diseños cambiantes y movimiento fluido. Esta función no funciona para los agentes.

Cómo ven los agentes tu sitio

Los agentes no miran tu sitio web en un monitor. Operan en una representación legible por máquina de tu sitio. La calidad de esta representación determina su rendimiento.

Los agentes pueden ver tu sitio web de 3 maneras principales: capturas de pantalla, HTML sin procesar y el árbol de accesibilidad.

Capturas de pantalla

El agente toma una instantánea de la página renderizada y usa un modelo de visión para identificar elementos. Según la captura de pantalla, el agente puede reconocer que una barra de búsqueda en la parte superior derecha es una búsqueda global, mientras que un cuadro en el medio probablemente sea un campo de formulario. Las pistas visuales pueden ser útiles, ya que los agentes pueden usar el color, el tamaño y la proximidad para determinar la importancia. Es probable que un botón grande de Borrar se interprete con más precaución que un vínculo pequeño de "Ayuda". Sin embargo, analizar capturas de pantalla puede ser lento y costoso (en términos de tokens utilizados), por lo que es mejor usarlo como respaldo cuando la estructura es confusa.

HTML

El agente analiza el DOM y lee el código HTML. Comprende cómo se anidan los elementos, la jerarquía lógica del árbol del DOM, los atributos como los IDs y las clases que definen la estructura, y las cadenas de datos sin procesar que forman la columna vertebral informativa del sitio. Esto ayuda al agente a comprender la relación entre los elementos.

Si hay un botón de Comprar ahora dentro de un contenedor de productos, el agente supone que el botón pertenece a ese producto específico.

Árbol de accesibilidad

El árbol de accesibilidad es una API nativa del navegador que destila el DOM en lo más importante: roles, nombres y estados de los elementos interactivos. Es el resumen semántico de la página, que usa la tecnología de accesibilidad. Para un agente de IA, funciona como un mapa de alta fidelidad que ignora el "ruido" visual de CSS para enfocarse en la utilidad pura. Al interpretar este árbol, un agente puede aprender la intención funcional de cada botón de activación, control deslizante y campo de entrada.

Herramientas de WebMCP

WebMCP es un estándar web propuesto para cerrar la brecha entre los sitios web y los agentes, y compartir con los agentes el propósito y las tareas explícitos. Para ello, se definen herramientas, que son anotaciones de JavaScript o HTML. Los agentes interpretan estas herramientas más rápido y con mayor precisión que con la activación estándar.

Las herramientas de WebMCP se pueden usar para la asistencia al cliente, el comercio electrónico, el descubrimiento y mucho más. Algunas acciones son sensibles, como realizar una compra. Puedes incluir un comando para solicitar la interacción del usuario con un diálogo de confirmación.

Descubre los casos de uso de WebMCP y cómo crear herramientas eficaces.

Modalidades combinadas

Depender de una sola entrada crea una brecha semántica. Por ejemplo, en el DOM, un agente podría ver un <div> sin saber que, en realidad, lo configuraste como un botón funcional con CSS y JavaScript. Con las capturas de pantalla, es posible que un agente identifique dónde se encuentra ese botón en la pantalla, pero aún no conoce el destino o la acción previstos del botón que está diseñado para activar.

Por lo tanto, los agentes modernos combinan varias modalidades. Usan el DOM y el árbol de accesibilidad para obtener una lista limpia y estructurada de los elementos interactivos, y, luego, comparan datos mediante referencia cruzada con una renderización visual para comprender el diseño, la agrupación y las indicaciones visuales.

Nuestro trabajo es proporcionar indicadores limpios en todos estos canales.

Crea sitios web compatibles con agentes

Para ayudar a los agentes a navegar por tu sitio web, todas las acciones que debe realizar un humano o un agente deben reflejarse claramente en la interfaz del sitio. Estas son algunas prácticas recomendadas:

• Evita los elementos fantasma. Evita las superposiciones transparentes que ocultan elementos interactivos. El análisis visual que realiza el agente puede descartar los nodos que están cubiertos, incluso si el nodo parece transparente.
• Usa código HTML semántico. Diseña elementos prácticos con HTML semántico. Por ejemplo, usa las etiquetas <button> y <a> sobre los elementos <div> y <span> modificados. Los agentes reconocen los primeros como elementos interactivos.
  • Si no puedes usar HTML semántico, siempre proporciona al elemento los atributos role y tabindex adecuados. Por ejemplo, <div role="button">.
  • Agrega el atributo for en las etiquetas <label> para vincularlas a las entradas. Esto ayuda al agente de IA a comprender el propósito de un campo, ya que indica el texto de la etiqueta que se adjunta directamente a la cadena de acción.
• Usa CSS para las señales visuales. Establece cursor: pointer en CSS, lo que es un indicador sólido de la capacidad de acción.
• Cumple con el tamaño mínimo para el análisis visual. Asegúrate de que todos los elementos interactivos necesarios para completar una acción sean visibles y tengan un tamaño superior a 8 píxeles cuadrados para evitar que se filtren en el análisis visual del modelo.
• Garantiza un diseño estable. Es probable que los agentes que toman capturas de pantalla se confundan si el diseño de tu sitio web cambia constantemente, por ejemplo, cuando un botón de Agregar al carrito en la página de productos se encuentra en una ubicación diferente para cada categoría de producto.
• Crea herramientas de WebMCP para definir tareas y acciones explícitas para los agentes que admiten la API.

Próximos pasos

Todo lo que sugerimos para que un sitio esté "listo para el agente" también lo hace mejor para los humanos.

Hacer que los sitios web sean compatibles con los agentes de IA es un incentivo para reafirmar sus principios fundamentales de crear sitios web bien estructurados, accesibles y semánticos.

• Audita tu árbol de accesibilidad: Usa las herramientas existentes para asegurarte de que la jerarquía de tu sitio sea estable y legible por máquinas.
• Obtén información sobre WebMCP, un estándar web propuesto para ayudar a los sitios web a interactuar con los agentes. Las APIs están disponibles para experimentar en producción en Chrome, con una prueba de origen.