Docs
Prompt Suggestions

Prompt Suggestions

A component that displays clickable prompt suggestions for empty chat states.

Try one of these prompts!

The PromptSuggestions component displays a grid of predefined prompts that users can click to quickly start a conversation.

Installation

npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/prompt-suggestions.json

Usage

import { PromptSuggestions } from "@/components/ui/prompt-suggestions"
 
export function PromptSuggestionsDemo() {
  const append = (message: { role: "user"; content: string }) => {
    // Handle appending message
  }
 
  return (
    <PromptSuggestions
      label="Get started with some examples"
      append={append}
      suggestions={[
        "Tell me a joke",
        "What's the weather like today?",
        "Write a poem about cats",
      ]}
    />
  )
}

Props

PropTypeDescription
labelstringThe heading text displayed above the suggestions
append(message: { role: "user"; content: string }) => voidFunction called when a suggestion is clicked
suggestionsstring[]Array of suggestion strings to display as buttons
Markdown RendererTyping Indicator