Agentation

Qu’est-ce qu’Agentation ?

Agentation est un outil de feedback visuel qui vous permet d’annoter directement des éléments dans une interface utilisateur, puis de partager ce feedback avec des agents IA pour qu’ils identifient précisément la cible dans votre codebase. Son objectif principal est de transformer un feedback du type « pointez ici » en instructions structurées et actionnables par machine, sur lesquelles les agents peuvent agir.

Il fonctionne particulièrement bien avec les outils de codage IA qui accèdent à vos fichiers de projet, où la sortie d’Agentation peut inclure des sélecteurs, des chemins de fichiers et des informations de structure pour aider un agent à naviguer vers les bonnes lignes et composants.

Fonctionnalités clés

• Annotations visuelles sur page : Activez une barre d’outils et cliquez ou sélectionnez des éléments pour créer une annotation liée à une cible précise à l’écran.
• Ciblage d’éléments pour agents : Agentation peut générer un chemin d’élément, des sélecteurs CSS et des détails de localisation de fichier pour qu’un agent n’ait pas à deviner quel élément d’UI vous visez.
• Contexte codebase pour de meilleures corrections : Quand l’agent a accès au codebase (par ex., via des outils comme Claude Code ou Cursor), il peut utiliser les sélecteurs pour grep, les chemins de fichiers sources pour sauter à la bonne ligne, l’arbre des composants React pour comprendre la hiérarchie, et les styles calculés pour déduire l’apparence actuelle de l’élément.
• Sortie markdown formatée : Après avoir ajouté du feedback, les utilisateurs peuvent cliquer pour copier du markdown formaté et le coller dans l’entrée d’un agent.
• Support d’intégration MCP : Avec MCP, vous pouvez éviter le copier-coller car votre agent voit déjà le contexte d’annotation ; les agents peuvent être incités avec des instructions comme « adressez mon feedback » ou « corrigez l’annotation 3 ».
• Contrôles du cycle de vie des annotations : Les agents peuvent interroger les feedbacks existants (par ex., lister toutes les annotations sur les pages) et répondre à des actions comme ignorer ou résoudre des éléments (par ex., « effacez toutes les annotations »).

Comment utiliser Agentation

1. Activez la barre d’outils d’annotation : La barre d’outils est disponible dans l’interface Agentation (le contenu de la page note que la barre est active sur la page démo).
2. Survolez pour identifier les éléments : Survolez les éléments pour voir leurs noms mis en évidence.
3. Créez une annotation : Cliquez sur un élément cible ou sélectionnez du texte (par exemple, sur les éléments démo fournis) pour créer une nouvelle annotation, puis saisissez votre feedback.
4. Soumettez et partagez le feedback : Ajoutez l’annotation et cliquez pour copier la sortie markdown formatée à coller dans votre agent.
5. Utilisez MCP en option : Si votre agent est connecté via MCP, vous pouvez éviter le copier-coller manuel et demander à l’agent d’adresser ou corriger des annotations spécifiques.

Cas d’usage

• Rapports de bugs pour un élément d’UI spécifique : Quand vous voyez un état de bouton « incorrect » ou un style défaillant, survolez pour identifier l’élément, annotez-le avec ce que vous attendiez vs. ce que vous voyez, et partagez les sélecteurs/info de chemin pour qu’un agent localise le code pertinent.
• Feedback sur typographie et espacement : Pour des problèmes comme le padding et la taille, annotez la zone exacte du composant et demandez à l’agent de choisir entre alternatives (par ex., « 24px ou 16px ») dans le cadre de la résolution du feedback.
• Correction de texte/contenu : Si une étiquette ou un copy a une faute, sélectionnez le texte exact et ajoutez un feedback concis (par ex., « Texte du bouton peu clair » ou « contenu devrait dire X ») pour que l’agent cible la chaîne d’UI spécifique.
• Feedback spécifique à une frame d’animation : Mettez en pause une animation (via la barre d’outils) à la frame qui vous intéresse, annotez cet état visuel précis, et fournissez un feedback lié au contexte en pause.
• Coordination de feedback équipe ou multi-pages : Demandez aux agents de lister toutes les annotations visibles sur les pages, de les résoudre une par une, et d’effacer tout à la fin de la revue.

FAQ

Comment Agentation aide-t-il un agent à trouver la bonne partie de mon app ?
La sortie d’Agentation peut inclure des sélecteurs CSS, des chemins de fichiers source, la hiérarchie des composants React et les styles calculés, afin qu’un agent puisse faire un grep, naviguer vers la ligne correcte et comprendre où et comment l’élément s’intègre.

Dois-je copier-coller le feedback dans l’agent ?
Pas toujours. La page note qu’avec l’intégration MCP, vous pouvez éviter le copier-coller car l’agent voit déjà le contexte d’annotation.

Quel type de feedback dois-je écrire dans les annotations ?
La page recommande d’être spécifique (par ex., décrire clairement le problème), de traiter un problème par annotation, et d’inclure un contexte sur ce que vous attendiez versus ce que vous voyez.

Les agents peuvent-ils poser des questions ou répondre aux annotations ?
Oui. Avec l’intégration MCP et un schéma de format d’annotation, la page décrit les interactions des agents telles que lister les annotations, demander des clarifications, résoudre avec un résumé, et ignorer les annotations.

Quel est le modèle de licence d’Agentation ?
Agentation est gratuit pour les individus et les entreprises pour un usage interne. Pour redistribuer Agentation dans un produit que vous vendez, la page conseille de les contacter pour une licence commerciale.

Alternatives

• Outils interactifs de capture d’écran/marquage d’UI (avec workflows de revue humaine) : Les outils qui capturent et marquent l’UI pour revue peuvent aussi supporter le partage de feedback, mais ils ne génèrent généralement pas de sélecteurs structurés/chemins de fichiers pour les agents sensibles au code.
• Modèles d’issues basés sur du texte dans un tracker (par ex., tickets de bugs) : Les trackers de bugs aident à documenter le comportement attendu vs. réel, mais ils reposent sur une description plutôt que de pointer les agents vers un chemin d’élément UI spécifique dans le code.
• Outils de navigation de code compatibles avec les agents sans annotation visuelle : Les assistants de codage qui comprennent votre dépôt peuvent agir sur le feedback, mais sans couche d’annotation, vous devrez généralement décrire la cible de manière plus indirecte (par ex., en nommant manuellement les composants).