Agent Status
Communicate what an AI agent is currently doing across multi-step tasks.
AgentStatus shows a compact inline status with a colored dot and label. Use it above a message thread or in a header to give users real-time feedback on agent progress without cluttering the conversation.
idle
Idle
thinking
Thinking...
using-tool
Using tool...
responding
Responding...
done
Done
error
Error
States table
| State | Dot | Color | Default label |
|---|---|---|---|
idle | none | zinc-400 | Idle |
thinking | pulse | zinc-400 | Thinking... |
using-tool | pulse | blue-500 | Using tool... |
responding | pulse | violet-500 | Responding... |
done | static | green-500 | Done |
error | static | red-500 | Error |
Usage
import { AgentStatus } from '@clarxai/ui'
// Basic usage
<AgentStatus state="thinking" />
// Custom label
<AgentStatus state="using-tool" label="Searching documentation..." />
// Cycle through states as the agent progresses
const [state, setState] = useState<AgentState>('idle')
// ... update state as stream events arrive
<AgentStatus state={state} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
state | AgentState | — | Current agent state |
label | string | — | Overrides the default label for the given state |
className | string | — | Additional class names |