安装

环境要求

• Vue ^3.5.33
• Node.js ^20.19.0 || >=22.12.0
• 支持 Vite、Nuxt 或其他 Vue 3 构建工具

安装依赖

npm install @weimin96/ai-chat-vue

引入样式

import '@weimin96/ai-chat-vue/styles'

使用组件

按需导入

<script setup lang="ts">
import { ChatProvider, ChatContainer } from '@weimin96/ai-chat-vue'
</script>

<template>
  <ChatProvider>
    <ChatContainer />
  </ChatProvider>
</template>

完整导入

import { createApp } from 'vue'
import * as AiChatVue from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'
import App from './App.vue'

createApp(App).use(AiChatVue).mount('#app')

组件示例

<script setup lang="ts">
import { ChatContainer, ChatProvider } from '@weimin96/ai-chat-vue'
import {
  demoAdapter,
  promptCards,
  suggestions,
} from '../../.vitepress/theme/demo-data'
</script>

<template>
  <div class="docs-chat-shell">
    <ChatProvider :adapter="demoAdapter">
      <ChatContainer
        welcome-title="开始对话"
        welcome-subtitle="ChatContainer 组合欢迎页、消息列表和输入框。"
        :prompt-cards="promptCards"
        :suggestions="suggestions"
      >
        <template #footer>文档示例使用本地模拟回复。</template>
      </ChatContainer>
    </ChatProvider>
  </div>
</template>

✦

开始对话

ChatContainer 组合欢迎页、消息列表和输入框。

文档示例使用本地模拟回复。

适配器

ChatProvider 接收 StreamAdapter。生产环境应显式传入适配器，否则发送消息不会产生助手回复。