Agent Run

Pro

A single agent run as a card: a pulsing avatar, a live status and timer, a progress line, and tool-call steps that spin, tick off and expand to show their output.

pnpm dlx shadcn@latest add @ditherui/agent-run

Refactor agent

Ready · 0.0s

Props

PropTypeDefault

namestring—

stepsAgentRunStep[]—

stepMsnumber1400

classNamestring—

When to use the agent run

Use the agent run card to show one run in progress: a live status and timer, a progress line, and tool-call steps that spin, tick off and expand to show output.

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components

Support agent · 5 steps, 4 connections
Next run: routine ticket
Ticket receivedInbox: support@TriggerIdle
Classify intentModel: router-v2AgentIdle
Page on-callPager: #sev-1AlertIdle
Draft replyModel: writer-v1AgentIdle
Send replyEmail: customerActionIdle
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
Select a step to see its details
Agent FlowA draggable node canvas that runs an agent workflow, built on React Flow.
Reading your question...
Dither LoaderRetro dithered loaders for thinking and generating states, plus a compact 3x3 cube.
According to recent studies, artificial intelligence has shown remarkable progress in natural language processing. The technology continues to evolve rapidly, with new breakthroughs being announced regularly .
CitationsSource chips and cards that show where an answer came from.