Graph state viewerPro
A state graph with the run drawn on it, and the state object.
On this page
ProA support agent mid run with two tool loops.
Installation
Usage
import { GraphStateViewer } from "@/components/ui/chatcn/pro/graph-state-viewer"
<GraphStateViewer nodes={nodes} edges={edges} path={visited} running state={state} changedKeys={["messages"]} />Layers come from the distance to the start node; edges back up the graph, like a tool loop, curve round the side. Taken edges are solid with a count, the rest dashed. The current node is ringed and labeled Now, or Failed.
Examples
States
ProNot started, finished, and failed in a tool call.
Props
| Prop | Type | Notes |
|---|---|---|
nodes, edges | The graph | |
path | string[] | Visited node ids in order |
running, failed, currentId | Run status | |
state, changedKeys | The state object | |
onSelect, selectedId | Makes nodes buttons |
Accessibility
- Every node names its visits; the path is also a text list under the graph.