AI Elements
Suggestion
A short prompt you can send to the agent in one click.
Suggestion is a prompt you send without typing. Each one is a Button with the prompt as its label. Put a row of them above the Prompt Input.
Installation
Suggestion is built with the Button component.
Usage
<template>
<div class="scroll-fade-x flex scrollbar-none gap-2 overflow-x-auto overscroll-x-contain">
<UiButton
v-for="suggestion in suggestions"
:key="suggestion"
variant="outline"
size="sm"
class="shrink-0"
@click="send(suggestion)"
>
{{ suggestion }}
</UiButton>
</div>
</template>
Scrolling
The row scrolls sideways when the suggestions do not fit. scroll-fade-x fades the edge that has more to show, and shrink-0 keeps each label on one line.
AI SDK
The label is the message. Send it as is.
chat.sendMessage({ text: suggestion });