Clarifying questions

Pro

The agent's questions before it plans (the first of two turns). Choices are cards you can pick with the number keys; text questions take a line. The agent's recommended option is marked but never pre-selected, so a person answers rather than rubber-stamps. A choice can offer "Other", for the person's own words. Asked mid-run (during), the heading drops "Before I plan".

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/clarifying-questions

Brings in: button, locale, work, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import type { ClarifyingQuestion } from "@/lib/work"
import { ClarifyingQuestions } from "@/components/clarifying-questions"

const questions: ClarifyingQuestion[] = [
  {
    id: "q1",
    kind: "choice",
    prompt: "Which values should region have?",
    options: [
      { id: "a", label: "us, eu, apac", detail: "Matches the data model notes" },
      { id: "b", label: "us, eu, apac, other", detail: "Adds a catch-all for customers that don't fit" },
      { id: "c", label: "One value per country", detail: "Finer than any data region Acme runs" },
    ],
    recommended: "b",
  },
  {
    id: "q2",
    kind: "choice",
    prompt: "Where should it appear?",
    multiple: true,
    options: [
      { id: "customer", label: "Customer page" },
      { id: "admin", label: "Admin customer view" },
      { id: "mobile", label: "Mobile app" },
    ],
  },
  { id: "q3", kind: "text", prompt: "Anything the team should know?", placeholder: "e.g. backfill from billing country", optional: true },
]

export default function Example() {
  return <ClarifyingQuestions className="max-w-xl" questions={questions} onSubmit={() => {}} onSkip={() => {}} />
}

<ClarifyingQuestions>

Prop	Type	Default	Description
questionsrequired	`ClarifyingQuestion[]`	—	The agent's questions, asked one at a time in this order.
onSubmitrequired	`(answers: ClarifyingAnswer[]) => void`	—	Called with every answer once the last question is answered.
onSkip	`(() => void) \| undefined`	—	Let the agent decide the rest itself.
submitting	`boolean \| undefined`	false	Disables Send and shows "Sending" while the answers go to the agent.
during	`boolean \| undefined`	false	The agent asks while it works, not before it plans.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under clarifyingQuestions in <LocaleProvider strings={{ … }}>; the table is exported as clarifyingQuestionsStrings.

Key	English
label	Questions from the agent
progress	Before I plan · question {step} of {total}
progressDuring	Question {step} of {total}
other	Other
otherLabel	Your answer
agentsPick	Agent’s pick
back	Back
letAgentDecide	Let the agent decide
sending	Sending
send	Send answers
next	Next