Skip to content

Conversation

Prompt Suggestions

Starter prompts for an empty chat and follow-up chips under an answer.

2 variantsMIT

Preview

What should we work on?

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/prompt-suggestions.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { PromptSuggestions } from "@/components/ui/prompt-suggestions";
import { ChartBar, Globe } from "@phosphor-icons/react";

// Empty chat
<PromptSuggestions
  heading="What should we work on?"
  data={[
    { id: "i18n", icon: Globe, title: "Localize the onboarding flow", hint: "German and Japanese" },
    { id: "chart", icon: ChartBar, title: "Chart last month's signups", hint: "By plan" },
  ]}
  onSelect={(_, prompt) => chat.send(prompt)}
/>

// Follow-ups under an answer
<PromptSuggestions
  variant="chips"
  data={answer.followUps}
  refreshing={loading}
  onRefresh={() => chat.suggestMore(answer.id)}
  onSelect={(_, prompt) => chat.send(prompt)}
/>

Props

PropTypeDefaultDescription
data*PromptSuggestion[]—Suggestions in display order. New ids animate in, old ones out.
variant"cards" | "chips""cards"Cards with icon and hint for an empty chat; wrapping chips for follow-ups.
onSelect*(suggestion, prompt: string) => void—Called with the suggestion and the text to send (`prompt` or the title).
onRefresh() => void—Shows a refresh button after the chips.
refreshingbooleanfalseSpins the refresh icon and disables the chips.
headingstring—Label above the suggestions; also their accessible name.
classNamestring—Extra classes for the root.
type PromptSuggestion = {
  id: string;
  title: string;
  hint?: string;   // second line on cards
  icon?: Icon;     // from @phosphor-icons/react
  prompt?: string; // text to send; defaults to the title
};