shadcn.io is not affiliated with official shadcn/ui
Message With Steps AI Block for Solid
An assistant answer that is a five-step database migration plan you run one step at a time, with a progress bar, Run next step, Skip and Reset, a spine of steps with status words and a SQL block and typed output for each.
Installation
Overview
Hand a plan to the person and let them step through it, with this AI message with steps for Solid with Ark UI. A compact header names the product and a hairline frame holds one turn: a request in a secondary Bubble, the assistant's sentence and a "Plan" band with a Progress bar and "2 of 5". The block's one primary, a Shine Button "Run next step", sits beside Skip and Reset above five steps on a thin spine. Each step has a glyph, a title, a status word (Done, Next, Skipped or Waiting) and a Collapsible "Show code" row that opens its SQL in Syntax Text; its typed output has its own line from the start, so running a step moves nothing. Nothing advances by itself. It's built from Bubble, Progress, Collapsible, Syntax Text, Button, Shine Button and Guides. For migration helpers, setup guides and any assistant that proposes a sequence.
FAQ
Does it run the SQL?
No. The SQL and the output of each step are typed at the top of the file, and every status line says nothing ran. To make it real, run the step from the Run handler against a database you trust, show its real output in the same line and keep the step Next if it fails, with the error in the status line.
Why doesn't it advance by itself?
A migration is something to read before you run. Each press runs one step, Skip marks one as skipped and Reset puts all five back to waiting. Pressing Run when every step is handled says so instead of doing nothing.
What does 2 of 5 count?
The steps that are done or skipped, worked out from the list of marks, and the bar follows it. The Next step is always the first one still waiting.
How does it work from the keyboard?
Run next step, Skip and Reset are buttons; each "Show code" row is a button that says whether it is open, and the code region is named for its step. The glyphs are decoration, so each title carries a hidden "Step 3 of 5" for screen readers, and the status line announces each result.