AI Suggested Prompts

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

Installation

npx sdaia-ui@latest add ai-suggested-prompts

Usage

import { AiSuggestedPrompts } from "sdaia-ui"

1<AiSuggestedPrompts
2  type="starter-cards"
3  variant="brand"
4  items={[
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  ]}
9  onSelect={(item) => insertPrompt(item.title)}
10/>

Types

Starter Cards

Rich cards — icon, title and description — for opening a blank conversation.

Loading demo: ai-suggested-prompts-starter-cards

Follow-up Chips

Compact pill chips that suggest quick next steps after a reply.

Loading demo: ai-suggested-prompts-follow-up-chips

Styles

Brand

High-emphasis, brand-coloured surface.

Loading demo: ai-suggested-prompts-starter-cards-brand

Neutral

White surface with a neutral border.

Loading demo: ai-suggested-prompts-starter-cards

Outline

Bordered, transparent fill.

Loading demo: ai-suggested-prompts-starter-cards-outline

API Reference

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