║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

import ComponentCodePreview from "@/components/app/component-code-preview" import { generateMetadata } from "../utils/metadata" import { PromptSuggestionBasic } from "./prompt-suggestion-basic" import { PromptSuggestionHighlight } from "./prompt-suggestion-highlight" import { PromptSuggestionVariants } from "./prompt-suggestion-variants"

export const metadata = generateMetadata( "Prompt Suggestion", "A component for implementing interactive prompt suggestions in AI interfaces. The PromptSuggestion component offers two distinct modes: Normal Mode and Highlight Mode." )

Prompt Suggestion

A component for implementing interactive prompt suggestions in AI interfaces. The PromptSuggestion component offers two distinct modes:

• Normal Mode: Renders clickable, pill-shaped buttons ideal for suggesting quick prompts in chat interfaces
• Highlight Mode: Provides text highlighting to highlight a part of the suggestion

Examples

Basic Usage

Display clickable prompt suggestions that users can select to populate an input field. You can easily use it with the PromptInput component.

<ComponentCodePreview component={<PromptSuggestionBasic />} filePath="app/docs/prompt-suggestion/prompt-suggestion-basic.tsx" classNameComponentContainer="p-8" />

Highlighted Prompt Suggestions

Implement prompt suggestions with search term highlighting. It's perfect to showcase a list of related prompts.

<ComponentCodePreview component={<PromptSuggestionHighlight />} filePath="app/docs/prompt-suggestion/prompt-suggestion-highlight.tsx" classNameComponentContainer="p-8" />

Complete Chat Interface

Build a full-featured chat interface with dynamic prompt suggestions that switch between both modes.

<ComponentCodePreview component={<PromptSuggestionVariants />} filePath="app/docs/prompt-suggestion/prompt-suggestion-variants.tsx" classNameComponentContainer="p-8 h-[500px]" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

<CodeBlock code={npx shadcn add "https://prompt-kit.com/c/prompt-suggestion.json"} language="bash" />

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<CodeBlock filePath="components/prompt-kit/prompt-suggestion.tsx" language="tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Component API

PromptSuggestion

| Prop | Type | Default | Description | | :-------- | :------------------------------------------------- | :-------- | :----------------------------------------------------------------------------- | | children | React.ReactNode | | Content to display in the suggestion button | | variant | "default" | "destructive" | "outline" | "ghost" | "outline" | Visual variant of the button (normal mode) or "ghost" (highlight mode) | | size | "default" | "sm" | "lg" | "icon" | "lg" | Size of the button (normal mode) or "sm" (highlight mode) | | highlight | string | undefined | When provided, enables highlight mode and highlights this text within children | | className | string | | Additional CSS classes | | ...props | ButtonHTMLAttributes | | All other button HTML attributes (including onClick) |

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║