AGENTATION : Annotez vos interfaces et envoyez les corrections à votre agent

https://agentation.dev

https://github.com/benjitaylor/agentation

📌 Agentation est un outil qui facilite la communication entre vous et les agents IA (Claude, Cursor, etc.) .Il transforme les annotations d’interface utilisateur en un contexte structuré compréhensible par les agents IA. Il permet de pointer directement sur un élément de l’interface, d’ajouter une annotation et de coller le résultat dans des outils d’IA comme Claude Code, Cursor ou tout autre outil similaire.

Avec la version 2.0, Agentation introduit la synchronisation en temps réel des agents, une fonctionnalité qui simplifie encore plus la gestion des retours. Voici quelques points clés :

• ⚡ Synchronisation en temps réel des agents : Point sur les bugs et laissez l’IA les résoudre automatiquement.
• 🖱️ Facilité d’utilisation : Cliquez sur n’importe quel élément, ajoutez un commentaire et copiez le code dans l’outil de votre choix.
• 📄 Intégration avec des outils IA : Utilisez Agentation avec des outils comme Claude Code ou Cursor, qui peuvent directement interpréter vos annotations.
• 🔄 MCP et annotation automatique : L’intégration avec MCP permet aux agents de répondre directement à vos annotations. Vous pouvez poser des questions comme « quelle taille pour ce bouton ? » ou demander une modification en temps réel.

Comment ça fonctionne ?

1. Vous installez une extension dans votre navigateur
2. Vous cliquez sur des éléments d’interface (boutons, textes, formulaires)
3. Vous ajoutez des annotations (notes/feedback) sur ces éléments
4. L’outil extrait les informations techniques (sélecteurs CSS, noms de composants React, styles calculés)
5. Vous copiez-collez le résultat à un agent IA qui peut alors localiser précisément les éléments et les modifier

Cas d’usage pratiques : Au lieu de dire à Claude « change la couleur du bouton bleu dans la barre latérale » (imprécis), vous lui donnez « .sidebar > button.primary » avec votre feedback, et il trouve exactement ce qu’il faut modifier.

Conseils pratiques

• Soyez précis : « Le texte du bouton est flou » est mieux que « Corrigez ça ».
• Traitez un seul problème par annotation pour simplifier l’interprétation.
• Incluez du contexte : mentionnez ce que vous attendiez par rapport à ce que vous voyez.
• Utilisez la sélection de texte pour signaler des erreurs spécifiques.
• Mettez en pause les animations pour annoter une frame particulière.

Licences et intégration

• 🎉 Agentation est gratuit pour une utilisation individuelle et interne.
• 💼 Contactez-nous pour une licence commerciale si vous souhaitez l’intégrer dans un produit que vous vendez.

Vous devez payer une licence commerciale uniquement si vous redistributuez Agentation comme part d’un produit que vous vendez.