shadcn.io is not affiliated with official shadcn/ui
LangChain Trace Visualizer Monitoring Block for Vue
Four traces of an LLM app in a window: a trace list, a span tree with duration bars on each trace's own time axis, a type filter, a jump to the slowest span, and a detail pane with own time, tokens, model, input and output.
Installation
Overview
Find the slow step in a chain of model, tool and retriever calls, with this trace viewer for Vue with Ark UI. It is Chainglass, a tracing tool for LLM apps (made up), as a window with no sidebar: a list of four traces on the start side (a native select on a phone), a top bar that names the chosen trace and copies its id with a Copy Button, and a span tree below. Each span is a button with its type, its duration and a bar placed on the trace's own time axis; model calls show their tokens in the detail. A Toggle Group filters the tree to LLM, tool or retriever spans, and a Button jumps to the span with the most time of its own, which is also tagged with a Badge. Choosing a span fills the detail pane with its duration, its own time, its tokens, a fictional model name and the text that went in and came out. Only the regions scroll and the window never changes height. Guides draw the frame. For teams that run chains and agents and need to see where the time goes.
FAQ
How do I use my own traces?
Edit the line lists at the top of the file, one list per trace. Each line is a span: depth, type (chain, llm, tool, retriever or parser), name, start in milliseconds, duration, tokens, model, input and output, separated by |, in tree order. A span's own time is its duration minus its direct children's, worked out when the file loads, and the slowest span of a trace is the one with the most own time.
Why own time, not duration?
A parent chain always lasts longer than any step inside it, so ranking by duration would always point at the root. Own time is what a span spent itself, so the span you should look at first is the one that is slow and not just wrapping something slow. The jump button and the Slowest badge use it, and the detail shows both numbers.
What does the filter do?
It lists only the spans of one type, keeping their indent, so you can read every model call or every tool call in order. The chosen span stays chosen and its detail stays open, the count is in the status line, and the tree region keeps its size.
What does Copy trace id copy?
The trace's id, a made-up string like tr_8f3a91c2e07b, to your clipboard, and the status line says so. It is the one real browser action in the window.