# Prompt suggestions

A React component in [Beamline](https://beamline.io/)'s [AI & agents](https://beamline.io/components/ai) category. Live demo: https://beamline.io/components/prompt-suggestions

Ready-made prompts a person can start from or follow up with: chips, cards or a list; a picked one lifts off and flies into the composer as its text, while follow-ups that are still being written hold their place and arrive one after another.

## Use it for

- The empty state of an agent conversation: three to six things the agent is good at, so the first message is one click away.
- Follow-up questions under an answer, generated while or after it streams.
- Quick replies in a voice or support agent.

## Not for

- Filters or facets ([chip-group](https://beamline.io/components/chip-group)).
- Commands with arguments typed into the composer ([prompt-bar](https://beamline.io/components/prompt-bar)'s / commands).
- One suggestion the person may take or leave, with its reasons ([recommendation-card](https://beamline.io/components/recommendation-card)).

## Anatomy

- root: a size container with an optional heading and an optional More ideas button
- suggestion: a button with an optional icon, the label and, in cards and the list, a detail line
- chips: a row of pills that wraps; cards: a grid of tiles, two across from 24rem and four across from 48rem when there are four; list: full-width rows with an arrow at the end (follow-ups)
- placeholders while follow-ups are written: the shape of each suggestion with a slow sheen
- flight: a picture of the picked suggestion that travels into the composer you name (target) and dissolves into its text

## Variants

- **layout**: chips, cards, list
- **size**: sm, md

## States

- rest
- loading (placeholders; announced once as “Writing suggestions”)
- arriving (each grows in after the one before)
- picked (the suggestion flies to the target; the others step back while it travels)
- refreshing (the old set leaves as ghosts, the new set grows in)
- empty (renders nothing)

## Keyboard

- One tab stop: Tab reaches the set at the last suggestion focused (the first at the start)
- ← → (and ↑ ↓) move between suggestions, Home and End to the ends; in right-to-left pages ← and → follow the reading direction
- Enter or Space picks the focused suggestion
- Tab moves on to More ideas when there is one

## Motion

Suggestions that arrive grow in one after another (a short stagger) and never again on the same render. A picked suggestion is acknowledged at once (onPick runs immediately) and a picture of it lifts off, travels on a short arc into the target's text box, shrinks to the text's height and dissolves as it lands; the others step back while it travels. Refreshing lets the old set fade as ghosts where they stood while the new set grows in (useFlip). Pointing at a card or row lifts its arrow; pressing presses. Reduced motion: no flight and no stagger, fades only.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `PromptSuggestion[]` | — | { id, label, prompt?, detail?, icon? }. `prompt` is the text that goes to the composer when it differs from the label. |
| `onPick` | `(suggestion: PromptSuggestion) => void` | — | Runs at once on a pick; put the prompt in the composer or send it. |
| `layout` | `"chips" \| "cards" \| "list"` | — | Default chips. |
| `size` | `"sm" \| "md"` | — | Default md. |
| `heading` | `ReactNode` | — | A short line above the set (“Try asking”, “Follow up”); it names the group. |
| `label` | `string` | — | The group's accessible name when there is no heading. Default “Suggestions”. |
| `loading` | `boolean \| number` | — | Placeholders while suggestions are written; a number sets how many. |
| `target` | `RefObject<HTMLElement \| null> \| (() => HTMLElement \| null)` | — | The composer a picked suggestion flies into. Omit for no flight. |
| `onRefresh` | `() => void` | — | Shows More ideas; give a new `items` set in return. |
| `className / classNames / style / ref` | `string / PromptSuggestionsClassNames / CSSProperties / native Ref` | — |  |

## Built from

- button
- skeleton

## Dependencies

`lucide-react`

## Import

```tsx
import { PromptSuggestions } from "@/components/prompt-suggestions/prompt-suggestions";
```

## Get it

Prompt suggestions is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in AI & agents

- [Image generation](https://beamline.io/components/image-generation): The frame an AI image is generated into: a field of brand-hued pixels breathes with the progress while the model works, then the image arrives —…
- [Flowchart](https://beamline.io/components/flowchart): A workflow as steps on a dotted canvas: a trigger, conditions that branch into paths side by side, actions and waits, read top to bottom; during a run…
- [Run trace](https://beamline.io/components/run-trace): One agent run as a waterfall: every step (model calls, tools, retrieval, checks, sub-agents) nested under the step that started it, each a bar on a…
- [Answer compare](https://beamline.io/components/answer-compare): Two answers to the same prompt side by side, and a person's verdict: A is better, a tie, B is better, or both are bad, with the reasons that decided it…
- [Response](https://beamline.io/components/response): An assistant's answer as streamed markdown in the system's reading type: bursty tokens flow in at an even pace, each new word fades in through a short…
- [Chat thread](https://beamline.io/components/chat-thread): People talking to people: messages grouped by person and day, reactions, delivery and read receipts that glide to the newest message read, who is typing…
- [Model picker](https://beamline.io/components/model-picker): Choose the AI model for a request by what it can do and what it costs: a trigger with the model's name opens a searchable list grouped by provider, with…
- [Task rows](https://beamline.io/components/task-rows): Background work an agent is doing, one row per task: status as a glyph and a word, what it produced, how long it has run or took, a progress bar while…
- [Conversation](https://beamline.io/components/conversation): The scrolling column of a conversation: follows new content while you are at the bottom, stops when you scroll up to read, and offers a way back; shared…
- [Context cards](https://beamline.io/components/context-cards): The knowledge an agent retrieved before it answered: one card per chunk with what it is about, the text it read with the search words marked, how…
- [Plan](https://beamline.io/components/plan): An agent's plan: numbered steps with live status, progress, and Approve / Edit / Reject when it needs sign-off; approving shows progress, and a refusal…
- [Approval card](https://beamline.io/components/approval-card): The agent stops and asks before it acts: what it wants to do, exactly what that changes, any choices it needs, and Approve or Reject; both run your…
- [Tool call](https://beamline.io/components/tool-call): One tool call in an agent's run: status, what it did and a short result on one quiet row that opens to the exact input and output; stops for permission…
- [Recommendation card](https://beamline.io/components/recommendation-card): One suggestion from the agent that the person may take or leave: what it suggests, why, the expected effect and how sure it is (a meter and a word…
- [Citations](https://beamline.io/components/citations): Inline numbered citations that preview their source on hover or focus, plus a numbered source list; streamed answers flow in at an even pace with the…
- [Reasoning](https://beamline.io/components/reasoning): The agent's trace, fed by your stream: a shimmering label and the seconds so far while it works, then "Thought for N seconds"; steps that check off…
- [Attachment](https://beamline.io/components/attachment): A file tile: preview or typed glyph with the type named, name, size, upload progress, error with retry, and a keyboard-reachable remove.
- [Prompt bar](https://beamline.io/components/prompt-bar): The agent composer: a field that grows, @ to add a source, / for a command, a model picker, files and dictation, and one button that sends with progress…
- [Selection actions](https://beamline.io/components/selection-actions): Select a passage and hand it to the agent: a bar over the selection with quick actions, your own instruction and More; while the agent works it says so…
- [Message](https://beamline.io/components/message): One turn in a conversation with an agent: the person's words in a quiet bubble, the agent's answer on the page with its orb mark, trace, tool calls and…