Agentic

Question Card

The agent asks the person to choose, one question at a time: options with number keys, an answer in their own words, and Skip. Once answered, it folds into one line.

idle

Usage

import { QuestionCard } from "@mizen-labs/ui";

With the AI SDK

Make asking a client-side tool. The model sends the questions as its input, and addToolOutput returns the answers, so the agent continues with them.

import { useChat } from "@ai-sdk/react";
import { QuestionCard, type QuestionCardQuestion } from "@mizen-labs/ui";

// askQuestions is a client-side tool: the model sends the questions as its
// input, and the person's answers become its output.
export function AskQuestions({ part }: { part: AskQuestionsPart }) {
	const { addToolOutput } = useChat();
	const questions: QuestionCardQuestion[] = part.input.questions;
	if (part.state === "output-available") {
		return (
			<QuestionCard answers={part.output} questions={questions} status="answered" />
		);
	}
	return (
		<QuestionCard
			onSubmit={(answers) =>
				addToolOutput({
					output: answers,
					tool: "askQuestions",
					toolCallId: part.toolCallId,
				})
			}
			questions={questions}
			status="pending"
		/>
	);
}

With TanStack AI

Use a client tool whose input is the questions, and return the answers as its result.

import { QuestionCard, type QuestionCardQuestion } from "@mizen-labs/ui";

// A client tool whose input is the questions. Return the answers as its
// result with your app's handler for client tools.
export function AskQuestions({ part, answer }: { part: { input?: { questions: QuestionCardQuestion[] }; output?: Record<string, string[]> }; answer: (answers: Record<string, string[]>) => void }) {
	if (!part.input) return null;
	return (
		<QuestionCard
			answers={part.output}
			onSubmit={answer}
			questions={part.input.questions}
			status={part.output ? "answered" : "pending"}
		/>
	);
}

Examples

Answered

A single question from history folds into the question and its answer.

Recommendations

Guidance	Practice
Do	Keep each question to one decision with two to five options, put the trade-off in each option's description, and leave Something else on unless the options cover every case.

Usage boundaries

Guidance	Boundary
Scope	The application sends the answers back to the agent. Question Card collects them and reports them once, after the last question.
Scope	Ask only what the agent cannot decide itself. Use Approval Card to ask permission for one action.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`questions`	`readonly { id; title; description?; options: { label; description? }[]; multiple?; other? }[]`	`—`	Asked one at a time. Each has an id, a title, options with an optional description, and may allow several answers or turn off Something else.
`status`	`"pending" \| "answered"`	`—`	pending asks; answered folds into one line: the question and answer for one question, or Answered 2 of 3 questions for several.
`onSubmit`	`(answers: Record<string, string[]>) => void`	`—`	Called once after the last question with each question's chosen labels or typed text, by id. A skipped question has an empty list.
`answers`	`Record<string, string[]>`	`—`	The answers given, shown in the folded line and its record. Pass them for a card from history.