Follow-Up Suggestions

Render runtime-generated follow-up prompt chips after an assistant response.

How should I improve onboarding for my AI assistant?

Start by mapping the first-run path, then add a few suggested prompts that help users discover the highest-value workflows.

ThreadFollowupSuggestions renders the current thread's runtime suggestions as clickable prompt chips. Use it for follow-up prompts that arrive after a response, such as suggested next questions, refinements, or task shortcuts.

This component reads from thread.suggestions. For static welcome-screen prompts, use ThreadPrimitive.Suggestions instead.

Getting Started

Add `follow-up-suggestions`

npx shadcn@latest add @assistant-ui/follow-up-suggestions

The @assistant-uinamespace resolves the Radix or Base UI flavor from your project's style through the style-aware registry entry in components.json. Without that entry, add by direct URL instead:

npx shadcn@latest add https://r.assistant-ui.com/base/follow-up-suggestions.json

Main Component

npm install @assistant-ui/react

components/assistant-ui/follow-up-suggestions.tsx

"use client";import { AuiIf, useAuiState, ThreadPrimitive } from "@assistant-ui/react";import type { FC } from "react";export const ThreadFollowupSuggestions: FC = () => {  const suggestions = useAuiState((s) => s.thread.suggestions);  return (    <AuiIf      condition={(s) =>        !s.thread.isEmpty &&        !s.thread.isRunning &&        s.thread.suggestions.length > 0      }    >      <div className="aui-thread-followup-suggestions flex min-h-8 items-center justify-center gap-2">        {suggestions.map((suggestion, idx) => (          <ThreadPrimitive.Suggestion            key={idx}            className="aui-thread-followup-suggestion bg-background hover:bg-muted/80 rounded-full border px-3 py-1 text-sm transition-colors ease-in"            prompt={suggestion.prompt}            method="replace"            autoSend          >            {suggestion.prompt}          </ThreadPrimitive.Suggestion>        ))}      </div>    </AuiIf>  );};

This adds a /components/assistant-ui/follow-up-suggestions.tsx file to your project. The default thread component already renders ThreadFollowupSuggestions, so installing it standalone is only needed when you build your own thread layout.

Provide runtime suggestions

Pass suggestions through your runtime. External-store runtimes, AI SDK runtimes, and local runtimes can all surface follow-up prompts through thread.suggestions.

/app/assistant.tsx

const runtime = useExternalStoreRuntime({
  messages,
  convertMessage,
  onNew: async (message) => {
    // append the message in your store
  },
  suggestions: [
    { prompt: "Summarize this as action items" },
    { prompt: "Write a shorter version" },
  ],
});

Render after messages

Place ThreadFollowupSuggestions near the bottom of your thread viewport, after the assistant message list and before the composer.

/components/assistant-ui/thread.tsx

import { ThreadFollowupSuggestions } from "@/components/assistant-ui/follow-up-suggestions";

const ThreadViewportFooter = () => {
  return (
    <ThreadPrimitive.ViewportFooter>
      <ThreadPrimitive.ScrollToBottom />
      <ThreadFollowupSuggestions />
      <Composer />
    </ThreadPrimitive.ViewportFooter>
  );
};

Behavior

The component only renders when the thread is not empty, not currently running, and has at least one suggestion. Each suggestion uses ThreadPrimitive.Suggestion, replaces the composer text with the prompt, and sends it immediately.

Thread - Complete chat interface with message list and composer
Suggestions guide - Runtime and static suggestion patterns