OnUI: Browser-Erweiterung für präzises UI-Feedback an Claude Code
OnUI ist eine Browser-Erweiterung, die visuellen Kontext für UI-Korrekturen bei der Arbeit mit Claude Code bereitstellt. Sie löst das häufige Problem, beschreiben zu müssen, welches UI-Element Aufmerksamkeit benötigt, indem sie direkte Annotationen auf Webseiten ermöglicht.
Was OnUI tut
Sie können auf jeder Webseite Elemente anklicken oder Bereiche zeichnen, Notizen hinzufügen, was nicht stimmt, und einen strukturierten Bericht exportieren. Claude Code liest diesen Bericht über lokales MCP (Model Context Protocol), wodurch es exakte Informationen über das DOM-Element, seinen Pfad, Ihre Absicht und den Schweregrad erhält. Dadurch entfallen mehrdeutige Beschreibungen wie "der Knopf rechts, nein der andere".
Technische Umsetzung
Der Entwickler hat OnUI über mehrere Wochen mit Claude Code erstellt. Claude Code schrieb den größten Teil der TypeScript-Codebasis, einschließlich sowohl der Browser-Erweiterung als auch des lokalen MCP-Servers. Spezifische technische Herausforderungen, die während der Entwicklung bewältigt wurden, umfassen:
- Iterationen zur Shadow-DOM-Isolierung, um CSS-Konflikte mit Host-Seiten zu vermeiden
- Erstellung der Annotation-Dialog-UI und Export-Formatierer
- Fehlersuche in der nativen Nachrichtenbrücke zwischen Erweiterung und lokalem MCP
Verfügbarkeit und Lizenzierung
OnUI ist kostenlos nutzbar ohne Bezahlstufen. Sie ist mit einem Klick aus dem Chrome Web Store installierbar und funktioniert auch auf Edge und Firefox. Das Projekt ist unter GPL-3.0 lizenziert, hat keine Cloud-Abhängigkeiten, keine Telemetrie und ist vollständig kostenlos.
Entwicklungs-Workflow
Der Entwickler weist auf die Ironie hin, ein Werkzeug für Claude Code mit Claude Code selbst zu bauen. Ihr aktueller UI-Iterations-Workflow ist: annotieren → Claude korrigiert → überprüfen → wiederholen.
📖 Read the full source: r/ClaudeAI
👀 Siehe auch
Lightfeed Extractor: TypeScript-Bibliothek für robuste Webdatenextraktion mit LLMs
Lightfeed Extractor ist eine TypeScript-Bibliothek, die die gesamte Pipeline von rohem HTML zu validierten strukturierten Daten mithilfe von LLMs abdeckt, mit Funktionen wie HTML-zu-Markdown-Konvertierung, Zod-Schema-Validierung, JSON-Wiederherstellung und integrierter Playwright-Browser-Automatisierung.
AgentHandover: Mac-Menüleisten-App, die Agenten-Fähigkeiten erstellt, indem sie Ihren Bildschirm beobachtet
AgentHandover ist eine Open-Source-Mac-Menüleisten-App, die Gemma 4 lokal über Ollama nutzt, um Ihren Bildschirm zu beobachten und wiederkehrende Arbeitsabläufe in strukturierte Skill-Dateien umzuwandeln, die jeder Agent ausführen kann. Es bietet sowohl Focus Record für bestimmte Aufgaben als auch Passive Discovery, die Muster aus Hintergrundbeobachtungen erkennt.
Superglue CLI: Lassen Sie KI-Agenten API-Aufrufe ohne vorgefertigte Tools ausführen
Superglue CLI bietet eine Fähigkeit, die KI-Codierungsagenten beibringt, wie man seine Befehle verwendet, Authentifizierung handhabt, Tools erstellt und Fehler debuggt. Anstatt vorgefertigte Tools für jede API-Integration zu erstellen, können Agenten API-Spezifikationen zur Laufzeit lesen und mehrstufige Aufrufe planen.
Claude Code HUD: Terminal-Dashboard zur Überwachung von KI-Codierungssitzungen
claude-code-hud ist ein Terminal-Dashboard, das Echtzeit-Überwachung für Claude Code-Sitzungen bietet und die Nutzung des Kontextfensters, API-Ratenlimits und Dateiänderungen anzeigt, ohne eine IDE zu benötigen. Starten Sie es mit npx claude-code-hud.