从零开发 AI 聊天页要两周？试试这款 Vue3 垂直对话组件库 TinyRobot，直接开箱即用

做过 AI 聊天界面的同学都知道，一个"看起来还行"的对话 UI，从气泡样式到流式渲染到消息管理，写完一套至少两周。TinyRobot 说：别写了，我来。

一、不内卷通用 UI，只深耕 AI 对话场景

很多小伙伴第一眼会疑惑：又出新 UI 库？要和 TinyVue 内卷吗？完全不是，二者是互补搭档。 TinyVue 负责后台、表单、弹窗这类通用页面 UI，而 TinyRobot 只死磕 AI 聊天交互这一件事。

简单说，你只需要聚焦业务：AI 返回了什么数据、要实现什么业务逻辑，至于页面怎么渲染、交互怎么做、消息状态怎么维护， 全部交给 TinyRobot 兜底。

当前版本 v0.4.1，MIT 许可证，22 个版本迭代。语言构成：TypeScript 58.1% + Vue 35.4%，TypeScript 占大头，类型安全感拉满。

二、架构拆解：Monorepo 三包分工

TinyRobot 用 pnpm workspace 管理 Monorepo，把功能拆成三个包：

包名	干什么	你需不需要装
`@opentiny/tiny-robot`	核心组件库（bubble、sender、container 等）	必须装
`@opentiny/tiny-robot-kit`	AI 数据层工具（Provider 接入、Composable、存储、插件）	可选，想对接AI就装
`@opentiny/tiny-robot-svgs`	SVG 图标库	可选，想用官方图标就装

这三层分工背后的哲学很清晰------关注点分离：

组件层：只管渲染和交互，不管 AI 请求怎么发、数据怎么存
工具层：处理 Provider 接入、消息状态机、插件、对话状态、存储策略等"脏活累活"
资源层：图标独立打包，不和组件耦合

你只用核心包就能拿到 UI 能力，按需引入 kit 来对接 AI。最小依赖，最大灵活。

三、Kit 包的灵魂：Composable 架构

写聊天页面最头疼的就是状态管理，要么一层层往下传 Props，要么引入笨重的全局状态库，代码越写越乱。TinyRobot 靠两个 Hook 直接优雅解决，任意组件内直接调用就能拿到全套对话能力。

Kit 包中最值得品的是 Vue Composable 层：

bash 复制代码

packages/kit/src/vue/
├── message/          # useMessage composable
└── conversation/     # useConversation composable

useMessage ------ 消息管理 Hook

创建、更新、删除、流式追加消息？它都能
消息状态封装成 Vue reactive 对象，跟组件自动响应式绑定，零手动同步
按角色分类（user/ai/system），不用自己写 if (role === 'ai')

useConversation ------ 对话管理 Hook

管理对话上下文（轮次、历史、会话切换）
与存储策略集成，对话持久化不用操心
生命周期自动管理（创建、加载、切换、销毁）

一句话总结 ：在任何 Vue 组件里 useXxx() 就能拿到对话管理能力，不用 props 层层传递，不用全局 store，清爽！

四、responseProvider 模式：AI 数据源随便接

不少团队踩过这样的坑：项目从 OpenAI 换成 DeepSeek、本地私有化模型或者企业内部 AI 网关，前端对话逻辑要大范围重构，改到崩溃。

TinyRobot Kit 弱化了传统 AI Client Provider 的概念。对组件和消息引擎来说，它并不关心你背后接的是 OpenAI、DeepSeek、本地模型，还是公司内部的 AI 网关；它更关心的是：业务能不能把模型响应整理成 OpenAI Chat Completions 兼容的数据结构。

模型服务可以换：OpenAI、DeepSeek、本地模型、企业网关都可以接
接入方式可以换：前端直连、后端转发、统一模型网关都不影响组件层
响应格式保持稳定：消息内容、流式片段、工具调用等信息按 Chat Completions 兼容结构返回

这意味着模型切换不再是"前端组件跟着模型服务改一遍"，而是把不同模型的差异收敛到数据接入层。组件层只面对稳定的对话数据格式，所以更容易在真实业务里接入已有后端、权限系统和模型路由策略。

五、存储策略：对话持久化三种方案任选

不用自己封装本地存储逻辑，框架内置三套成熟存储策略，还支持自定义扩展：

bash 复制代码

packages/kit/src/storage/

策略	场景	特点
LocalStorage	轻量对话、短期存储	简单粗暴，同步操作，容量有限
IndexedDB	大量历史、长期存储	异步大容量，结构化查询
自定义存储	接后端数据库	完全自定义，企业场景首选

只需实现 StorageAdapter 接口就能接入任何后端存储。MongoDB？MySQL？Redis？随便你，接口统一就行。

六、核心组件逐一拆解

项目结构全览

bash 复制代码

tiny-robot/
├── packages/
│   ├── components/              # 核心组件库
│   │   ├── src/
│   │   │   ├── bubble/          # 聊天气泡
│   │   │   ├── sender/          # 消息输入
│   │   │   ├── container/       # 容器布局
│   │   │   ├── history/         # 对话历史
│   │   │   ├── attachments/     # 文件附件
│   │   │   └── ...              # 更多组件
│   ├── kit/                     # AI工具包
│   ├── svgs/                    # 图标库
│   ├── playground/              # 开发实验场
│   └── test/                    # 测试套件
├── docs/                        # 文档站点
├── scripts/                     # 构建脚本
└── package.json

Bubble / BubbleList（聊天气泡与消息列表）

Bubble 是每条消息的视觉单元。核心设计点：

role 属性：ai/user/system 三种角色，样式自动区分
placement 属性：start/end 左右对齐，AI在左人在右（或者反过来，随你配）
流式渲染：AI 流式响应时逐步追加内容，不用等全部返回才渲染
Markdown 渲染：代码块、列表、链接自动格式化，不用自己写 Markdown 解析器

BubbleList 则负责承载完整消息流：

messages 一次传入多轮对话，列表内部批量渲染 Bubble
roleConfigs 统一配置不同角色的头像、位置、形状和隐藏规则，不用每条消息重复写
groupStrategy 支持连续角色合并、按分割角色分组，也可以自定义分组逻辑
autoScroll 支持接近底部时自动滚动到最新消息，AI 流式响应逐步追加内容时不用自己处理滚动跟随

Sender（消息输入）

用户发消息的入口：

文本输入、多行、快捷键发送（Enter/Ctrl+Enter 可配置）
文件附件上传（跟 attachments 组件联动）
发送状态管理（发送中/成功/失败，不用自己写 loading 状态）
前缀/后缀插槽（加表情选择器？加语音按钮？随你插）

History（对话历史）

多会话应用的导航入口：

展示历史会话列表，支持普通列表和分组列表两种数据结构
内置选中态、重命名和菜单操作，删除/编辑/置顶这类动作不用从零搭
提供 item-prefix、item-title 插槽，想加图标、标签、自定义标题都能扩展
和 useConversation 搭配使用，可以快速做出"历史会话 + 当前对话"的完整体验

七、主题体系：一键暗黑模式，品牌定制零侵入

Token 化设计变量：颜色、间距、字号、圆角全用 CSS 变量，改主题不用改源码
暗黑模式：一键切换，不用自己写 Dark Mode CSS
自定义主题：覆盖 CSS 变量就行，适配品牌风格零成本

八、Tree Shaking：按需引入，包体积可控

javascript 复制代码

// 只引入你需要的组件
import { TrBubble } from '@opentiny/tiny-robot'

每个组件独立导出，打包工具正确 tree-shake 未使用的组件
Kit 和 Svgs 作为可选依赖，不引入不影响核心功能
包体积不会因为"组件库"三个字就膨胀

九、在 OpenTiny 生态中的位置

搭档	关系
TinyVue	同属 OpenTiny Design 体系，但 TinyRobot 专攻 AI 对话而非通用 UI
GenUI SDK	GenUI Vue 渲染器可能复用 TinyRobot 的对话组件做基础 UI
NEXT SDK	`@opentiny/next-remoter` 直接基于 TinyRobot 构建 AI 聊天 UI
TinyEngine	TinyEngine 接入 LLM 时，对话 UI 可直接用 TinyRobot

TinyRobot 是 OpenTiny AI 生态链的 UI 基础层，为上层应用提供标准化的对话交互组件。

十、总结：值不值得用？

👍 优势

垂直定位精准 ------ 不做通用 UI，专注 AI 对话，不和 TinyVue 内卷
Composable 架构 ------ useMessage/useConversation 让对话逻辑和 UI 解耦，干净
responseProvider 模式 ------ 数据源可插拔，模型切换交给业务接口或后端网关
三层包设计 ------ 组件/工具/资源分离，按需引入不拉全家桶
流式支持 ------ AI 流式响应渲染是刚需，这个不内置你就得自己写

🤔 可以更好的地方

responseProvider 的最佳实践还可以继续补充------比如 SSE 转换、错误恢复、模型网关接入、鉴权和工具调用组合示例
社区还在早期------用起来没问题，但实际案例不够多
组件种类还可扩展------思考链展示、工具调用结果渲染等 AI 特有交互还没覆盖

🎯 适用场景

企业 AI 助手/客服的对话 UI
AI 编程助手的交互界面
低代码平台的 AI 对话模块
任何需要 AI 对话交互的 Vue 3 应用

📚 项目资源

资源	地址
🏠 GitHub 源码	github.com/opentiny/ti...
📖 官方文档	docs.opentiny.design/tiny-robot/
🚀 快速入门	docs.opentiny.design/tiny-robot/...
🎨 主题配置	docs.opentiny.design/tiny-robot/...
🔗 官网首页	opentiny.design/tiny-robot
📦 npm 核心包	www.npmjs.com/package/@op...

如果你觉得这篇文章有帮助，别忘了点赞👍收藏⭐，关注 OpenTiny 社区更多好货！有问题欢迎在评论区交流~