useAiStream 流式请求引擎 🌊

useAiStream 是专为 AI 流式输出设计的底层引擎 Hook，内置：

• 🏭 多厂商适配器（OpenAI / DeepSeek / Claude / Gemini / 文心 / 通义）
• 🖋️ 打字机节流（基于 requestAnimationFrame）
• 🛑 AbortController 取消

🖊️ 打字机效果演示（本地 AsyncGenerator）

通过 AsyncGenerator 模拟真实 AI 输出节奏，无需网络或 API Key，即可体验流式渲染。

Vue3 Composition API 的核心优势是什么？

选择一个问题，点击「生成回答」体验打字机效果 ✨

🌐 真实 SSE 接口接入

将 request 适配器替换为真实 API，传入你的 Key 即可实现生产级流式对话。

📋 替换 YOUR_API_KEY 为你的 SiliconFlow / OpenAI / DeepSeek 等兼容 Key，即可实现真实流式输出。

👉 支持: OpenAI · DeepSeek · SiliconFlow · 讯飞星火 · 月之暗面 · MiniMax 等所有 OpenAI SSE 格式

API

Options

参数	类型	默认值	说明
request	(query, signal, ...args) => AsyncGenerator | Promise<Response>	必填	请求适配器，支持传递 AbortSignal
parser	StreamChunkParser	plainTextParser	流块解析器（多厂商适配）
typewriter	boolean	true	是否启用打字机效果
charsPerFrame	number	3	每帧输出字符数（控制速度）
onUpdate	(chunk, fullContent) => void	-	每次增量更新回调
onFinish	(content) => void	-	完成回调
onError	(err) => void	-	错误回调

返回值

字段	类型	说明
isStreaming	Ref<boolean>	是否正在流式接收
currentContent	Ref<string>	当前已接收的完整内容
fetchStream	(query, ...args) => Promise<void>	触发请求
stop	() => void	中止请求

内置 Parser

Parser	适用厂商	说明
openaiParser	OpenAI、DeepSeek、SiliconFlow、讯飞星火	兼容 OpenAI SSE 格式
claudeParser	Anthropic Claude	兼容 Claude SSE 格式
geminiParser	Google Gemini	兼容 Gemini 格式
ernieParser	百度文心一言	兼容文心 SSE 格式
qwenParser	阿里通义千问（直连版）	兼容通义 SSE 格式
plainTextParser	AsyncGenerator 原始文本	yield 字符串直接追加

接入其他 AI 平台

import { useAiStream, openaiParser } from '@yh-ui/hooks'

// ── SiliconFlow（支持 Qwen / DeepSeek / GLM 等开源模型）──
const { fetchStream } = useAiStream({
  parser: openaiParser,
  request: async (query, signal) =>
    fetch('https://api.siliconflow.cn/v1/chat/completions', {
      method: 'POST',
      signal,
      headers: {
        Authorization: 'Bearer YOUR_SF_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        model: 'Qwen/Qwen2.5-7B-Instruct',
        stream: true,
        messages: [{ role: 'user', content: query }]
      })
    })
})

// ── DeepSeek ──
const { fetchStream: deepseekStream } = useAiStream({
  parser: openaiParser,
  request: async (query, signal) =>
    fetch('https://api.deepseek.com/chat/completions', {
      method: 'POST',
      signal,
      headers: {
        Authorization: 'Bearer YOUR_DEEPSEEK_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        model: 'deepseek-chat',
        stream: true,
        messages: [{ role: 'user', content: query }]
      })
    })
})