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 https://r.assistant-ui.com/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}>      <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.

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 and not currently running. 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