POLPOUI

ChatAskUser

Multi-question form for agent-initiated user prompts.

ChatAskUser renders an interactive form when the agent needs input from the user. Supports single questions (flat layout) and multi-question wizards with step navigation, option selection, custom text input, and a summary step.

Preview

Single question

Database

Which database do you want to use?

Multi-step wizard (3 questions)

Framework

Which framework should I use?

Import

import { ChatAskUser, type ChatAskUserProps } from "@polpo-ai/chat";

AskUserQuestion

FieldTypeDescription
idstringUnique question identifier
questionstringThe question text
headerstringOptional header/label above the question
options{ label: string; description?: string }[]Selectable options
multiplebooleanAllow selecting multiple options
custombooleanShow a custom text input (default: true)

Props

PropTypeDefaultDescription
questionsAskUserQuestion[]requiredQuestions to present to the user
onSubmit(answers: { questionId: string; selected: string[] }[]) => voidrequiredCalled when the user submits answers
disabledboolean--Whether the panel is disabled (e.g. already submitted)

Usage

Single question

<ChatAskUser
  questions={[
    {
      id: "db",
      question: "Which database do you want to use?",
      header: "Database",
      options: [
        { label: "PostgreSQL", description: "Recommended for production" },
        { label: "SQLite", description: "Great for development" },
      ],
    },
  ]}
  onSubmit={(answers) => console.log(answers)}
/>

Multi-question wizard

When questions has more than one entry, a wizard layout is shown with step tabs, back/next navigation, and a summary step.

<ChatAskUser
  questions={[
    {
      id: "db",
      question: "Which database?",
      header: "Database",
      options: [{ label: "PostgreSQL" }, { label: "SQLite" }],
    },
    {
      id: "auth",
      question: "Which auth provider?",
      header: "Authentication",
      options: [{ label: "Clerk" }, { label: "NextAuth" }],
    },
  ]}
  onSubmit={(answers) => sendToolResult(answers)}
/>

On this page