做过 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，把功能拆成三个包：

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

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

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

三、Kit 包的灵魂：Composable 架构

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

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

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 兼容结构返回

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

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

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

packages/kit/src/storage/

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

六、核心组件逐一拆解

项目结构全览

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：按需引入，包体积可控

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

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

九、在 OpenTiny 生态中的位置

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

十、总结：值不值得用？

👍 优势

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

🤔 可以更好的地方

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

🎯 适用场景

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

📚 项目资源

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