npx tool-agent "integrate the question flow component for multi-step guided questions with branching"npx shadcn@latest add @tool-ui/question-flowA single question rarely captures a full intent. Project setup, onboarding, and triage all involve a chain of decisions where each answer shapes the next. QuestionFlow walks the user through single- or multi-select steps with back/next navigation. You can define all steps upfront or let the assistant generate each step based on previous answers.
Role: Decision. For choices that return to the assistant. See Design Guidelines for how component roles work.
Run this once from your project root.
npx tool-agent "integrate the question flow component for multi-step guided questions with branching"npx shadcn@latest add @tool-ui/question-flowRender QuestionFlow in your UI with tool-compatible props.
import { QuestionFlow } from "@/components/tool-ui/question-flow";export function Example({ payload,}: { payload: React.ComponentProps<typeof QuestionFlow>;}) { return <QuestionFlow {...payload} />;}Register this renderer so tool results display as QuestionFlow.
"use client";import { type Toolkit } from "@assistant-ui/react";import { QuestionFlow } from "@/components/tool-ui/question-flow";import { safeParseSerializableQuestionFlow, SerializableQuestionFlowSchema,} from "@/components/tool-ui/question-flow/schema";export const toolkit: Toolkit = { configureProject: { description: "Guide user through project configuration.", parameters: SerializableQuestionFlowSchema, render: ({ args, toolCallId, result, addResult }) => { const parsedArgs = safeParseSerializableQuestionFlow({ ...args, id: args?.id ?? `wizard-${toolCallId}`, }); if (!parsedArgs) { return null; } return result ? ( <QuestionFlow id={parsedArgs.id} choice={{ title: "Project configured", summary: Object.entries(result as Record<string, string[]>).map( ([key, values]) => ({ label: key, value: values.join(", "), }), ), }} /> ) : ( <QuestionFlow {...parsedArgs} onComplete={(answers) => addResult?.(answers)} /> ); }, },};The AI generates each step based on previous answers
All steps defined upfront; the component handles navigation
Each step allows one pick or multiple selections
Shows a summary of all choices once the flow completes
Pass step, title, and options to render one step at a time. The AI generates each subsequent step based on the user's previous selections.
Pass steps with all step definitions. The component manages navigation internally.
Set selectionMode="multi" to allow multiple selections per step.
Pass a choice prop to render this component in its receipt state. See Receipts for the pattern.
The receipt shows a "Complete" badge with a summary of all choices listed. It is read-only.
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type