Suggestion

A suggestion component that displays a horizontal row of clickable suggestions for user interaction.

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

Install using CLI

AI Elements Vue

shadcn-vue CLI

npx ai-elements-vue@latest add suggestion

Install Manually

Copy and paste the following code in the same folder.

Suggestions.vue

index.ts

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { ScrollArea, ScrollBar } from '@repo/shadcn-vue/components/ui/scroll-area'
import { cn } from '@repo/shadcn-vue/lib/utils'

interface SuggestionsProps {
  class?: HTMLAttributes['class']
}

const props = defineProps<SuggestionsProps>()
</script>

<template>
  <ScrollArea class="w-full overflow-x-auto whitespace-nowrap" v-bind="$attrs">
    <div :class="cn('flex w-max flex-nowrap items-center gap-2', props.class)">
      <slot />
    </div>
    <ScrollBar class="hidden" orientation="horizontal" />
  </ScrollArea>
</template>

Usage with AI SDK

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

Add the following component to your frontend:

pages/index.vue

<script setup lang="ts">
import { useChat } from '@ai-sdk/vue'
import { ref } from 'vue'
import {
  Conversation,
  ConversationContent,
  ConversationScrollButton,
} from '@/components/ai-elements/conversation'
import { Message, MessageContent } from '@/components/ai-elements/message'
import {
  PromptInput,
  PromptInputSubmit,
  PromptInputTextarea,
} from '@/components/ai-elements/prompt-input'
import { Response } from '@/components/ai-elements/response'
import { Suggestion, Suggestions } from '@/components/ai-elements/suggestion'

const input = ref('')
const { sendMessage, status } = useChat()

function handleSubmit() {
  if (input.value.trim()) {
    sendMessage({ text: input.value })
    input.value = ''
  }
}

function handleSuggestionClick(suggestion: string) {
  sendMessage({ text: suggestion })
}
</script>

<template>
  <div class="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
    <div class="flex flex-col h-full">
      <div class="flex flex-col gap-4">
        <Suggestions>
          <Suggestion
            v-for="suggestion in suggestions"
            :key="suggestion"
            :suggestion="suggestion"
            @click="handleSuggestionClick"
          />
        </Suggestions>

        <PromptInput class="mt-4 w-full max-w-2xl mx-auto relative" @submit.prevent="handleSubmit">
          <PromptInputTextarea
            v-model="input"
            placeholder="Say something..."
            class="pr-12"
          />
          <PromptInputSubmit
            :status="status === 'streaming' ? 'streaming' : 'ready'"
            :disabled="!input.trim()"
            class="absolute bottom-1 right-1"
          />
        </PromptInput>
      </div>
    </div>
  </div>
</template>