使用指南

了解如何在你的应用程序中使用 AI Elements Vue 组件。

一旦安装了 AI Elements Vue 组件，你就可以像使用任何其他 Vue 组件一样导入并在应用程序中使用它。这些组件作为代码库的一部分添加（不是隐藏在库中），因此使用起来非常自然。

示例

安装 AI Elements Vue 组件后，你可以像使用任何其他 Vue 组件一样在应用程序中使用它们。例如：

ConversationExample.vue
<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>

在上面的示例中，我们从 AI Elements Vue 目录导入 Message 组件并将其包含在 Vue SFC 模板中。然后我们将其与 MessageContent 和 MessageResponse 子组件组合使用。你可以像自己编写的组件一样对组件进行样式设置或配置——由于代码存在于你的项目中，你甚至可以打开组件文件查看其工作原理或进行自定义修改。

可扩展性

所有 AI Elements Vue 组件都尽可能接受原始属性。例如，Message 组件扩展了 HTMLAttributes，因此你可以传递 div 支持的任何 props。这使得使用你自己的样式或功能扩展组件变得容易。

自定义

安装后，无需额外设置。组件的样式（Tailwind CSS 类）和脚本已经集成。你可以立即在应用程序中开始与组件交互。

例如，如果你想移除 Message 上的圆角，请转到 components/ai-elements/message/MessageContent.vue 并按如下方式删除 rounded-lg：

components/ai-elements/message/MessageContent.vue
<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>
Edit this page
介绍
故障排除