StarterCategories
Starter questions grouped by category for an empty chat. The category row is a group of buttons with aria-pressed that control the list under it; the starters are Suggestions chips. The first category is picked by default (defaultValue={null} starts with none); pass value and onChange to control it. Put it in emptyState.content of AgentChat, which renders host content under the greeting in both the welcome and center layouts, and fill the composer with the picked starter through draft.
Getting Started
$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-reactExamples
Empty chat with categories
API reference
Prop
Type
Required
categories
StarterCategory[]
Yes
value
string | null
No
Id of the picked category, `null` when none is; controlled
defaultValue
string | null
No
Category picked initially when uncontrolled, the first one by default
onChange
(id: string | null) => void
No
Called with the picked category, or with `null` when the picked one is clicked again
onSelect
(item: SuggestionItem) => void
Yes
Called with the starter the user clicked
align
'start' | 'center'
No
Alignment of both rows, `start` by default as in `ChatWelcome`
labels
Partial<StarterCategoriesLabels>
No
Overrides of the default English labels
className
string
No
Class name added to the root element
style
React.CSSProperties
No
Inline styles added to the root element