Question Flow

Multi-step guided questions with branching.

Step 1 of 3

Select a programming language

This determines which frameworks and tools are available.

<QuestionFlow  id="question-flow-project-setup"  steps={[      {          "id": "language",          "title": "Select a programming language",          "description": "This determines which frameworks and tools are available.",          "options": [              {                  "id": "python",                  "label": "Python"              },              {                  "id": "typescript",                  "label": "TypeScript"              },              {                  "id": "go",                  "label": "Go"              }          ]      },      {          "id": "framework",          "title": "Choose a framework",          "description": "Pick the framework you're most comfortable with.",          "options": [              {                  "id": "fastapi",                  "label": "FastAPI"              },              {                  "id": "django",                  "label": "Django"              },              {                  "id": "flask",                  "label": "Flask"              }          ]      },      {          "id": "database",          "title": "Select your database",          "description": "Your data will be stored and queried from here.",          "options": [              {                  "id": "postgres",                  "label": "PostgreSQL"              },              {                  "id": "mysql",                  "label": "MySQL"              },              {                  "id": "mongodb",                  "label": "MongoDB"              }          ]      }  ]}  onComplete={(answers) => console.log("Complete:", answers)}/>

Getting Started

Run this once from your project root.

npx shadcn@latest add @tool-ui/question-flow

Render 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} />;}

"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";import { createArgsToolRenderer } from "@/components/tool-ui/shared";export const toolkit: Toolkit = {  configureProject: {    description: "Guide user through project configuration.",    parameters: SerializableQuestionFlowSchema,    render: createArgsToolRenderer({      safeParse: safeParseSerializableQuestionFlow,      idPrefix: "wizard",      render: (parsedArgs, { result, addResult }) =>        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)}            />          ),    }),  },};

These snippets use assistant-ui for end-to-end wiring, but the QuestionFlow component itself is framework-agnostic at the UI layer: you can use it in any React codebase with any LLM SDK or tool-calling interface that can provide compatible props.