Skip to content

Conversation

Agent Question

Agent asks with choice cards, marks its own suggestion and reason, and accepts a pick, several picks or free text.

2 variantsMIT

Preview

Claude asks

Which locale should the new onboarding emails ship in first?

Suggests German — the glossary is done and it's the biggest group.

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/agent-question.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { AgentQuestion } from "@/components/ui/agent-question";

export function Clarify({ question, agent }: { question: PendingQuestion; agent: Agent }) {
  return (
    <AgentQuestion
      agent="Claude"
      data={{
        question: question.text,
        options: question.options, // { id, label, description?, icon? }[]
        multiple: question.multiSelect,
        allowOther: true,
        suggested: question.recommendation, // { optionId, reason }
      }}
      onSubmit={(answer) => agent.answer(question.id, answer)}
      onDelegate={() => agent.answer(question.id, { delegate: true })}
      onUndo={() => agent.reopen(question.id)}
    />
  );
}

Props

PropTypeDefaultDescription
data*AgentQuestionData—The question, the options as cards, the agent's suggestion with a reason, and whether to allow several answers or free text.
status"pending" | "answered" | "delegated"—Leave unset and the card settles on its own when the user answers. Set it to restore a past thread.
answerQuestionAnswer—The answer to show once answered.
onSubmit(answer: QuestionAnswer) => void—Single choice: called as soon as a card is clicked. Multiple: called from the Send pill.
onDelegate() => void—Shows “Let the agent decide”. The agent should go with its suggestion.
onUndo() => void—Called from the Undo pill, shown for undoMs after answering.
undoMsnumber4000How long Undo stays available.
selectedstring[]—Controlled selection for multiple-choice questions.
onSelectedChange(ids: string[]) => void—Called when a card is toggled.
agentstring"Agent"Name shown above the question, e.g. “Claude asks”.
classNamestring—Extra classes for the root element.
type AgentQuestionData = {
  question: string;
  options: { id: string; label: string; description?: string; icon?: Icon }[];
  multiple?: boolean;   // toggle cards, then send
  allowOther?: boolean; // adds a "Something else…" card
  suggested?: { optionId: string; reason: string };
};

type QuestionAnswer = {
  optionIds: string[];
  other?: string;
};

// Keyboard: arrow keys move between cards, Enter or Space picks.