快速开始

Stream UI 是一个用于处理 AI 流式输出的渲染引擎。它可以拦截特定的标签（如 <think>）并将其替换为 Vue 组件，同时保持其余文本的正常渲染。

安装核心库

首先，安装 Stream UI 的核心渲染引擎：

bash

pnpm add @huiol/stream-ui

使用方式

我们提供两种集成方式，推荐使用 CLI 模式 以获得最大的自定义自由度。

1. CLI 模式 (推荐) 🚀

借鉴了 shadcn/ui 的思想，你可以使用 CLI 直接将预设组件的源代码拉取到你的项目中。这样你可以完全控制组件的样式、动画和交互逻辑，而无需被锁定在库的默认实现中。

运行以下命令添加一个交互式“思考”组件：

bash

# 使用 npx 直接拉取源码
npx stream-ui add think

执行后，组件代码将进入你的项目目录，你可以根据自己的设计系统随时调整它。

2. 标准模式

如果你喜欢轻量化的引用方式，也可以直接在项目中使用库导出的核心渲染器并手动注册自定义组件。

实时演示

在下方演示中，你可以尝试修改输入流或点击“模拟流”按钮。

输入流 (Interactive Stream Input)

渲染结果 (Rendered Result)

Hello!

I am thinking about how to explain this...

How can I help you today?

<template>
  <div class="demo-container">
    <div class="demo-section">
      <div class="demo-label">输入流 (Interactive Stream Input)</div>
      <Input v-model="textStream" :rows="3" />
    </div>

    <div class="demo-section">
      <div class="demo-label">渲染结果 (Rendered Result)</div>
      <div class="demo-box rendered-box">
        <StreamContains :model-value="textStream" mode="accurate">
          <DocsThink />
        </StreamContains>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { StreamContains } from 'stream-ui'

import DocsThink from '../../components/think/DocsThink.vue'
import Input from '../../.comm/Input.vue'

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

<style scoped>
.demo-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
  background: var(--vp-c-bg-soft);
  border-radius: 12px;
  border: 1px solid var(--vp-c-border);
}

.demo-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.demo-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--vp-c-text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.demo-box {
  padding: 12px 16px;
  background: var(--vp-c-bg);
  border-radius: 8px;
  border: 1px solid var(--vp-c-border);
  min-height: 48px;
  display: flex;
  align-items: center;
}

.rendered-box {
  border-left: 4px solid var(--vp-c-brand);
}
</style>

核心特性

流式增量渲染：无需等待全文生成即可开始渲染。
自定义标签：支持拦截任何 xml-like 标签。

快速开始 ​

安装核心库 ​

使用方式 ​

1. CLI 模式 (推荐) 🚀 ​

2. 标准模式 ​

实时演示 ​

核心特性 ​