Usage

Once an AI Elements Vue component is installed, you can import it and use it in your application like any other Vue component. The components are added as part of your codebase (not hidden in a library), so the usage feels very natural.

Example

After installing AI Elements Vue components, you can use them in your application like any other Vue component. For example:

<script setup lang="ts">
import { useChat } from '@ai-sdk/vue'
import { Message, MessageContent, MessageResponse } from '@/components/ai-elements/message'

const { messages } = useChat()
</script>

<template>
  <div>
    <Message
      v-for="(msg, index) in messages"
      :key="index"
      :from="msg.role"
    >
      <MessageContent>
        <template
          v-for="(part, i) in msg.parts"
        >
          <MessageResponse
            v-if="part.type === 'text'"
            :key="`${msg.role}-${i}`"
          >
            {{ part.text }}
          </MessageResponse>
        </template>
      </MessageContent>
    </Message>
  </div>
</template>

In the example above, we import the Message component from our AI Elements Vue directory and include it in a Vue SFC template. Then we compose it with MessageContent and MessageResponse subcomponents. You can style or configure the component just as you would if you wrote it yourself – since the code lives in your project, you can even open the component file to see how it works or make custom modifications.

Extensibility

All AI Elements Vue components take as many primitive attributes as possible. For example, the Message component extends HTMLAttributes, so you can pass any props that a div supports. This makes it easy to extend the component with your own styles or functionality.

Customization

After installation, no additional setup is needed. The component’s styles (Tailwind CSS classes) and scripts are already integrated. You can start interacting with the component in your app immediately.

For example, if you'd like to remove the rounding on Message, go to components/ai-elements/message/MessageContent.vue and remove rounded-lg as follows:

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  class?: string
}

const props = defineProps<Props>()

const classes = computed(() => [
  'flex flex-col gap-2 overflow-hidden px-4 py-3 text-foreground text-sm',
  'group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground',
  'group-[.is-assistant]:bg-secondary group-[.is-assistant]:text-foreground',
  'is-user:dark',
  props.class,
])
</script>

<template>
  <div :class="classes">
    <slot />
  </div>
</template>