Agentation
Benji Taylor · Coding
Agentation ist ein Desktop-Tool für visuelles Feedback, das UI-Annotationen in strukturierten Kontext für KI-Coding-Agenten verwandelt. Statt einen kaputten Button mit Worten zu beschreiben, klicken Sie ihn an, tippen eine Notiz und kopieren einen Markdown-Block, der CSS-Selektoren, Pfade der Quelldateien und Ihre Absicht neben den tatsächlichen React-Komponentenbaum dieses Elements legt. Diesen Block können Sie Claude, Codex, Gemini oder jedem Agenten geben, der Ihren Code lesen kann, und er weiß genau, welches Element gemeint ist.
Über Agentation
Was Agentation ist
Agentation ist eine agentenunabhängige Feedback-Schicht zwischen Ihrer laufenden App und Ihrem KI-Coding-Assistenten. Sie montieren eine kleine Symbolleiste in Ihrer React-App, fahren über Elemente, um ihre Namen zu sehen, und klicken ein beliebiges Element an, um einen Kommentar anzuhängen. Danach formatiert das Tool alles zu Markdown, das Sie in einen Chat mit Ihrem Agenten einfügen.
Das Problem, das es löst, ist konkret. Wenn Sie einem Agenten sagen „der blaue Button in der Seitenleiste sieht falsch aus", muss er raten, welches Element gemeint ist, und jeder Fehlgriff kostet Sie einen ganzen Hin-und-Her-Durchlauf. Agentation ersetzt dieses Raten durch harte Kennungen: .sidebar > button.primary, die Quelldatei und den React-Komponentenbaum. Der Agent grept in Ihrem Code, statt nach einer Farbe zu suchen. Kein Raten.
Der größte Haken: Agentation ist derzeit nur für Desktop verfügbar. Es gibt keine mobile App, keinen Arbeitsablauf übers Telefon und keine Möglichkeit, von einem Tablet aus zu annotieren, falls Sie dort arbeiten. Außerdem zielt es zuerst auf React-Projekte, weil der Komponentenbaum und die Selektor-Ausgabe diese Einrichtung voraussetzen.
Erste Schritte
- Installieren Sie das Paket mit
npm install agentation(oder Ihrem bevorzugten Paketmanager) und fügen Sie die Agentation-Komponente in Ihre App ein. - Öffnen Sie die Symbolleiste über das Symbol unten rechts auf der Seite.
- Fahren Sie über Elemente, um ihre Namen zu bestätigen, und klicken Sie ein Element an, um das Annotationsfenster zu öffnen.
- Schreiben Sie Ihr Feedback, wählen Sie Absicht und Priorität und klicken Sie auf Add.
- Kopieren Sie das formatierte Markdown und fügen Sie es in Ihren KI-Coding-Agenten ein.
Produktinformationen
Ein kurzer Überblick über Preise, unterstützte Plattformen und die Leistung von Agentation.
Am besten für
Die Nutzer, Aufgaben und Szenarien, für die dieses Tool am besten passt.
Nutzer
- Frontend-Entwickler, die KI-Coding-Agenten nutzen
- Produktdesigner, die Feedback zu Live-Builds geben
- Kleine Engineering-Teams mit internem QA
Aufgaben
- Einen Styling-Bug in Ihrem UI-Annotationsablauf melden
- Einen Tippfehler markieren
- Eine Animation prüfen
- Einen Agenten um Klärung einer Designentscheidung bitten
Szenarien
- An einer React-App arbeiten, während Claude Code oder Codex in einem zweiten Fenster offen ist.
- Das eigene Projekt debuggen, bei dem Sie die Datei kennen, aber nicht die Zeile.
- Einen neuen Feature-Branch als Entwickler-Feedback-Tool testen, bevor er QA erreicht, damit Design- und Engineering-Notizen im selben strukturierten Format landen, das Ihr Agent schon versteht.
- Ein Design-Review durchführen, bei dem Feedback einen Agenten erreichen muss, kein menschliches Ticket.
Wichtigste Funktionen
Elementbewusste Annotationen
Sie klicken ein Element an, und Agentation erfasst, was es wirklich ist: seinen CSS-Selektor, den Pfad der Quelldatei, die React-Komponentenhierarchie und die berechneten Stile. Ihre geschriebene Notiz reist mit diesem technischen Kontext mit. Das Ergebnis ist Feedback, auf das ein Agent direkt reagieren kann, statt eine Beschreibung zu deuten. Ein Klick leistet viel.
Markdown-Ausgabe für jeden Agenten
Das Tool kopiert einen formatierten Markdown-Block, der mit Claude, Codex, Gemini, Grok oder jedem Agenten mit Zugriff auf Ihren Code funktioniert. Es ist von Grund auf agentenunabhängig, also sind Sie nicht an einen Assistenten gebunden. Fügen Sie es in einen Chat ein. Der Agent kann nach dem Selektor grepen oder direkt zur Quellzeile springen.
MCP-Integration mit bidirektionalem Feedback
Mit dem installierten agentation-mcp-Server lesen Agenten nicht nur Annotationen. Sie können ausstehendes Feedback auflisten, Rückfragen stellen und Probleme als erledigt markieren. Folgenachrichten und Erledigungen bleiben an der ursprünglichen Annotation, was einen langen Austausch lesbar hält, statt ihn über den Chat-Verlauf zu verstreuen. Das zählt, sobald ein Review über ein Dutzend Punkte hinausgeht.
Absicht und Priorität der Annotation
Jede Notiz trägt ein Feld für Absicht und Priorität, so unterscheidet ein Agent einen Blocker von einem Nice-to-have, ohne dass Sie es aussprechen müssen. Sie schreiben ein Problem pro Annotation, was es dem Agenten leichter macht, Punkte einzeln abzuarbeiten, statt einen dichten Absatz gemischter Beschwerden zu entwirren.
Animationspause
Sie können eine Animation über die Symbolleiste einfrieren und ein bestimmtes Bild annotieren. Es ist eine kleine Funktion, aber niemand möchte „die Stelle, wo es gleitet, aber nicht ganz am Anfang" in Text erklären. Eine große Zeitersparnis.
Webhooks und externe Auslieferung
Server-Webhooks schieben Annotationen an externe Dienste und versuchen es bei Netzwerkfehlern, Zeitüberschreitungen und HTTP-429- oder -5xx-Antworten erneut. Jeder Versuch behält dieselbe Auslieferungs-ID, sodass ein Empfänger deduplizieren kann. Die Auslieferung erfolgt nach bestem Bemühen und übersteht keinen Neustart des Servers. Gut zu wissen, bevor Sie sich darauf verlassen.
Vor- und Nachteile
Vorteile
- Ersetzt vage Beschreibungen durch konkrete Selektoren und Dateipfade, was das Hin und Her reduziert, das Sie sonst damit verbringen, einem Agenten zu sagen, welches Element gemeint ist.
- Funktioniert mit Claude, Codex, Gemini und Grok, statt Sie an einen einzigen Assistenten zu binden.
- Kostenlos für Einzelpersonen und interne Firmentnutzung, es gibt also keine Bezahlschranke zum Testen.
- MCP-Unterstützung lässt Agenten Fragen stellen und Probleme schließen, nicht nur Notizen empfangen.
Nachteile
- Nur für Desktop, Sie können also nicht von einem Telefon oder Tablet aus annotieren.
- Die React-first-Ausgabe des Komponentenbaums setzt eine React-Codebasis voraus, was sie auf anderen Frontend-Stacks einschränkt.
- Der MCP-Ablauf braucht lokal laufendes Node.js, was für Teams, die nur die Symbolleiste wollen, zusätzliche Einrichtung bedeutet.
- Kommerzielle Nutzung außerhalb interner Projekte erfordert eine bezahlte Lizenz, das sollten Sie prüfen, bevor Sie es in ein Produkt einbauen, das Sie verkaufen.
Häufige Fragen
Es lässt Sie UI-Elemente in einer laufenden Web-App annotieren und verwandelt diese Notizen in strukturiertes Markdown für KI-Coding-Agenten. Die Ausgabe enthält den Selektor des Elements, den Pfad der Quelldatei und Ihr Feedback, sodass ein Agent die genaue Stelle in Ihrem Code findet.
Ähnliche Inhalte
Entdecke passende Tools, Skills und Artikel zu Agentation.
Alternativen zu Agentation
Forefront
Forefront · CodingForefront ist eine Webplattform zum Bauen mit Open-Source-KI. Sie lassen sich führende Open-Source-Sprachmodelle mit eigenen Daten feintunen, ihre Leistung bewerten und sie über eine API ausführen oder exportieren, um sie selbst zu hosten. Entwickler, die den Komfort einer geschlossenen Plattform wollen, aber darauf bestehen, ihre Modelle und Daten zu besitzen, sind hier die Zielgruppe.
Startkit
StartKit.AI · CodingStartkit ist ein Boilerplate zum Bauen von KI-SaaS-Produkten und KI-Wrappern. Man kann es sich als KI-Startup-Boilerplate vorstellen, bei dem die langweiligen Teile schon verdrahtet sind: Authentifizierung, Zahlungen über Stripe und Lemon Squeezy, Nutzungslimits, transaktionale E-Mail und ein KI-API-Starter-Kit, das mit OpenAI, Anthropic, Groq oder Llama spricht. Man klont das Repository, setzt seinen Preis und kümmert sich um den Teil des Produkts, für den Menschen wirklich bezahlen. Es basiert auf Next.js über React und Tailwind, deshalb fühlt sich ein Großteil des Boilerplate-Codes schon vertraut an.
Testim
Tricentis · CodingTestim ist eine KI-gestützte Plattform für Testautomatisierung, mit der man End-to-End-Tests für Web-, Mobile- und Salesforce-Anwendungen baut und ausführt. Sie setzt auf maschinelles Lernen, um Tests stabil zu halten, wenn sich eine Oberfläche ändert, sodass Teams weniger Zeit mit der Reparatur kaputter Selektoren verbringen. Nicht schlecht für ein Tool für automatisierte Tests, das Sie heute schon nutzen können. Sie erstellen Tests, indem Sie Aktionen im Browser aufzeichnen, und fügen danach JavaScript hinzu, wenn Sie mehr Kontrolle brauchen. Für ein beschäftigtes QA-Team eine solide Wahl.