PromptSuggestions

PromptSuggestions

<PromptSuggestions
  layout="cards"
  suggestions={[
    { id: 'summarize', icon: <Sparkle />, label: 'Summarize this article', hint: 'TL;DR in 3 bullets' },
    { id: 'translate', icon: <Globe />,    label: 'Translate to Korean',     hint: 'Casual register' },
    { id: 'extract',   icon: <Search />,   label: 'Extract action items',    hint: 'As a checklist' },
  ]}
  onSelect={(s) => composer.send(s.label as string)}
/>

Install: @helixui/core

import { PromptSuggestions, type PromptSuggestion } from '@helixui/core'

status: stable · since: 0.3.0

Tags: ai, starters, follow-ups, chips

Anatomy

( Suggestion 1 ) ( Suggestion 2 ) ( Suggestion 3 )       ← chips
┌─────────────────┐ ┌─────────────────┐
│  Title          │ │  Title          │   ← cards
│  description    │ │  description    │
└─────────────────┘ └─────────────────┘

Layout

• display — flex
• width — fill
• height — content
• intrinsicSize — wraps; chip row or card grid
• stackable — false
• fullBleed — false

Visual

Either a wrapping row of pill-shaped chips (compact) or a 2-column card grid (richer). Tapping a suggestion fires onSelect with the prompt text.

Props

Name	Type	Default	Description
suggestions	PromptSuggestion[]	—	Required. Each has id, label, optional hint, icon.
onSelect	(s) => void	—	Called when the user picks a suggestion.
layout	'chips' | 'cards'	chips	Compact wrap-around chips or larger grid cards.
label	string	Suggested prompts	aria-label on the wrapping group.

Tokens used

color.bg.surface.default, color.bg.action.neutral.default, color.border.default, color.border.strong, color.border.focus, color.text.primary, color.text.muted, color.text.action.brand, radius.md, space.2, space.3, space.4, font.family.sans, font.size.sm, font.size.xs, font.weight.medium

Accessibility

Notes

• The wrapper is role="group" with an aria-label.
• Each suggestion is a <button> so it’s focusable and activatable with Enter / Space.

Composes with

Component	Relation	Note
ChatComposer	sibling	Sits above the composer in an empty state.
EmptyState	alternative	Use EmptyState for non-AI empty states.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

AI conversation starters

“three suggested prompts as chips”

<PromptSuggestions
  variant="chips"
  suggestions={[{ id: '1', text: 'Summarize this' }, { id: '2', text: 'Translate to Korean' }]}
  onSelect={s => send(s.text)}
/>

Related

• ChatComposer