shadcn.io is not affiliated with official shadcn/ui
Onboarding Wizard AI Block for React
A four-step assistant setup: use case, voice, behaviour with temperature and length sliders, capability switches and a volume menu, then a review that adds up the example monthly cost before Create assistant.
Installation
Overview
Walk someone through creating an assistant and show what it will cost, with this AI onboarding wizard for React with Base UI. A compact header names the task, and a hairline frame with a plus mark on each corner holds the panel. A read-only Steps rail follows four panes that share one cell: Use case (Support, Research, Writing), Voice (four, each with a sample line), Behaviour and Review. Behaviour has a temperature Slider, a maximum length slider, three capability Switches (Web search, File reading, Code) and a Select for the monthly volume, and every capability and the length show the example price they add. Review lists the choices and the total. Back and Next are outline buttons; the Shine Button "Create assistant" on Review is the only colored control and answers "Created in this demo". Everything moves with CSS only. For AI builders, agent platforms and any product that configures a model for someone.
FAQ
What stays in the page, and how do I make it real?
Everything. Choices live in the page's state, the rates are example figures typed at the top of the file (50 cents per million tokens written, and a flat amount per 1,000 messages for each capability), and "Create assistant" only changes the status line. To make it real, post the chosen values from create to your own API and replace the rates with your price list; the review and the per-switch prices are computed from the same numbers.
How is the monthly cost worked out?
In whole cents, so there is no rounding drift: the volume times the maximum length times the token rate, plus, for each switch that is on, the volume divided by 1,000 times that capability's amount. Change the volume and every price on the page updates, including those of switches that are off, so you can see what each would add.
Why is the Steps rail read-only?
The wizard has one forward path and a Back button, and the rail only shows where you are, so the indicators are not buttons. The four panes sit in one grid cell and the panel reserves the tallest, which means moving between steps never changes the height of the page. After each move focus lands on the step's heading.
Is it usable with a keyboard and a screen reader?
The choices are native radio groups with the question as their legend, the sliders and switches are named, and the sliders read their value aloud ("0.3", "800 tokens"). Each change is written once to the status line in the foot. Panes you are not on are hidden from assistive technology and cannot take focus.