Agentation

Was ist Agentation?

Agentation ist ein visuelles Feedback-Tool, mit dem Sie Elemente direkt in einer UI annotieren und dieses Feedback mit KI-Agenten teilen können, damit diese das exakte Ziel in Ihrem Codebase identifizieren. Sein Kernzweck ist es, „hier drauf zeigen“-Feedback in strukturierte, maschinenhandhabbare Anweisungen umzuwandeln, auf die Agenten reagieren können.

Es funktioniert besonders gut mit KI-Coding-Tools, die auf Ihre Projektdateien zugreifen können. Hier kann Agentations Ausgabe Selektoren, Dateipfade und Strukturinformationen enthalten, um Agenten beim Navigieren zu den richtigen Zeilen und Komponenten zu helfen.

Wichtige Funktionen

• Visuelle Annotationen auf der Seite: Aktivieren Sie die Toolbar und klicken oder wählen Sie Elemente aus, um eine Annotation zu einem spezifischen Bildschirmziel zu erstellen.
• Element-Zielerfassung für Agenten: Agentation erzeugt Elementpfade, CSS-Selektoren und Dateilokationsdetails, damit Agenten nicht raten müssen, welches UI-Element gemeint ist.
• Codebase-Kontext für bessere Fixes: Wenn der Agent Codebase-Zugriff hat (z. B. über Tools wie Claude Code oder Cursor), kann er Selektoren zum Greppen nutzen, Dateipfade zum Springen zur richtigen Zeile, einen React-Komponentenbaum zur Hierarchie-Verständnis und berechnete Styles, um das aktuelle Erscheinungsbild des Elements zu erschließen.
• Formatierter Markdown-Ausgabe: Nach dem Hinzufügen von Feedback klicken Nutzer, um formatierten Markdown zu kopieren und in die Eingabe eines Agenten einzufügen.
• MCP-Integrationsunterstützung: Mit MCP entfällt Copy-Paste, da der Agent den Annotation-Kontext bereits sieht; Agenten können mit Anweisungen wie „mein Feedback bearbeiten“ oder „Annotation 3 fixen“ aufgefordert werden.
• Annotation-Lebenszyklus-Steuerung: Agenten können bestehendes Feedback abfragen (z. B. alle Annotationen über Seiten auflisten) und auf Aktionen wie Verwerfen oder Auflösen reagieren (z. B. „alle Annotationen löschen“).

So verwenden Sie Agentation

1. Annotation-Toolbar aktivieren: Die Toolbar ist in der Agentation-Oberfläche verfügbar (die Seiteninhalte weisen darauf hin, dass sie auf der Demo-Seite aktiv ist).
2. Über Elementen schweben zur Identifikation: Schweben Sie über Elemente, um ihre Namen hervorgehoben zu sehen.
3. Annotation erstellen: Klicken Sie auf ein Ziel-Element oder wählen Sie Text aus (z. B. auf den bereitgestellten Demo-Elementen), um eine neue Annotation zu erstellen, und geben Sie Ihr Feedback ein.
4. Feedback absenden und teilen: Fügen Sie die Annotation hinzu und klicken Sie, um die formatierte Markdown-Ausgabe zu kopieren und in Ihren Agenten einzufügen.
5. Optional MCP nutzen: Wenn Ihr Agent über MCP verbunden ist, können Sie manuelles Copy-Paste vermeiden und den Agenten bitten, spezifische Annotationen zu bearbeiten oder zu fixen.

Anwendungsfälle

• Bug-Reports für spezifische UI-Elemente: Bei „falschem“ Button-Zustand oder Styling: Über Element schweben zur Identifikation, annotieren mit Erwartung vs. Ist-Zustand und Selektoren/Pfad-Infos teilen, damit der Agent den relevanten Code findet.
• Feedback zu Typografie und Abständen: Bei Padding- oder Größenproblemen das exakte Komponentenbereich annotieren und den Agenten Alternativen entscheiden lassen (z. B. „24px oder 16px“) zur Feedback-Auflösung.
• Text-/Inhaltskorrekturen: Bei Tippfehlern in Labels oder Copy den genauen Text auswählen und präzises Feedback hinzufügen (z. B. „Button-Text unklar“ oder „Inhalt sollte X lauten“), damit der Agent den spezifischen UI-String trifft.
• Animationsspezifisches Feedback: Animation pausieren (über Toolbar) am relevanten Frame, diesen visuellen Zustand annotieren und kontextgebundenes Feedback geben.
• Team- oder Mehrseiten-Feedback-Koordination: Agenten lassen alle sichtbaren Annotationen über Seiten auflisten, nacheinander auflösen und alles löschen, wenn die Überprüfung abgeschlossen ist.

FAQ

Wie hilft Agentation einem Agenten, den richtigen Bereich meiner App zu finden?
Agentations Ausgabe kann CSS-Selektoren, Quelldateipfade, React-Komponentenhierarchie und berechnete Stile enthalten, damit ein Agent greppen, zur richtigen Zeile navigieren und verstehen kann, wo und wie das Element passt.

Muss ich das Feedback in den Agenten kopieren und einfügen?
Nicht immer. Die Seite weist darauf hin, dass mit MCP-Integration das Kopieren-Einfügen entfällt, da der Agent den Annotationskontext bereits sieht.

Welche Art von Feedback sollte ich in Annotationen schreiben?
Die Seite empfiehlt, spezifisch zu sein (z. B. das Problem klar beschreiben), je Annotation ein Problem zu behandeln und Kontext über Erwartung vs. Ist-Zustand anzugeben.

Können Agenten Fragen stellen oder auf Annotationen reagieren?
Ja. Mit MCP-Integration und Annotation-Format-Schema beschreibt die Seite Agenteninteraktionen wie Auflisten von Annotationen, Klärungsanfragen, Auflösen mit Zusammenfassung und Verwerfen von Annotationen.

Was ist Agentations Lizenzmodell?
Agentation ist für Einzelpersonen und Unternehmen zur internen Nutzung kostenlos. Für die Weiterverbreitung als Teil eines verkauften Produkts rät die Seite, sie für eine kommerzielle Lizenz zu kontaktieren.

Alternativen

• Interaktive UI-Screenshot-/Markup-Tools (mit Human-Review-Workflows): Tools zum Erfassen und Markieren von UI für Reviews können Feedback-Sharing unterstützen, erzeugen aber typischerweise keine strukturierten Selektoren/Dateipfade für codebewusste Agenten.
• Textbasierte Issue-Vorlagen in Trackern (z. B. Bug-Tickets): Bug-Tracker helfen, Erwartung vs. Ist-Verhalten zu dokumentieren, verlassen sich aber auf Beschreibungen statt Agenten auf einen spezifischen UI-Elementpfad im Codebase zu verweisen.
• Agentenfähige Code-Navigations-Tools ohne visuelle Annotation: Coding-Assistenten, die dein Repository verstehen, können auf Feedback reagieren, aber ohne Annotationsschicht musst du das Ziel meist indirekter beschreiben (z. B. Komponenten manuell benennen).