Agentic

Suggestion

Prompts the person can send in one click, as a row of pills above the composer. The row stays one line, scrolling sideways with faded edges.

idle

Usage

import { Suggestion, Suggestions } from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<Suggestions>
	<Suggestion />
</Suggestions>

With the AI SDK

The label is the message. Send it as is, and disable the row while the agent answers.

import { useChat } from "@ai-sdk/react";
import { Suggestion, Suggestions } from "@mizen-labs/ui";

const starters = ["Fix the failing build", "Write tests for the form"];

export function Starters() {
	const { sendMessage, status } = useChat();
	const busy = status === "submitted" || status === "streaming";
	return (
		<Suggestions>
			{starters.map((starter) => (
				<Suggestion
					disabled={busy}
					key={starter}
					onClick={(text) => sendMessage({ text })}
					suggestion={starter}
				/>
			))}
		</Suggestions>
	);
}

With TanStack AI

Send the suggestion as the user's message with the chat's send function.

import { useChat } from "@tanstack/ai-react";
import { Suggestion, Suggestions } from "@mizen-labs/ui";

const starters = ["Fix the failing build", "Write tests for the form"];

export function Starters() {
	const { isLoading, sendMessage } = useChat();
	return (
		<Suggestions>
			{starters.map((starter) => (
				<Suggestion
					disabled={isLoading}
					key={starter}
					onClick={(text) => sendMessage(text)}
					suggestion={starter}
				/>
			))}
		</Suggestions>
	);
}

Examples

With icons

An icon before each prompt says what kind of task it starts.

Recommendations

Guidance	Practice
Do	Show a few starters above an empty composer, and send the label as the message as is. Disable the row while the agent works.

Usage boundaries

Guidance	Boundary
Scope	Suggestion sends nothing itself. onClick receives the prompt, and the application sends it.
Scope	Keep each prompt short enough to read at a glance; long prompts make the row scroll.

API reference

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

Prop	Type	Default	Description
`Suggestion.suggestion`	`string`	`—`	The prompt. It is the pill's label and the text passed to onClick.
`Suggestion.onClick`	`(suggestion: string) => void`	`—`	Called with the suggestion. Send it as the message as is.
`Suggestion.icon`	`ReactNode`	`—`	A glyph before the words, such as a bug for a fix.
`Suggestion.disabled`	`boolean`	`false`	Disable the row while the agent works, so nothing sends mid-turn.
`Suggestions.aria-label`	`string`	`"Suggestions"`	Names the row, a group of buttons, for screen readers.