agnt

Verleihe deinem KI-Coding-Agenten Browser-Superkräfte.

👁 Go Version
👁 MCP
👁 npm
👁 PyPI
👁 License

Was ist agnt?

agnt ist eine neue Art von Tool, das für das Zeitalter der KI-gestützten Entwicklung konzipiert wurde. Es fungiert als Brücke zwischen deinem KI-Coding-Agenten und dem Browser und erweitert die Möglichkeiten während „Vibe-Coding“-Sessions.

Wenn du mit Claude Code, Cursor oder anderen KI-Coding-Tools arbeitest, ermöglicht agnt deinem Agenten:

• Zu sehen, was du siehst – Screenshots, DOM-Inspektion und visuelles Debugging

• Direkt von dir zu hören – Sende Nachrichten aus dem Browser an deinen Agenten

• Gemeinsam Ideen zu skizzieren – Zeichne Wireframes direkt auf deine Benutzeroberfläche

• In Echtzeit zu debuggen – Erfasse Fehler, Netzwerkverkehr und Leistungsmetriken

• Auf jedem Gerät zu testen – Tunneling zu Smartphones und BrowserStack mit vollständiger Instrumentierung

• Das Kontextfenster zu erweitern – Strukturierte Daten verbrauchen weniger Token als deine Beschreibungen

Demo

👁 Sketch Demo

Zeichne Wireframes direkt auf deine laufende App und sende sie an deinen KI-Agenten

Die Vision: Die Fähigkeiten deines Agenten erweitern

Traditionelle KI-Coding-Assistenten sind blind für das, was im Browser passiert. Sie können Code schreiben, aber sie können nicht:

• Das visuelle Ergebnis ihrer Änderungen sehen

• Wissen, wann JavaScript-Fehler auftreten

• Layout-Probleme verstehen, die du erlebst

• Feedback erhalten, ohne dass du es eintippen musst

agnt ändert das. Es schafft einen bidirektionalen Kanal zwischen deinem Browser und deinem KI-Agenten:

┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Your Browser │ ←──► │ agnt │ ←──► │ AI Agent │
│ │ │ │ │ │
│ - See changes │ │ - Proxy traffic│ │ - Receives │
│ - Send notes │ │ - Capture errors│ │ context │
│ - Draw sketches│ │ - Inject tools │ │ - Acts on │
│ - Click to log │ │ - Route messages│ │ feedback │
└─────────────────┘ └─────────────────┘ └─────────────────┘

Schnellstart

Installation

npm (empfohlen):

npm install -g @standardbeagle/agnt

pip/uv:

pip install agnt
# or
uv pip install agnt

Aus dem Quellcode:

git clone https://github.com/standardbeagle/agnt.git
cd agnt
make build && make install-local

Als MCP-Server (Claude Code, Cursor, etc.)

Füge dies zu deiner MCP-Konfiguration hinzu:

{
 "mcpServers": {
 "agnt": {
 "command": "agnt",
 "args": ["mcp"]
 }
 }
}

Oder installiere es als Claude Code Plugin:

/plugin marketplace add standardbeagle/agnt
/plugin install agnt@agnt

Als PTY-Wrapper (Erweitertes Terminal)

Umschließe dein KI-Tool für Overlay-Funktionen:

agnt run claude --dangerously-skip-permissions
agnt run cursor
agnt run aider

Dies fügt ein Terminal-Overlay-Menü (Strg+P) hinzu und aktiviert die Nachrichtenbrücke vom Browser zum Terminal.

Kanal-Modus (nur Claude Code)

Claude Code v2.1.80+ kann Echtzeit-Browserfehler, Diagnosen und Benutzerinteraktionen als Push-Events im Kontext empfangen – ohne den PTY-Wrapper. Füge channel { enabled true } zu .agnt.kdl hinzu und starte mit claude --dangerously-load-development-channels server:agnt. Siehe den Abschnitt zum Kanal-Modus in CLAUDE.md für das vollständige Schema, das Event-Format und das channel_reply-Tool zum Senden von Nachrichten zurück an das Browser-Overlay.

Kernfunktionen

1. Browser-Superkräfte

Starte einen Proxy und dein Agent erhält Einblick in den Browser:

proxy {action: "start", id: "app", target_url: "http://localhost:3000"}

Jetzt kann dein Agent:

// Take screenshots
proxy {action: "exec", id: "app", code: "__devtool.screenshot('current-state')"}

// Inspect any element
proxy {action: "exec", id: "app", code: "__devtool.inspect('#submit-button')"}

// Audit accessibility
proxy {action: "exec", id: "app", code: "__devtool.auditAccessibility()"}

// Check what the user clicked
proxy {action: "exec", id: "app", code: "__devtool.interactions.getLastClickContext()"}

2. Die schwebende Anzeige

Jede über den Proxy aufgerufene Seite erhält ein kleines schwebendes Käfer-Symbol. Klicke darauf, um:

• Nachrichten direkt an deinen KI-Agenten zu senden

• Screenshots von bestimmten Bereichen zu machen

• Elemente auszuwählen, um deren Details zu protokollieren

• Den Skizzenmodus für Wireframing zu öffnen

Kein Alt-Tab mehr, um zu beschreiben, was du siehst – einfach klicken und senden.

3. Skizzenmodus

Drücke den Skizzen-Button und zeichne direkt auf deine Benutzeroberfläche:

• Rechtecke, Kreise, Pfeile und Freihandzeichnungen

• Wireframe-Elemente: Buttons, Eingabefelder, Haftnotizen

• Speichern und mit einem Klick an deinen Agenten senden

Perfekt, um zu sagen „Ich möchte hier einen Button“ oder „dieses Layout ist falsch“, ohne ein Wort zu tippen.

4. Echtzeit-Fehlererfassung

JavaScript-Fehler werden automatisch erfasst und stehen deinem Agenten zur Verfügung:

proxylog {proxy_id: "app", types: ["error"]}
→ {message: "TypeError: Cannot read property 'map' of undefined",
 stack: "at ProductList (products.js:42)",
 timestamp: "..."}

Dein Agent sieht Fehler, sobald sie auftreten, nicht erst, wenn du daran denkst, sie zu erwähnen.

5. Erweiterung des Kontextfensters

Strukturierte Daten verbrauchen weniger Token als natürlichsprachliche Beschreibungen:

• Fehlerzusammenfassungen - proxylog {types: ["error"]} statt „Ich sehe einen TypeError in Zeile 42, der sagt...“

• Klick-Kontext - interactions.getLastClickContext() statt „Ich habe auf den blauen Button im Header geklickt...“

• DOM-Status - inspect('#element') statt „da ist ein div mit einigen verschachtelten spans und...“

• Konsolidierte Stack-Traces - Vorverarbeitete React-Fehlerwände in umsetzbare Zusammenfassungen

• Status auf einen Blick - Strukturiertes JSON, das dein Agent effizient parsen kann

Anstatt 100 Zeilen verschachtelter React-Fehler in den Kontext zu werfen, konsolidiert agnt die ausführliche Ausgabe in prägnante, umsetzbare Daten.

MCP-Tools

Browser-API (50+ Funktionen)

Der Proxy injiziert window.__devtool mit leistungsstarken Diagnosen:

Element-Inspektion

__devtool.inspect('#element') // Full element analysis
__devtool.getPosition('#element') // Bounding box and position
__devtool.isVisible('#element') // Visibility check

Visuelles Debugging

__devtool.highlight('.items') // Highlight elements
__devtool.mutations.highlightRecent() // Show recent DOM changes
__devtool.screenshot('name') // Capture screenshot

Barrierefreiheit

__devtool.auditAccessibility() // Full a11y audit with score
__devtool.getContrast('#text') // Color contrast check
__devtool.getTabOrder() // Tab navigation order

Interaktionen

__devtool.interactions.getLastClick() // Last click details
__devtool.interactions.getLastClickContext() // Full click context
__devtool.selectElement() // Interactive picker

Skizzenmodus

__devtool.sketch.open() // Enter sketch mode
__devtool.sketch.save() // Save and send to agent
__devtool.sketch.toJSON() // Export sketch data

Konfiguration

Erstelle eine .agnt.kdl in deinem Projektstammverzeichnis, um Skripte und Proxys automatisch zu starten und Browser-Benachrichtigungen zu konfigurieren:

// Scripts to run via daemon process manager
scripts {
 dev {
 run "npm run dev" // Shell command (recommended)
 autostart true
 url-matchers "(Local|Network):\\s*{url}"
 }

 api {
 command "go" // Or use command + args
 args "run" "./cmd/server"
 autostart true
 env {
 GIN_MODE "debug"
 }
 cwd "./backend"
 }
}

// Reverse proxies with traffic logging
proxies {
 frontend {
 script "dev" // Link to script for URL auto-detection
 }

 backend {
 target "http://localhost:8080"
 autostart true
 max-log-size 2000
 }
}

// Browser notifications when AI responds
hooks {
 on-response {
 toast true // Show toast notification
 indicator true // Flash bug indicator
 sound false // Play notification sound
 }
}

// Toast appearance
toast {
 duration 4000
 position "bottom-right" // top-right, top-left, bottom-right, bottom-left
 max-visible 3
}

Führe /setup-project in Claude Code aus, um diese Konfiguration interaktiv zu generieren.

Framework-spezifische URL-Matcher:

Architektur

agnt verwendet eine Daemon-Architektur für persistenten Status:

┌─────────────────────┐ ┌─────────────────────────────────────┐
│ AI Agent │ │ agnt │
│ (Claude Code, etc.)│◄─────►│ │
│ │ MCP │ ┌────────────────┐ │
└─────────────────────┘ │ │ MCP Server │ │
 │ └───────┬────────┘ │
 │ │ socket │
 │ ▼ │
┌─────────────────────┐ │ ┌────────────────────────────────┐ │
│ Browser │◄──────┼──│ Daemon │ │
│ │ proxy │ │ ProcessManager │ ProxyManager │ │
│ __devtool API │ │ └────────────────────────────────┘ │
│ Floating Indicator │ └─────────────────────────────────────┘
│ Sketch Mode │
└─────────────────────┘

Wichtige Designentscheidungen:

• Lock-freie Nebenläufigkeit mit sync.Map und Atomics

• Begrenzter Speicher mit Ringpuffern

• Prozesse und Proxys überleben Client-Verbindungsabbrüche

• Frontend-JavaScript ohne Abhängigkeiten

Dokumentation

Vollständige Dokumentation →

# Run docs locally
cd docs-site
npm install && npm start

Anwendungsfälle

• Vibe Coding – Bleibe im Flow, während dein Agent alles sieht

• Visuelles Debugging – Zeigen statt Sagen – skizziere, was falsch ist

• Mobile Tests – Tunnel deinen Dev-Server für Tests auf echten Geräten mit Cloudflare/ngrok + BrowserStack-Integration

• Barrierefreiheitstests – Automatisierte A11y-Audits während der Entwicklung

• Fehlerverfolgung – Fange Frontend-Fehler ab, bevor es die Benutzer tun

• UI-Reviews – Kommentiere Designs direkt auf der Live-App

• Remote-Zusammenarbeit – Teile visuellen Kontext mit deinem Agenten

Anforderungen

• Node.js 18+ oder Go 1.24+

• MCP-kompatibler KI-Assistent

Migration von devtool-mcp

agnt ist der neue Name für devtool-mcp. Bestehende Benutzer:

# npm
npm uninstall -g @standardbeagle/devtool-mcp
npm install -g @standardbeagle/agnt

# pip
pip uninstall devtool-mcp
pip install agnt

Aktualisiere deine MCP-Konfiguration, um den agnt-Befehl mit ["mcp"]-Argumenten zu verwenden.

Lizenz

MIT

Mitwirken

Beiträge sind willkommen! Siehe die Dokumentation für Architekturdetails.

Maintenance

Resources

• NPM Package
• GitHub Repository
Need Help?Related Servers