Try these prompts:
Click a suggestion to get started
"use client";
import { useState } from "react";
import {
ChatSuggestion,
ChatSuggestions,
ChatSuggestionsContent,
ChatSuggestionsDescription,
ChatSuggestionsHeader,
ChatSuggestionsTitle,
} from "@/components/ui/chat-suggestions";
export function ChatSuggestionsDemo() {
const [selectedSuggestion, setSelectedSuggestion] = useState<string>("");
const suggestions = [
"Tell me about your features",
"How do I get started?",
"Show me an example",
"What are the pricing options?",
];
return (
<div className="flex flex-col gap-4 p-4">
<ChatSuggestions>
<ChatSuggestionsHeader>
<ChatSuggestionsTitle>
Try these prompts:
</ChatSuggestionsTitle>
<ChatSuggestionsDescription>
Click a suggestion to get started
</ChatSuggestionsDescription>
</ChatSuggestionsHeader>
<ChatSuggestionsContent>
{suggestions.map((suggestion) => (
<ChatSuggestion
key={suggestion}
onClick={() => setSelectedSuggestion(suggestion)}
>
{suggestion}
</ChatSuggestion>
))}
</ChatSuggestionsContent>
</ChatSuggestions>
{selectedSuggestion && (
<div className="p-3 bg-muted rounded-md text-sm">
<span className="font-medium">Selected:</span>{" "}
{selectedSuggestion}
</div>
)}
</div>
);
}
Installation
pnpm dlx shadcn@latest add @simple-ai/chat-suggestions
About
The Chat Suggestions component provides a composable way to display prompt suggestions to users in your chat interface. Following the shadcn/ui design philosophy, it's built with small, reusable pieces that can be composed together to create flexible layouts.
Perfect for onboarding new users, suggesting common queries, or providing quick actions in empty chat states.
Usage
import {
ChatSuggestion,
ChatSuggestions,
ChatSuggestionsContent,
ChatSuggestionsDescription,
ChatSuggestionsHeader,
ChatSuggestionsTitle,
} from "@/components/ui/chat-suggestions"Basic Usage
<ChatSuggestions>
<ChatSuggestionsTitle>Try these prompts:</ChatSuggestionsTitle>
<ChatSuggestionsContent>
<ChatSuggestion onClick={() => console.log("What can you help me with?")}>
What can you help me with?
</ChatSuggestion>
<ChatSuggestion onClick={() => console.log("Show me examples")}>
Show me examples
</ChatSuggestion>
</ChatSuggestionsContent>
</ChatSuggestions>With Header and Description
<ChatSuggestions>
<ChatSuggestionsHeader>
<ChatSuggestionsTitle>Quick start</ChatSuggestionsTitle>
<ChatSuggestionsDescription>
Click a suggestion to get started
</ChatSuggestionsDescription>
</ChatSuggestionsHeader>
<ChatSuggestionsContent>
<ChatSuggestion>Tell me about your features</ChatSuggestion>
<ChatSuggestion>How do I get started?</ChatSuggestion>
</ChatSuggestionsContent>
</ChatSuggestions>Examples
Simple Suggestions
A minimal chat suggestions layout with just a title and suggestions.
Quick start:
"use client";
import {
ChatSuggestion,
ChatSuggestions,
ChatSuggestionsContent,
ChatSuggestionsHeader,
ChatSuggestionsTitle,
} from "@/components/ui/chat-suggestions";
export function ChatSuggestionsDemoSimple() {
const suggestions = [
"What can you help me with?",
"Show me examples",
"Explain the basics",
];
return (
<div className="p-4">
<ChatSuggestions>
<ChatSuggestionsHeader>
<ChatSuggestionsTitle>Quick start:</ChatSuggestionsTitle>
</ChatSuggestionsHeader>
<ChatSuggestionsContent>
{suggestions.map((suggestion) => (
<ChatSuggestion key={suggestion}>
{suggestion}
</ChatSuggestion>
))}
</ChatSuggestionsContent>
</ChatSuggestions>
</div>
);
}