Agent-UI-Patterns: Tool-Calls transparent darstellen

TL;DR

• Sechs Agent-UI-Pflicht-Patterns 2026: Tool-Call-Visualisierung, Approval-Gates, Plan-First-Mode, Pause-and-Steer, Verlaufs-Inspektion und Citation-Trail. Wer auch nur einen weglässt, baut einen Trust-Killer.
• Friction für High-Stakes, Frictionless für Low-Stakes. Recherche und Zusammenfassung laufen ohne Bestätigung; Schreib-Aktionen und finanzielle Entscheidungen brauchen explizites Go.
• Trust-Evolution über Zeit: Approval-Gates sind nicht permanent — nach 3–6 Monaten kontrollierter Co-Pilot-Nutzung lassen sich Routine-Aktionen sukzessive entfeineren. Wer Tag eins autonom freischaltet, verliert beim ersten Fehler die Lizenz.

In DACH-Pilots zeigt sich: Ein einziger fehlender Approval-Gate in einem Disposition-Agent reicht, um ein Kundenkonto falsch zu belasten. Danach ist Approval-Gate keine UX mehr — es ist Versicherung.

Sechs Agent-UI-Pflicht-Patterns

Agent-UI ist 2026 ein eigenes UX-Subfeld. Agentische AI braucht andere Patterns als reines Chat — Tool-Aufrufe, Multi-Step-Workflows und Schreib-Aktionen erzwingen neue Transparenz-Anforderungen. Es ist die andere Seite derselben Verschiebung wie generative UI, bei der die Software ihre Oberfläche im Moment selbst baut.

• Tool-Call-Visualisierung. Der User sieht in Echtzeit "Ich rufe gerade die ERP-API ab" mit Status-Indicator — kein Black-Box-Output. Jeder Aufruf wird mit Name, Parametern und Status inline gerendert.
• Approval-Gates für Schreib-Aktionen. Vor jeder Aktion mit Wirkung außerhalb des Gesprächs — Bestellung anlegen, E-Mail senden, Termin buchen — verlangt der Agent explizite Bestätigung. Der Gate zeigt Aktions-Beschreibung, Payload-Preview und Confirm/Cancel. Die Versicherung gegen den ersten autonomen Fehler.
• Plan-First-Mode. Für komplexe Aufgaben zeigt der Agent zuerst seinen Plan, der User passt an, bevor die Ausführung startet. Reduziert Korrektur-Kosten um 60–80 % gegenüber reaktivem Stop-Pattern. Default bei Workflows über drei Aktionen.
• Pause-and-Steer. Der User kann mitten in der Ausführung "Stop" sagen, den Plan ändern, neu starten. Die Kontroll-Schraube, wenn Plan-First an der Realität scheitert. Ohne sie ist jeder lange Agent-Run ein All-or-Nothing-Risiko.
• Verlaufs-Inspektion. Der User schaut jeden Step retrospektiv an — was aufgerufen wurde, was zurückkam, welche Entscheidung folgte. Die Audit-Schicht für EU-AI-Act-Hochrisiko-Anwendungen, 2026 Compliance-Asset, nicht UX-Bonus.
• Citation-Trail für Reasoning. Der Agent erklärt, warum er diesen Schritt gemacht hat — Quelle, Vorbedingung, Entscheidungs-Regel. Trennt brauchbare Antworten von "klingt-richtig"-Halluzinationen. Pflicht, sobald der Agent über reine Tool-Wrapper hinausgeht.

Frictionless vs Friction

Nicht jede Aktion braucht Friction. Die richtige Heuristik unterscheidet nach Wirkungs-Tiefe — Lese-Aktionen frictionless, Schreib-Aktionen mit Gate. Wer beides gleich behandelt, verliert entweder Trust oder Geschwindigkeit.

Friction ist nicht das Gegenteil von guter UX — Friction an der richtigen Stelle ist die UX. Wer Approval-Gates wegoptimiert, optimiert Trust weg.

Tooling-Optionen für Agent-UI

Drei Pfade sind 2026 produktiv tragfähig. Default für DACH-Mittelstand: Vercel AI SDK Generative UI auf React.

• Vercel AI SDK Generative UI. Streaming-Tool-Calls als React-Komponenten, native Approval-Gates über useChat mit onToolCall-Hook. Default-Stack für React/Next.js-Teams, Time-to-Production 2–4 Wochen. Stärkster Out-of-the-Box-Support für Tool-Call-Visualisierung.
• LangGraph Studio. Visueller Graph-Editor plus Debug-Inspection für Multi-Step-Agenten. Stärke: Verlaufs-Inspektion und Step-Replay als Production-Feature. Schwäche: Python-zentrisch, Frontend braucht eigene React-Layer.
• Eigene React-Komponenten. Volle Kontrolle und Design-System-Integration, aber 6–12 Wochen Aufbau. Sinnvoll, wenn ein bestehendes Design-System die UI-Bibliothek definiert und Generative-UI-Defaults nicht passen.

Anti-Patterns

• Kein Approval-Gate für Schreib-Aktionen. Der Agent versendet, bucht oder löscht ohne Bestätigung — ein einziger Fehler beendet den Pilot. Trust-Killer Nummer eins. Approval-Gate ist Mindest-Standard für jede Wirkung außerhalb des Gesprächs.
• Kein Pause-Steer. Lange Multi-Step-Runs ohne Stop-Möglichkeit zwingen den User in All-or-Nothing. Wenn der Plan in Schritt 4 von 8 falsch wird, bleibt nur der Browser-Tab. Inakzeptabel für Workflows über drei Aktionen.
• Black-Box-Output. Ergebnisse ohne Tool-Call-Visualisierung und ohne Citation-Trail. Der User weiß nicht, was passiert ist, und kann es nicht prüfen — Audit-Risiko und Trust-Killer in einem, disqualifiziert für Hochrisiko-Anwendungen.

Default-UI-Stack 2026

Vercel AI SDK Generative UI als Frontend-Schicht für Streaming-Tool-Calls und Approval-Gates, Time-to-Production 2–4 Wochen im React/Next.js-Stack, der 2026 in 70 % der Mittelstands-AI-Projekte ohnehin gesetzt ist. Mindest-Konfiguration für Production-Agenten: Tool-Call-Visualisierung inline für jeden Aufruf, Approval-Gates für alle Schreib-Aktionen, Plan-First-Mode für jeden Workflow über drei Schritte.

Trust-Evolution einplanen. Approval-Gates am Tag eins für alle High-Stakes-Aktionen, nach 3–6 Monaten kontrollierter Nutzung Routine-Aktionen sukzessive freischalten. In DACH-Pilots steigt der Disponenten-Trust erst mit Tool-Call-Visualisierung und Gates messbar, Korrekturen sinken um knapp 30 % mit Plan-First und Pause-Steer — erst dann wird Routine-Friction entfernt, High-Stakes-Gates bleiben. Wer Tag eins autonom freigibt, hat keine zweite Chance, wenn der erste Fehler kommt.

Praxis-Schritt: Ein AI Readiness Audit prüft Ihre Agent-Use-Cases gegen die sechs Pflicht-Patterns, identifiziert High-Stakes-Aktionen mit Approval-Gate-Bedarf und liefert einen UX-Stack-Vorschlag plus 12-Monats-Roadmap. Audit anfragen → /anfrage

Stand Mai 2026. Agent-UX- und Generative-UI-Beratung für DACH-Mittelstand mit Schwerpunkt MedTech, Maschinenbau, Logistik — eigene BAFA-/go-digital-Akkreditierung in Vorbereitung Q3 2026, Förder-Pfade aktuell in Kooperation mit akkreditierten Partner-Beratungen.