Search

Search components and blocks

Sign in

Agent Thinking

Pro

An agent's reasoning, shown the way chat apps do: a collapsible header with a live timer, a search row whose source chips spring in one by one with a '+N more' overflow, then the steps it takes, each shimmering while active and settling once done. It ends on a 'Worked for' summary and a check, then loops.

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

Searching

  • NotionNotion – Q3 funnel report

Props

sources{ id: string; label: string; icon?: ReactNode }[]—
steps{ id: string; label: string }[]—
visibleSourcesnumber4
stepDurationnumber (ms)1200
holdDurationnumber (ms)3000
className / ...div propsReact.ComponentProps<"div">—

When to use the agent thinking view

Use it to show an agent's reasoning the way chat apps do: a collapsible header with a live timer, a search row of source chips, then the steps it takes.

  • 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