Prompt Suggestion

A component for implementing interactive prompt suggestions in AI interfaces, with both clickable suggestion buttons and highlight mode for matched text.

Installation

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

Examples

Highlighted Prompt Suggestions

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

Complete Chat Interface

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

Props

PromptSuggestion

Name	Type	Default
`children`	`Snippet`
`variant`	`"default" \| "destructive" \| "outline" \| "ghost"`
`size`	`"default" \| "sm" \| "lg" \| "icon"`
`class`	`string`
`highlight`	`string \| undefined`	`undefined`
`ref`	`HTMLElement \| null`
`onclick`	`(event: MouseEvent) => void`
`disabled`	`boolean`
`type`	`"button" \| "submit" \| "reset"`	`"button"`