Agent Steps

A live list of the steps an AI agent is taking, with a status for each and collapsible logs.

Preview

Loading Preview...

bun add xiod-ui

1import {2  AgentSteps,3  AgentStep,4  AgentStepIcon,5  AgentStepLabel6} from "xiod-ui/agent-steps";

1<AgentSteps>2  <AgentStep>3    <AgentStepIcon />4    <AgentStepLabel />5  </AgentStep>6</AgentSteps>

Detailed documentation of properties and options.

alias: AgentStepIndicator

Accepts render, plus every native <div> attribute.

Prop	Type	Default	Description
`disableShimmer`	`boolean`	`false`	Whether to turn off the shimmer that sweeps across the text. Used when there are no `children`.
`icon`

Accepts render, plus every native <div> attribute.

Prop	Type	Default	Description
`status`	`"completed"`\|`"waiting"`\|`"running"`\|`"failed"`	`running`	The step's status. `completed`, `failed` and `waiting` show their own icon and text style; the shimmer and spinner only run while `running`. Used when there are no `children`.

Accepts render, plus every native <div> attribute.

Prop	Type	Default	Description
`icon`	`AgentStepIconValue`	–	The step's icon: a built-in name such as `thinking` or `searching`, or an icon component. Used when there are no `children`.
`showSpinner`	`boolean`	`false`	Whether to show a spinning dashed ring around the icon while the step is `running`. Used when there are no `children`.

Accepts render, plus every native <span> attribute.

Prop	Type	Default	Description
`labelKey`	`Key`	–	Identifies the label: when it changes, the old label fades out as the new one fades in. Defaults to the text when the label is a string or number, so other labels (elements) change in place unless you set this.
`shimmer`	`boolean`	`true`	Whether the label shows a shimmer sweep while its step is running.