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

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

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

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

Copy and paste the following code into your project.

pnpm dlx shadcn-svelte@latest add https://ai-elements.vercel.app/r/prompt-kit-prompt-suggestion.json

Prop	Type	Default	Description
`children`	`Snippet`	-	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`	`undefined`	When provided, enables highlight mode and highlights this text within children
`className`	`string`	-	Additional CSS classes
`...props`	`HTMLAttributes<HTMLButtonElement>`	-	All other button HTML attributes (including onclick)