A 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](/docs/design-guidelines) for how component roles work. ## Getting Started Run this once from your project root. Render `QuestionFlow` in your UI with tool-compatible props.

```tsx import { QuestionFlow } from "@/components/tool-ui/question-flow"; export function Example({ payload, }: { payload: React.ComponentProps; }) { return ; } ```

Register this renderer so tool results display as `QuestionFlow`. ```tsx "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 ? ( ).map( ([key, values]) => ({ label: key, value: values.join(", "), }), ), }} /> ) : ( addResult?.(answers)} /> ); }, }, }; ``` ## Key Features 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 ## Modes ### Progressive Mode 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. ### Upfront Mode Pass `steps` with all step definitions. The component manages navigation internally. ### Multi-Select Steps Set `selectionMode="multi"` to allow multiple selections per step. ## Receipt State Pass a `choice` prop to render this component in its receipt state. See [Receipts](/docs/receipts) for the pattern. The receipt shows a "Complete" badge with a summary of all choices listed. It is read-only. ## Progressive Mode Props void | Promise", }, onBack: { description: "Called when user clicks Back", type: "() => void", }, }} /> ## Upfront Mode Props void", }, onComplete: { description: "Called with all answers when wizard finishes", type: "(answers: Record) => void | Promise", }, }} /> ## Receipt Mode Props ## Option Schema ## Step Definition Schema ## Accessibility - Option buttons use keyboard-accessible controls - Focus management follows WAI-ARIA patterns for step navigation - Progress indicator provides context for screen readers - Back and Next buttons are keyboard-accessible ## Related - [Option List](/docs/option-list): single-step selection when one question is enough - [Preferences Panel](/docs/preferences-panel): structured settings with switches, toggles, and selects

Tool UI

Select a programming language

Select a programming language