Ask

Installation

npx shadcn@latest add layishsieger/registry/ask

The CLI copies the block into your project. You own the source. Mount a root <Toaster /> from @/components/ui/sonner if you enable toastOnSubmit.

Usage

import { Ask } from "@/components/ask"

const items = [
  {
    name: "direction",
    title: "Which direction?",
    required: true,
    choices: [
      {
        value: "clarify",
        label: "Ask a clarifying question",
        description: "Gather missing context before writing.",
      },
      {
        value: "draft",
        label: "Draft a first version",
        description: "Produce a starting point to iterate on.",
      },
    ],
  },
]

export function Example() {
  return (
    <Ask
      items={items}
      toastOnSubmit
      onResult={(result) => {
        // HITL: addToolOutput({ output: result })
      }}
    />
  )
}

onResult is the HITL payload. Submit returns { status: "submitted", answers }. Cancel returns { status: "canceled" }. Pass that object to addToolOutput({ output }).

Variants

variant="plain" drops the card background and uses bordered answer rows (Questionnaire look). Choice description adds optional subtext under each label.

Auto-advance

First pick auto-advances. Other Enter commits and advances. After Back, Next comes back.

Review

Set review on the batch. Last-slide auto-advance and Other commit go to review, not submit.

Cancel

Set cancel on the batch. Confirm before discarding answers.

Keyboard

Hold ⌘ (Command / Meta) or Ctrl to reveal those navigation shortcuts as inline Kbd chips on Previous / Skip / Next / Submit when shortcutHints is enabled (default). Set shortcuts={false} to disable answer keys and hints, or shortcutHints={false} to keep bindings without the hold-to-reveal chips. Choice keys stay as row badges. With focusable, shortcuts only run while the card is interactively focused — click the card or its focus surface, and use Tab to move between cards in an InteractiveFocusProvider.

AI SDK HITL

onResult is the tool output. The host passes it to addToolOutput.

API

Ask