做过 AI 聊天界面的同学都知道一个看起来还行的对话 UI从气泡样式到流式渲染到消息管理写完一套至少两周。TinyRobot 说别写了我来。一、不内卷通用 UI只深耕 AI 对话场景很多小伙伴第一眼会疑惑又出新 UI 库要和 TinyVue 内卷吗完全不是二者是互补搭档。TinyVue 负责后台、表单、弹窗这类通用页面 UI而 TinyRobot 只死磕 AI 聊天交互这一件事。简单说你只需要聚焦业务AI 返回了什么数据、要实现什么业务逻辑至于页面怎么渲染、交互怎么做、消息状态怎么维护全部交给 TinyRobot 兜底。当前版本 v0.4.1MIT 许可证22 个版本迭代。语言构成TypeScript 58.1% Vue 35.4%TypeScript 占大头类型安全感拉满。二、架构拆解Monorepo 三包分工TinyRobot 用 pnpm workspace 管理 Monorepo把功能拆成三个包包名干什么你需不需要装opentiny/tiny-robot核心组件库bubble、sender、container 等必须装opentiny/tiny-robot-kitAI 数据层工具Provider 接入、Composable、存储、插件可选想对接AI就装opentiny/tiny-robot-svgsSVG 图标库可选想用官方图标就装这三层分工背后的哲学很清晰——关注点分离组件层只管渲染和交互不管 AI 请求怎么发、数据怎么存工具层处理 Provider 接入、消息状态机、插件、对话状态、存储策略等脏活累活资源层图标独立打包不和组件耦合你只用核心包就能拿到 UI 能力按需引入 kit 来对接 AI。最小依赖最大灵活。三、Kit 包的灵魂Composable 架构写聊天页面最头疼的就是状态管理要么一层层往下传 Props要么引入笨重的全局状态库代码越写越乱。TinyRobot 靠两个 Hook 直接优雅解决任意组件内直接调用就能拿到全套对话能力。Kit 包中最值得品的是 Vue Composable 层packages/kit/src/vue/ ├── message/ # useMessage composable └── conversation/ # useConversation composableuseMessage —— 消息管理 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/策略场景特点LocalStorage轻量对话、短期存储简单粗暴同步操作容量有限IndexedDB大量历史、长期存储异步大容量结构化查询自定义存储接后端数据库完全自定义企业场景首选只需实现StorageAdapter接口就能接入任何后端存储。MongoDBMySQLRedis随便你接口统一就行。六、核心组件逐一拆解项目结构全览tiny-robot/ ├── packages/ │ ├── components/ # 核心组件库 │ │ ├── src/ │ │ │ ├── bubble/ # 聊天气泡 │ │ │ ├── sender/ # 消息输入 │ │ │ ├── container/ # 容器布局 │ │ │ ├── history/ # 对话历史 │ │ │ ├── attachments/ # 文件附件 │ │ │ └── ... # 更多组件 │ ├── kit/ # AI工具包 │ ├── svgs/ # 图标库 │ ├── playground/ # 开发实验场 │ └── test/ # 测试套件 ├── docs/ # 文档站点 ├── scripts/ # 构建脚本 └── package.jsonBubble / BubbleList聊天气泡与消息列表Bubble 是每条消息的视觉单元。核心设计点role属性ai/user/system 三种角色样式自动区分placement属性start/end 左右对齐AI在左人在右或者反过来随你配流式渲染AI 流式响应时逐步追加内容不用等全部返回才渲染Markdown 渲染代码块、列表、链接自动格式化不用自己写 Markdown 解析器BubbleList 则负责承载完整消息流messages 一次传入多轮对话列表内部批量渲染 BubbleroleConfigs 统一配置不同角色的头像、位置、形状和隐藏规则不用每条消息重复写groupStrategy 支持连续角色合并、按分割角色分组也可以自定义分组逻辑autoScroll 支持接近底部时自动滚动到最新消息AI 流式响应逐步追加内容时不用自己处理滚动跟随Sender消息输入用户发消息的入口文本输入、多行、快捷键发送Enter/CtrlEnter 可配置文件附件上传跟 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 生态中的位置搭档关系TinyVue同属 OpenTiny Design 体系但 TinyRobot 专攻 AI 对话而非通用 UIGenUI SDKGenUI Vue 渲染器可能复用 TinyRobot 的对话组件做基础 UINEXT SDKopentiny/next-remoter直接基于 TinyRobot 构建 AI 聊天 UITinyEngineTinyEngine 接入 LLM 时对话 UI 可直接用 TinyRobotTinyRobot 是 OpenTiny AI 生态链的 UI 基础层为上层应用提供标准化的对话交互组件。十、总结值不值得用 优势垂直定位精准—— 不做通用 UI专注 AI 对话不和 TinyVue 内卷Composable 架构—— useMessage/useConversation 让对话逻辑和 UI 解耦干净responseProvider 模式—— 数据源可插拔模型切换交给业务接口或后端网关三层包设计—— 组件/工具/资源分离按需引入不拉全家桶流式支持—— AI 流式响应渲染是刚需这个不内置你就得自己写 可以更好的地方responseProvider 的最佳实践还可以继续补充——比如 SSE 转换、错误恢复、模型网关接入、鉴权和工具调用组合示例社区还在早期——用起来没问题但实际案例不够多组件种类还可扩展——思考链展示、工具调用结果渲染等 AI 特有交互还没覆盖 适用场景企业 AI 助手/客服的对话 UIAI 编程助手的交互界面低代码平台的 AI 对话模块任何需要 AI 对话交互的 Vue 3 应用 项目资源资源地址 GitHub 源码https://github.com/opentiny/tiny-robot 官方文档https://docs.opentiny.design/tiny-robot 快速入门https://docs.opentiny.design/tiny-robot/guide/quick-start 主题配置https://docs.opentiny.design/tiny-robot/guide/theme-config 官网首页https://opentiny.design/tiny-robot npm 核心包https://www.npmjs.com/package/opentiny/tiny-robot如果你觉得这篇文章有帮助别忘了点赞收藏⭐关注 OpenTiny 社区更多好货有问题欢迎在评论区交流~