SuggestionChips

Grid of suggestion buttons for welcome screens and contextual prompts.

Overview

SuggestionChips renders a grid of suggestion buttons from a static list. Each chip wraps ThreadPrimitive.Suggestion which handles setting composer text or auto-sending on click.

Demo

Click any chip to send the suggestion immediately.

<SuggestionChips
  suggestions={[
    {
      prompt: "Write a poem about the ocean",
      label: "Write a poem",
      description: "about the ocean",
    },
    "Help me plan a trip",
  ]}
/>

<div className="grid grid-cols-2 gap-2">
  <ThreadPrimitive.Suggestion
    prompt="Write a poem about the ocean"
    send
    className="..."
  >
    <span className="font-medium">Write a poem</span>
    <span className="text-muted">about the ocean</span>
  </ThreadPrimitive.Suggestion>

  <ThreadPrimitive.Suggestion
    prompt="Help me plan a trip"
    send
    className="..."
  >
    <span className="font-medium">Help me plan a trip</span>
  </ThreadPrimitive.Suggestion>
</div>

Simple Strings

You can also pass plain strings — they're used as both prompt and label.

<SuggestionChips
  suggestions={["Tell me a joke", "What's the weather?", "Write an email", "Summarize this article"]}
/>

Props

Prop

Type

Underlying Primitives

ThreadPrimitive.Suggestion — handles click-to-send and disabled state
Does not require a message context — works at the thread level
Typically used inside ThreadPrimitive.Empty or ThreadEmpty