@ezijing/ai-vue

@ezijing/ai-vue 提供基于 @ezijing/ai-core client 的 Vue composables。

安装

npm install @ezijing/ai-vue

准备 Client

import { createClient, createDeepSeekProvider, createQianfanProvider, createVolcengineProvider } from '@ezijing/ai-vue'

export const qianfan = createQianfanProvider({ apiKey: 'your-qianfan-key' })

export const client = createClient({
  providers: {
    deepseek: createDeepSeekProvider({ apiKey: 'your-deepseek-key' }),
    volcengine: createVolcengineProvider({ apiKey: 'your-volcengine-key' }),
    qianfan,
  },
})

useChat

import { ref } from 'vue'
import { useChat } from '@ezijing/ai-vue'
import { client, qianfan } from './client'

const prompt = ref('')

const {
  modelList,
  modelValue,
  messages,
  result,
  reasoning,
  status,
  error,
  isLoading,
  usage,
  generateText,
  streamText,
  cancel,
} = useChat({ client })

await generateText({ prompt: prompt.value })
await streamText({ prompt: prompt.value, search: true })

<template>
  <div v-for="message in messages" :key="message.id">
    <strong>{{ message.role }}:</strong>
    <div v-if="message.reasoning">
      <div>reasoning:</div>
      <pre>{{ message.reasoning }}</pre>
    </div>
    <div>{{ message.content }}</div>
  </div>
</template>

useChat() 返回：

• modelList
• modelValue
• messages
• result
• reasoning
• status
• error
• isLoading
• usage
• generateText()
• streamText()
• cancel()

如果页面上有“联网搜索”开关，直接把开关值传进去：

await generateText({ prompt: prompt.value, search: searchEnabled.value })
await streamText({ prompt: prompt.value, search: searchEnabled.value })

search: true 时，useChat 会直接走已注册的 qianfan 搜索实现。

useImage

import { useImage } from '@ezijing/ai-vue'
import { client } from './client'

const {
  modelList,
  modelValue,
  images,
  usage,
  isLoading,
  error,
  generateImage,
  cancel,
} = useImage({ client })

await generateImage({ prompt: '一只可爱的小猫' })

useVideo

import { useVideo } from '@ezijing/ai-vue'
import { client } from './client'

const {
  modelList,
  modelValue,
  streamVideo,
  status,
  result,
  resolution,
  ratio,
  duration,
  usage,
  error,
  isLoading,
  cancel,
} = useVideo({ client })

await streamVideo({ prompt: '生成一段小猫奔跑的视频' })

说明

• composables 不再自己创建 provider
• composables 只接收 client
• 模型列表来自 client.getModels()
• 文本流式能力基于 client.streamText()
• 视频能力基于 client.streamVideo()
• @ezijing/ai-vue 会重新导出 @ezijing/ai-core 的 API，不需要额外安装 @ezijing/ai-core