# Suggestion
URL: /docs/primitives/suggestion
Suggested prompts that users can click to quickly send or populate the composer.
The Suggestion primitive renders suggested prompts as clickable pills that send a message or populate the composer. Use it for welcome screen suggestions, follow-up prompts, or quick actions. You provide the layout and styling.
```tsx
import {
ThreadPrimitive,
SuggestionPrimitive,
} from "@assistant-ui/react";
function SuggestionList() {
return (
{() => }
);
}
function SuggestionItem() {
return (
);
}
```
Quick Start \[#quick-start]
A suggestion list using the iterator pattern:
```tsx
import { ThreadPrimitive, SuggestionPrimitive } from "@assistant-ui/react";
{() => }
function MySuggestionItem() {
return (
);
}
```
`ThreadPrimitive.Suggestions` iterates over available suggestions and renders your component for each one. Inside the component, `SuggestionPrimitive` parts read from the suggestion context automatically.
Runtime setup: primitives require runtime context. Wrap your UI in `AssistantRuntimeProvider` with a runtime (for example `useLocalRuntime(...)`). See [Pick a Runtime](/docs/runtimes/pick-a-runtime).
Core Concepts \[#core-concepts]
Context-Based Rendering \[#context-based-rendering]
SuggestionPrimitive parts read from a suggestion context. Use `ThreadPrimitive.Suggestions` to provide this context. It iterates over the thread's suggestions and renders your component for each one:
```tsx
{() => }
```
You can also use `ThreadPrimitive.SuggestionByIndex` to render a specific suggestion by index if you need more layout control.
Title and Description \[#title-and-description]
Suggestions support two text parts for structured display:
* **`Title`**: the primary text (e.g., "Write a blog post")
* **`Description`**: secondary text — renders the `label` field from the suggestion config (e.g., `{ prompt: "...", label: "About React Server Components" }`)
Both render a `` and accept `children` to override the value from state:
```tsx
Custom title
```
Send vs Populate \[#send-vs-populate]
`Trigger`'s `send` prop controls what happens on click:
* **`send={true}`**: immediately sends the suggestion as a new message. When the thread is running, it falls back to populating the composer instead.
* **`send={false}`** (default): populates the composer text so the user can edit before sending
```tsx
// Send immediately
// Populate composer for editing
```
clearComposer \[#clearcomposer]
When `send={false}`, the `clearComposer` prop controls whether the suggestion replaces or appends to existing composer text:
* **`clearComposer={true}`** (default): replaces the current composer text
* **`clearComposer={false}`**: appends the suggestion to the existing text
ThreadPrimitive.Suggestion (Legacy) \[#threadprimitivesuggestion-legacy]
`ThreadPrimitive.Suggestion` is a self-contained button that takes a `prompt` prop directly. The newer pattern (`ThreadPrimitive.Suggestions` + `SuggestionPrimitive` parts) is preferred for structured suggestions with title and description:
```tsx
// Legacy: still works, but limited
// Preferred: structured with title/description
{() => }
```
`ThreadPrimitive.Suggestion` also supports deprecated `autoSend` and `method` props for backwards compatibility. Prefer `send` and `clearComposer`.
Parts \[#parts]
Title \[#title]
Renders the suggestion title. Renders a `` element unless `asChild` is set.
```tsx
```
Description \[#description]
Renders the secondary suggestion description text. Renders a `` element unless `asChild` is set.
```tsx
```
Trigger \[#trigger]
Clickable button that sends or populates the suggestion. Renders a `