Debugging an Angular Agent UI with AG-UI DevTools
Learn how to debug an agent UI with AG-UI DevTools, a Chrome DevTools panel for AG-UI and LangGraph event streams. Introducing AG-UI DevTools When an agent run misbehaves, the Network panel shows you an opaque text/event-stream . And console.log only shows you what your app thinks happened. AG-UI DevTools shows you the wire. It captures, decodes, and validates every event in a run, and it lays…
Debugging an Angular Agent UI with AG-UI DevTools involves installing the Chrome DevTools panel for AG-UI and LangGraph event streams. Once installed, you can use the panel to capture, decode, and validate every event in a run, providing a visual representation of the wire. The panel supports Threadplane 0.3.4 and later versions, offering additional features like reporting which signals each event wrote and allowing script execution for the agent's next run.
The panel includes several tabs, such as Timeline, Runs, Messages, State, UI, and Signals, each with specific functionality. The Timeline tab shows each run, with bars representing messages, tool calls, and steps. The Runs tab displays a table with information about each run, including thread, agent, outcome, duration, time to first token (TTFT), event count, and issue count.
The Messages tab reconstructs the conversation from the stream, while the State tab replays state shared between the agent and UI. The UI tab provides a component tree for generative UI, and the Signals tab shows which signals each event wrote, helping identify issues in the conversation.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
