Standard

Follow-up suggestions

Post-response chips that propose the next reasonable move, keeping momentum without new typing.

MAsk MilkyQ3 retention

Why did churn go up in Q3?

Milky

Churn rose from 2.1% to 3.4%, and almost all of it came from accounts under 50 seats. Only 41% of them finished setup in their first month, against 78% for larger accounts.

Most cancelled within weeks of the 1 July price change. I can list the 23 accounts that churned and what each said on the way out.

Follow-ups from this answer

Ask a follow-up…

Try it: Pick a next step under the answer. The new answer brings its own follow-ups, and the slow one says so before you click.

In the wild

How one product ships this pattern. Click a screenshot to enlarge it.

End of a Perplexity answer about EU AI Act enforcement that offers a checklist for product teams, followed by five suggested follow-ups: two deeper research tasks marked Computer, and three reply-style options. — Perplexity
Follow-ups are drawn from the answer itself: deeper research tasks are marked separately from quick replies that pick up the answer's own offer or narrow the topic.
Source: Perplexity (captured Sep 2026) ↗

When to use

Multi-turn work where the next step is predictable and cheap to offer.

Seen in

Perplexity related questions, Claude suggested follow-ups, Google AI Mode follow-on queries.

For engineers

Generate follow-ups from the response, not the prompt, and cap at three to protect scan cost.

Build prompt

A neutral, component-only prompt for a coding agent. Edit the stack block or anything else to fit your project, then copy it.

# Build the "Follow-up suggestions" pattern: `FollowUpChips`

## Stack (edit this block to match your project)
- React 18+ with TypeScript: one function component, typed props, no `any`.
- Tailwind CSS, using your design system's tokens if you have them.
- Presentational only: data comes in through props, decisions go out through callbacks. No fetching or global state inside.
- If your codebase already has conventions (naming, shared components, tokens), follow them over this spec.

## What the pattern is for
Post-response chips that propose the next reasonable move, keeping momentum without new typing.

Use it when: Multi-turn work where the next step is predictable and cheap to offer.

## What to build
A short row of next-step chips shown under an AI response, generated from what the response said. Each chip states its cost or duration, so a cheap reply and an expensive run never look the same. It renders at the end of a chat or answer message.

### Props
- `suggestions`: Array<{ id: string; text: string; kind: "reply" | "run"; costLabel?: string }>, at most three, e.g. { text: "Research the price change by cohort", kind: "run", costLabel: "Deep research, about 2 min" }.
- `label?`: string, a heading such as "Follow-ups from this answer".
- `status`: "loading" | "ready" | "used" | "hidden", controlled by the parent.
- `usedId?`: string, the chip that was chosen, shown as selected in the used state.
- `onPick(id: string)`: called when a chip is chosen. The component never sends the message or starts the run itself.
- `onEdit?(text: string)`: puts the chip text into the composer for editing instead of sending.

### States it must render
- Loading: up to three slim placeholders after the response, so text does not jump when chips arrive.
- Ready: up to three chips; quick replies show "Instant" or nothing, runs show their cost label and a distinct marker.
- Used: the chosen chip stays visible as selected and the others are disabled, so the thread shows which path was taken.
- Hidden: nothing renders, used when the response has no sensible next step.

### Interactions
- Clicking a quick-reply chip calls `onPick` immediately.
- Clicking a run chip shows its cost on the chip and requires a second confirm (or the parent's own gate) before `onPick` fires.
- An edit affordance on each chip calls `onEdit` with its text, so a person can adjust before sending.

### Edge cases
- More than three suggestions passed in: render only the first three.
- Near-duplicate suggestions: the component cannot judge meaning, but it must drop exact or case-insensitive duplicates.
- A run chip with no `costLabel`: show "Cost unknown" rather than presenting it like a free reply.
- A new response arrives: the previous message's chips switch to used or hidden so only the latest set is actionable.

## Must avoid
Suggesting three variations of the same question, or chips that fire expensive runs with no cost signal.

## Engineering constraint
Generate follow-ups from the response, not the prompt, and cap at three to protect scan cost.

## Accessibility
- Chips are a labelled group of buttons; the cost label is part of each button's accessible name.
- Announce once when suggestions become available; do not move focus away from the response.

## House rules
- Real `<button>`/`<input>` elements, full keyboard use, visible focus; announce status changes with `aria-live="polite"`; respect `prefers-reduced-motion`.
- All user-facing text comes from props (or a `labels` prop) so it can be translated.
- One consistent accent marks anything the AI made or is doing; amber means "needs a person", red means risky, green means done. Never rely on colour alone.
- Fits a 360 px wide container without horizontal scrolling.

## Acceptance checks
- [ ] Every state above can be rendered by passing props, with no internal fake data.
- [ ] Every interaction and edge case above behaves as described.
- [ ] Nothing in "Must avoid" can happen with this component.

## Deliver
1. The component file with its exported prop types.
2. A short usage example that renders each state.

Download this prompt as Markdown, or every prompt as JSON for an agent.

Critique checklist for wayfinders

0 of 4 checked

These questions apply to every pattern in this family. Ticks are saved in this browser.

Can a first-time user act without typing anything?
Do suggestions reflect the user's actual context, not a generic list?
Is the system's boundary stated somewhere findable?
Do nudges stop appearing once the behaviour is learned?