Question Tool

AI chats 12

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: "text" as const,
    title: "What output format do you want?",
    placeholder: "e.g. JSON, Markdown, plain text…",
  },
  {
    kind: "text" as const,
    title: "Anything else I should know?",
    placeholder: "Optional context for the agent",
  },
];

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>
  );
}