快速开始

安装

pnpm add @huiol/stream-ui

CLI 模式（推荐）

CLI 将组件源码复制到你的项目中，支持直接修改。

1. 初始化核心引擎

npx stream-ui init

会在 src/components/ui/ 下创建 stream-contains.ts（包含核心解析器和 Vue 包装器），并在项目根生成 stream-ui.json 配置文件。

2. 添加内置组件

npx stream-ui add think

可用组件：think、text、base、base-md、base-latex。

npx stream-ui add base base-md base-latex

3. 使用

<script setup>
import { StreamContains, Think } from '@/components/ui/stream-contains'
</script>

<template>
  <StreamContains :model-value="text" mode="accurate">
    <Think />
  </StreamContains>
</template>

标准模式（直接引用）

<script setup>
import { StreamContains, Think } from '@huiol/stream-ui'
</script>

<template>
  <StreamContains :model-value="text" mode="accurate">
    <Think />
  </StreamContains>
</template>

Props 一览

参数	类型	默认值	说明
model-value	string	''	流式文本
mode	'fast' | 'accurate'	'accurate'	解析模式
v-model:data	StreamBlockData[]	[]	结构化数据双向绑定
components	Record<string, Component>	{}	显式注册标签组件
base-component	Component | null	null	统一包裹组件

实时演示

Hello! <think>I am thinking about how to explain this...</think> How can I help you today?

---

Hello!

思考完毕

I am thinking about how to explain this...

How can I help you today?

<template>
  <div>
    <Input v-model="textStream" :rows="3" />
    <hr>
    <StreamContains :model-value="textStream" mode="accurate">
      <Think />
    </StreamContains>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Input from '../../.comm/Input.vue'
import { StreamContains, Think } from 'stream-ui'

const textStream = ref("Hello! <think>I am thinking about how to explain this...</think> How can I help you today?")
</script>