Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

Multi-Step Agent AI Block for React

A goal broken into three steps and eight subtasks in a tree that runs itself one subtask at a time, with Run, Pause, Resume and Reset, a status word on every row and typed durations.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show an agent working through a goal, with this multi-step agent for React with Base UI. A hairline frame with a plus mark on each corner holds "Goal: Prepare the board pack" and a Tree View of three steps with two or three subtasks each. Every row has a glyph and a word (Done, Running, Paused, Waiting or Skipped), a finished subtask shows its typed duration, and a step shows a small bar and how many of its subtasks have passed. The Shine Button, the only colored control, is "Run": it walks the tree in order, one subtask every 900 ms, and while it runs the same place holds an outline "Pause", then "Resume", with Reset beside it. One subtask is skipped when its turn comes. A polite line says "Step 2 done" as steps finish and ends with "Finished in 14.6 s (typed durations)". For agent consoles, job runners and any product that shows a task being carried out.

FAQ

What stays in the page, and how do I make it real?

The steps, their order, the skip and every duration are typed, and the run is a timer that moves the marker along the tree. No agent runs. To wire it for real, drive the marks from your agent's events instead of the timer, and show each subtask's real duration when it finishes.

What do Pause and Resume do?

Pause stops the timer on the current subtask and marks it Paused; Resume carries on from the same place. Reset puts every subtask back to Waiting. Focus moves to the control that takes the button's place, so the keyboard never loses its spot.

Why is one subtask skipped?

It shows how a plan can drop a subtask: Pick three charts is skipped when its turn comes, counts as passed, and adds no time to the total.

Can I fold the steps?

Yes. Each step is a branch of the tree that opens and closes with the arrow keys or a press; the region keeps its height whether the tree is folded or open.

Does it work in a right-to-left language?

Yes. The tree indents from the start edge, its chevrons mirror, and counts and durations sit in isolated runs; the progress bars always fill from the same side like a number line.

How does it look on a phone?

The small bars and durations are hidden, leaving the glyph, the name, the status word and the step's count, so each row stays on one line.

All 100 ai blocks