VisualFlowBuilding an AI agent canvas with streaming node state
A practical walkthrough of turning agent traces into a live, inspectable graph.
JB
Jonas Becker
Developer Advocate · · 9 min read
#ai#agents#streaming
Traces are already graphs
Every agent framework emits spans with parent ids. That is a tree — and trees are trivially rendered as flows.
Streaming updates
We push span events over a websocket and patch node data in place. Because nodes are memoised, only the changing node re-renders.
ts
socket.on('span', (s) => updateNodeData(s.id, { status: s.status, tokens: s.tokens }));