Question

AI chats

About

A composable form for asking a human-in-the-loop question in an AI chat, letting the user pick options, type free text, or both before submitting a response.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Question to your project and fits it to your theme.

Code

How Question is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  Question,
  QuestionActions,
  QuestionDescription,
  QuestionInput,
  QuestionOption,
  QuestionOptions,
  QuestionPrompt,
  QuestionSubmit,
} from "@/components/ui/question";

export default function QuestionDemo() {
  return (
    <div className="w-full max-w-md">
      <Question
        onSubmit={async ({ selectedValues, text }) => {
          console.log({ selectedValues, text });
        }}
        selectionMode="multiple"
      >
        <QuestionPrompt>What should the project include?</QuestionPrompt>
        <QuestionDescription>
          Choose any features and add details if needed.
        </QuestionDescription>
        <QuestionOptions aria-label="Project features">
          <QuestionOption value="authentication">Authentication</QuestionOption>
          <QuestionOption value="database">Database</QuestionOption>
          <QuestionOption value="payments">Payments</QuestionOption>
        </QuestionOptions>
        <QuestionInput
          aria-label="Additional requirements"
          placeholder="Add any other requirements…"
        />
        <QuestionActions>
          <QuestionSubmit>Answer</QuestionSubmit>
        </QuestionActions>
      </Question>
    </div>
  );
}