Conversation Starter

An empty-state component shown before a conversation begins. Displays a heading, optional subheading, and a set of suggestion chips. Clicking a chip fires onSuggestionClick with the associated prompt string so the parent can pre-fill the input or immediately send a message.

How can I help you today?

Choose a suggestion below or type your own message.

import { ConversationStarter } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add conversation-starter

Import

import.tsx

import { ConversationStarter } from "@aetherstack/patterns"

Usage

conversation-starter.tsx

import { ConversationStarter } from "@aetherstack/patterns"
import { Sparkles, Code } from "lucide-react"

export function MyConversationStarter() {
  return (
    <ConversationStarter
      title="How can I help you today?"
      description="Choose a suggestion or type your own message."
      suggestions={[
        {
          label: "Explain a concept",
          icon: <Sparkles className="h-4 w-4" />,
          prompt: "Explain how React hooks work",
        },
        {
          label: "Review my code",
          icon: <Code className="h-4 w-4" />,
          prompt: "Review this code for issues",
        },
      ]}
      onSuggestionClick={(prompt) => setInputValue(prompt)}
    />
  )
}

Props

Prop	Type	Default	Description
title	string	"How can I help you today?"	Heading text displayed at the top of the component.
description	string	—	Optional subheading text shown below the title.
suggestions	Suggestion[]	—	Array of suggestion chips. Each item requires label and prompt; icon is optional.
onSuggestionClick	(prompt: string) => void	—	Called with the prompt string when the user clicks a suggestion chip.
className	string	—	Additional CSS classes applied to the root container.

* Required

Accessibility

→Suggestion chips are rendered as button elements with the full prompt text as aria-label.
→Icons within chips are marked aria-hidden to prevent redundant announcements.
→The heading uses an appropriate semantic heading level based on document context.