ChatProvider

ChatProvider 提供聊天上下文、配置和流式适配器。所有依赖 useChat() 的组件都必须放在 Provider 内部。

导入方式

按需导入

import { ChatProvider } from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'

完整导入

import * as AiChatVue from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'

app.use(AiChatVue)

// 模板中可直接使用 <ChatProvider />

基础用法

✦

ChatProvider 示例

Provider 负责提供会话上下文和流式适配器。

AI can make mistakes. Verify important information.

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

<template>
  <div class="docs-chat-shell">
    <ChatProvider
      :adapter="demoAdapter"
      :config="{ locale: 'zh-CN', enableMarkdown: true }"
    >
      <ChatContainer
        welcome-title="ChatProvider 示例"
        welcome-subtitle="Provider 负责提供会话上下文和流式适配器。"
        :prompt-cards="promptCards"
        :suggestions="suggestions"
        placeholder="输入一条测试消息..."
      />
    </ChatProvider>
  </div>
</template>

API

属性	类型	默认值	说明
config	ChatConfig	{}	会话模型、主题、功能开关等配置
adapter	StreamAdapter | null	null	流式回复适配器

插槽	说明
default	放置 ChatContainer 或其他使用聊天上下文的组件

注意事项

未传入 adapter 时，用户消息可以进入会话，但不会产生助手流式回复。