Live examples
- Understand the requestComplete
- Find inactive accountsComplete
- Request owner approvalRunning
search_accounts
Complete3 inactive accounts found Acme Sandbox · Example Studio · Demo Works
The components
- AgentStepsThe steps of a run in order, with where each one stands, its details and anything it depends on.
- ToolCallA tool request with its input, result, failure and duration.
- ToolResultTool output, size-limited, with a safe fallback for content it can’t show.
- ToolGroupSeveral tool calls grouped together, keeping each failure visible.
- ExecutionTimelineA timed record of what happened during a run, as a list, a table or a waterfall with tokens and cost per step.
- RunInspectorLook inside a run: each model, tool and agent step, with measured usage.
- PlanA proposed plan with collapsible steps and a button to run it.
- UsageMeterHow much context or money has been used, with what the number means. A percentage shows only when there’s a known limit.
Imports
Install once with npm install @stackunseen/ui, then import what you use.
tsx
import { AgentSteps, ToolCall, ToolResult, ToolGroup, ExecutionTimeline, RunInspector, UsageMeter } from '@stackunseen/ui';
import { Plan } from '@stackunseen/ui/assistant';
import '@stackunseen/ui/styles.css';See them working together in Agent Workbench.