Suggestion

The Suggestion component displays a horizontal row of clickable suggestions for user interaction.

Installation

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

If you prefer using jsrepo, please install via the command below:

pnpm dlx jsrepo add @ai/elements/ai-elements/suggestion

Build a simple input with suggestions users can click to send a message to the LLM.

Add the following component to your frontend:

+page.svelte

Add the following route to your backend:

api/chat/+server.ts

Prop	Type	Default	Description
`suggestion`	`string`	-	The suggestion text to display and pass to the onclick handler
`onclick`	`(suggestion: string) => void`	-	Callback fired when the suggestion is clicked, receives the suggestion text
`children`	`Snippet`	-	Custom content to render instead of the suggestion text
`class`	`string`	-	Additional CSS classes to apply to the suggestion button
`variant`	`ButtonProps['variant']`	`'outline'`	Button variant style
`size`	`ButtonProps['size']`	`'sm'`	Button size
`...restProps`	`ButtonProps`	-	All other Button component props are supported

Prop	Type	Default	Description
`children`	`Snippet`	-	Suggestion components to render in the scrollable container
`class`	`string`	-	Additional CSS classes to apply to the suggestions container
`orientation`	`'vertical' \| 'horizontal' \| 'both'`	`'horizontal'`	Scroll direction for the suggestions container
`scrollbarXClasses`	`string`	-	Custom CSS classes for the horizontal scrollbar
`scrollbarYClasses`	`string`	-	Custom CSS classes for the vertical scrollbar
`...restProps`	`ScrollAreaProps`	-	All other ScrollArea component props are supported