A "Get started" empty state — brand starter cards give users a confident way to begin a conversation. Pair starter cards on a blank screen with follow-up chips after a reply.
Loading demo: ai-suggested-prompts-real-world
npx sdaia-ui@latest add ai-suggested-prompts
import { AiSuggestedPrompts } from "sdaia-ui"1<AiSuggestedPrompts2type="starter-cards"3variant="brand"4items={[5{ id: 'summarize', title: 'Summarize a document', description: 'Upload a file and get the key points' },6{ id: 'explain', title: 'Explain a concept', description: 'Break down a complex topic simply' },7{ id: 'email', title: 'Draft an email', description: 'Write a professional message in seconds' },8]}9onSelect={(item) => insertPrompt(item.title)}10/>
Rich cards — icon, title and description — for opening a blank conversation.
Loading demo: ai-suggested-prompts-starter-cards
Compact pill chips that suggest quick next steps after a reply.
Loading demo: ai-suggested-prompts-follow-up-chips
High-emphasis, brand-coloured surface.
Loading demo: ai-suggested-prompts-starter-cards-brand
White surface with a neutral border.
Loading demo: ai-suggested-prompts-starter-cards
Bordered, transparent fill.
Loading demo: ai-suggested-prompts-starter-cards-outline
Prop | Type | Default | Required |
|---|---|---|---|
items | AiSuggestedPromptItem[] | — | required |
type | 'starter-cards' | 'follow-up-chips' | 'starter-cards' | optional |
variant | 'neutral' | 'brand' | 'outline' | 'neutral' | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |
icon | string | sparklesStroke | optional |
showIcon | boolean | true | optional |
onSelect | (item: AiSuggestedPromptItem, index: number) => void | — | optional |