Question Tool

AI chats 190

About

Clarifying-question form for agents. Single / multi / text answer kinds with optional custom input. Self-contained port from 21st.dev Agent Elements.

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

Code

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

Usage.tsx

"use client";

import { useState } from "react";
import { QuestionTool } from "@/components/ui/question-tool";

const questions = [
  {
    kind: "single" as const,
    title: "Which direction should I take?",
    options: [
      { id: "small", label: "Small patch" },
      { id: "full", label: "Full refactor" },
    ],
    allowCustom: true,
  },
  {
    kind: "single" as const,
    title: "How cautious should the rollout be?",
    options: [
      { id: "safe", label: "Safe and incremental" },
      { id: "fast", label: "Fast rollout" },
    ],
    allowCustom: true,
  },
];

export default function Demo() {
  const [questionIndex, setQuestionIndex] = useState(1);
  const totalQuestions = questions.length;

  return (
    <div className="min-h-screen w-full flex items-center justify-center p-6 bg-white dark:bg-neutral-950">
      <div className="w-full max-w-[420px]">
        <QuestionTool
          questions={questions}
          questionIndex={questionIndex}
          totalQuestions={totalQuestions}
          onPreviousQuestion={() =>
            setQuestionIndex((prev) => Math.max(1, prev - 1))
          }
          onNextQuestion={() =>
            setQuestionIndex((prev) => Math.min(totalQuestions, prev + 1))
          }
          submitLabel="Submit"
          skipLabel="Skip"
          onSubmitAnswer={(answer) => console.log(answer)}
        />
      </div>
    </div>
  );
}