Créer des sites Web adaptés aux agents

Kasper Kulikowski

Omkar More

Votre site Web a un nouveau type de visiteur. Certains utilisateurs humains passent de la navigation manuelle à la délégation de parcours axés sur des objectifs à des agents d'IA. Ces systèmes autonomes peuvent interpréter des entrées, planifier et exécuter des actions au nom d'un utilisateur.

Toutefois, nombre de nos sites Web sont conçus pour être esthétiques pour les humains, avec des états de survol complexes, des mises en page changeantes et des mouvements fluides. Cette fonctionnalité ne fonctionne pas pour les agents.

Comment les agents voient votre site

Les agents ne consultent pas votre site Web sur un écran. Ils fonctionnent sur une représentation de votre site lisible par machine. La qualité de cette représentation détermine leurs performances.

Les agents peuvent consulter votre site Web de trois manières principales : à l'aide de captures d'écran, du code HTML brut et de l'arborescence d'accessibilité.

Captures d'écran

L'agent prend un instantané de la page affichée et utilise un modèle de vision pour identifier les éléments. D'après la capture d'écran, l'agent peut reconnaître qu'une barre de recherche en haut à droite est une recherche globale, tandis qu'une zone au milieu est probablement un champ de formulaire. Les repères visuels peuvent être utiles, car les agents peuvent utiliser la couleur, la taille et la proximité pour déterminer l'importance. Un gros bouton Supprimer sera probablement interprété avec plus de prudence qu'un petit lien "Aide". Toutefois, l'analyse des captures d'écran peut être lente et coûteuse (en termes de jetons utilisés). Il est donc préférable de l'utiliser en dernier recours lorsque la structure est confuse.

HTML

L'agent analyse le DOM et lit le code HTML. Il comprend l'imbrication des éléments, la hiérarchie logique de l'arborescence DOM, les attributs tels que les ID et les classes qui définissent la structure, ainsi que les chaînes de données brutes qui forment l'épine dorsale informationnelle du site. Cela aide l'agent à comprendre la relation entre les éléments.

Si un bouton Acheter maintenant se trouve dans un conteneur de produit, l'agent suppose que ce bouton appartient à ce produit spécifique.

Arborescence d'accessibilité

L'arbre d'accessibilité est une API native du navigateur qui réduit le DOM à ce qui est le plus important : les rôles, les noms et les états des éléments interactifs. Il s'agit du résumé sémantique de la page, utilisé par les technologies d'assistance. Pour un agent d'IA, il fonctionne comme une carte haute fidélité qui ignore le "bruit" visuel du CSS pour se concentrer sur l'utilité pure. En interprétant cet arbre, un agent peut apprendre l'intention fonctionnelle de chaque bouton bascule, curseur et champ de saisie.

Outils WebMCP

WebMCP est une norme Web proposée pour combler le fossé entre les sites Web et les agents, afin de partager des objectifs et des tâches explicites avec les agents. Pour ce faire, définissez des outils, qui sont des annotations JavaScript ou HTML. Les agents interprètent ces outils plus rapidement et plus précisément qu'avec l'actionnement standard.

Les outils WebMCP peuvent être utilisés pour le service client, l'e-commerce, la découverte et plus encore. Certaines actions sont sensibles, comme les achats. Vous pouvez inclure une commande pour demander à l'utilisateur d'interagir avec une boîte de dialogue de confirmation.

Découvrez les cas d'utilisation de WebMCP et comment créer des outils efficaces.

Modalités combinées

Se baser sur une seule entrée crée un écart sémantique. Par exemple, dans le DOM, un agent peut voir un <div> sans savoir que vous l'avez configuré comme un bouton fonctionnel avec CSS et JavaScript. Avec les captures d'écran, il est possible qu'un agent identifie l'emplacement de ce bouton sur l'écran, mais il ne connaît toujours pas la destination prévue du bouton ni l'action qu'il est conçu pour déclencher.

Les agents modernes combinent donc plusieurs modalités. Ils utilisent le DOM et l'arborescence d'accessibilité pour obtenir une liste propre et structurée d'éléments interactifs, puis la croisent avec un rendu visuel pour comprendre la mise en page, le regroupement et les repères visuels.

Notre rôle est de fournir des signaux propres sur tous ces canaux.

Créer des sites Web adaptés aux agents

Pour aider les agents à parcourir votre site Web, toutes les actions qu'un humain ou un agent doivent effectuer doivent être clairement indiquées dans l'interface du site. Voici quelques bonnes pratiques :

• Évitez les éléments fantômes. Évitez les calques transparents qui masquent les éléments interactifs. L'analyse visuelle effectuée par l'agent peut ignorer les nœuds couverts, même s'ils semblent transparents.
• Utilisez un balisage HTML sémantique. Concevez des éléments interactifs avec le HTML sémantique. Par exemple, utilisez les balises <button> et <a> sur les éléments <div> et <span> modifiés. Les agents reconnaissent les premiers comme des éléments interactifs.
  • Si vous ne pouvez pas utiliser le HTML sémantique, fournissez toujours les attributs role et tabindex appropriés à l'élément. Par exemple, <div role="button">.
  • Ajoutez l'attribut for aux balises <label> pour les associer aux entrées. Cela aide l'agent d'IA à comprendre l'objectif d'un champ en indiquant le texte du libellé directement associé à la chaîne d'action.
• Utilisez le code CSS pour les repères visuels. Définissez cursor: pointer dans le CSS, ce qui constitue un signal fort d'actionnabilité.
• Respectez la taille minimale requise pour l'analyse visuelle. Assurez-vous que tous les éléments interactifs nécessaires pour effectuer une action sont visibles et plus grands que 8 pixels carrés, afin d'éviter qu'ils ne soient filtrés lors de l'analyse visuelle du modèle.
• Assurez-vous que la mise en page est stable. Les agents qui prennent des captures d'écran seront probablement déroutés si la mise en page de votre site Web change constamment. Par exemple, si le bouton Ajouter au panier sur la page produit se trouve à un emplacement différent pour chaque catégorie de produits.
• Créez des outils WebMCP pour définir des tâches et des actions explicites pour les agents compatibles avec l'API.

Étapes suivantes

Tout ce que nous suggérons pour rendre un site "adapté aux agents" le rend également plus adapté aux humains.

Rendre les sites Web compatibles avec les agents d'IA est une incitation à réaffirmer les principes fondamentaux de la création de sites Web bien structurés, accessibles et sémantiques.

• Auditez votre arbre d'accessibilité : utilisez les outils existants pour vous assurer que la hiérarchie de votre site est lisible par machine et stable.
• En savoir plus sur WebMCP, une proposition de norme Web visant à aider les sites Web à interagir avec les agents Les API sont disponibles pour des tests en production dans Chrome, avec un essai Origin Trial.