前言TinyRobot 是一套专为 AI 应用构建的前端交互框架帮助团队快速搭建企业级 AI 助手、智能客服与多轮对话系统。基于 OpenTiny 设计体系TinyRobot 提供从对话 UI、流式渲染到会话管理的完整能力使开发者无需自研复杂交互逻辑即可构建体验一致、可扩展的 AI 产品。从原型到可运行 AI 应用仅需数小时。最近我们正式发布TinyRobot v0.5.0版本这次更新不只是多了几个组件而是让搭一个 AI 聊天应用这件事变得更简单了。开源地址https://github.com/opentiny/tiny-robot欢迎 Star ⭐官方网站https://opentiny.design/tiny-robot欢迎大家体验这个版本。如果你在使用过程中有建议、想法或问题也欢迎通过 Issue、PR 和讨论区积极反馈一起把 TinyRobot 做得更好。v0.5.0 变更特性概览【新特性】新增 Skills 能力【新特性】CLI新增脚手架一条命令就能起一个 TinyRobot 项目【新组件】Anchor新增内容导航组件长回答和长对话更容易阅读【新组件】Layout新增布局组件支持常规布局和浮层布局模式【其他】交互、功能细节优化 bug 修复TinyRobot v0.5.0 新特性解读1. 【新特性】新增 Skills 能力新增 Agent Skills 接入能力。Agent Skills 是一种轻量、开放的格式用于通过专业知识和工作流程扩展 AI Agent 的能力。每个 Skill 是一个包含SKILL.md的目录SKILL.md包含名称、描述和任务说明目录还可以附带参考资料、模板等文件。在 TinyRobot Kit 中不同来源的 Skill 会被转换为统一的SkillDefinition。应用可以根据当前场景启用合适的 Skill让模型在回答问题或执行任务时遵循对应要求团队也可以将业务知识和任务要求独立维护并在不同项目和聊天场景中复用。Skill 参与对话时skillPlugin 负责解析本次请求启用的 Skill并生成对应的instructions和运行时工具。插件不会固定instructions在模型请求中的承载方式应用可以根据模型或provider的协议将其写入system message、user message或独立请求字段。Skill 带有参考文件时模型还可以通过运行时工具按需读取其中的文本内容。下面以vue-best-practices为例。用户在界面中启用 Skill 后提出 Vue 开发问题模型会遵循其中的开发规范需要进一步了解响应式、单文件组件或组件数据流时还可以读取 Skill 附带的参考资料。1.1 从多种来源加载 SkillTinyRobot Kit 支持从浏览器文件、Node.js 文件系统和 GitHub 仓库加载 Skill。开发者既可以让用户在页面中选择本地目录也可以读取服务端已有的 Skill 目录或者直接使用仓库中统一维护的内容。加载完成后不同来源都会转换成一致的 Skill 定义后续接入聊天流程时不需要关心它最初来自哪里。这样既适合个人开发时快速试用也适合团队通过代码仓库集中维护和版本管理。1.2 保存并复用 Skill针对不同运行环境TinyRobot 提供了多种保存方式。Memory Storage 适合临时预览和测试IndexedDB Storage 可以在浏览器中跨会话保留用户导入的 SkillFile System Storage 则适合 Node.js 服务或已有本地目录的项目。应用可以先导入和保存 Skill再根据名称读取并用于聊天。Skill 的保存与界面中的启用状态彼此独立开发者可以继续使用复选框、下拉框或其他符合产品体验的交互方式。1.3 接入聊天流程在聊天场景中应用既可以直接启用用户已经指定的 Skill也可以把候选 Skill 交给模型根据当前问题自动匹配。确定 Skill 后skillPlugin会生成对应的instructions如果 Skill 带有附加文件还会提供list_skill_files和read_skill_file等运行时工具由toolPlugin收集并执行模型返回的工具调用。Vue 应用可以通过skillPlugin接入这些能力。当前使用的 Skill 和选择方式可以跟随界面状态变化每次发送消息时都会读取最新配置因此不需要为了切换 Skill 重新创建整套聊天实例。Skills 不只是增加了一组底层 API而是为聊天应用提供了一种更清晰的能力组织方式模型怎么完成任务、需要参考哪些内容可以从页面代码中独立出来并在不同项目中持续复用。2. 【新组件】 Anchor新增内容导航组件长回答和长对话更容易阅读新增Anchor锚点组件用来给长文章、长对话和信息较多的页面增加目录导航。它可以把页面内容整理成目录支持快速跳转、滚动跟随高亮以及目录搜索帮助用户更快找到想看的内容。2.1 目录建立Anchor的接入方式比较直接。我们只需要准备目录内容再让正文中的对应内容和目录一一对应组件就能把整块长内容整理成可跳转的目录。这种方式既适用于文章页也适用于对话页只要内容本身有清晰分段就可以很自然地接入目录导航。2.2 跳转与高亮使用Anchor组件之后用户就可以直接通过目录在长内容里跳转。点到哪一项页面就会滚动到对应内容滚动到哪一段目录也会跟着亮到哪一项。为了让用户更容易确认当前位置Anchor还支持在跳转后对目标内容做短暂高亮。这样可以使用户更方便的获取到信息浏览过程会更顺畅。2.3 搜索与展开当目录项越来越多时查找有效内容的速度会变慢。Anchor支持直接在目录里搜索用户可以通过关键词快速找到目标内容长页面里查找信息会更省力。除了搜索目录面板还支持展开、收起以及左右停靠。这样它既可以作为一个轻量的侧边目录存在也可以作为页面里的稳定辅助导航使用适配不同类型的页面布局。Anchor不是单纯增加了一个目录组件而是把“整理目录、快速跳转、滚动跟随和搜索查找”放进了一套更适合长内容页面的导航方式里让长页面更容易看也更容易找。3.【新组件】Layout新增布局组件支持常规布局和浮层布局模式Layout布局组件支持标准页面结构、可收起侧栏和浮层工作区适用于对话页、工作台和复杂编辑页。在复杂的页面中布局问题主要表现在多个区域如何实现协同交互。当一个页面同时有导航区、主内容区、信息区以及临时展开的操作面板时如果这些能力分别实现结构和交互就很容易分散。Layout这次重点解决的就是这类复杂工作区的组织问题。3.1 搭建页面结构Layout提供了一套完整而清晰的页面结构大家可以直接使用left-aside、header、main、footer和right-aside这几个区域把页面最基础的结构搭好。对于后台页、编辑页和对话页这类结构明确的界面这样的方式更直接也更稳定。3.2 统一侧栏交互Layout支持dock和drawer两种侧栏模式前者是整体布局的一部分适合常驻导航和信息区后者覆盖主区内容更适合按需展开的临时面板。除此之外组件还支持侧栏收起、保留窄栏以及拖拽调整宽度。它不仅把侧栏“放进页面”而且把侧栏在真实工作区里的常见交互也有涉及到让页面结构和交互状态保持一致。3.3 扩展浮层区域当页面之外还需要一个临时工作台时Layout还可以进一步切换到floating模式。此时整个布局会脱离普通文档流变成一个可拖动、可缩放的浮层面板。这个浮层内部仍然保留完整的布局能力头部、主区和左右侧栏都可以继续使用。Layout把页面结构、侧栏交互和浮层工作区设计到一套布局模型里让复杂页面从“能摆出来”变成“能组织起来”。4. 【新工具】 CLI新增脚手架一条命令就能起一个 TinyRobot 项目TinyRobot 现在通过 CLI 工具提供两个更便捷的接入方式basic- 适合从 0 到 1 快速启动完整工程add chat- 适合在已有 vue 项目里增量注入聊天能力4.1 CLI 快速创建完整项目create命令快速创建。使用basic模板快速搭建本地项目。# npm npx opentiny/tiny-robot-cli create # pnpm pnpm dlx opentiny/tiny-robot-cli create创建完成后根据指引安装依赖、启动项目配置大模型Key。basic 模板项目中内置了 DeekSeek 和 阿里百炼 两个大模型服务商可以通过在 .env 中配置对应的API_KEY同时内置 3 个 MCP 插件分别是 阿里百炼 提供的12306车票查询、高德地图以及 Model Context Protocol 的示例 MCP阿里百炼的 MCP 插件依赖于VITE_ALIYUN_DASHSCOPE_KEY。cd your-project-path cp .env.example .env # 编辑 .env # 阿里百炼 API_KEY。部分 MCP 插件依赖此变量 VITE_ALIYUN_DASHSCOPE_KEY # DeepSeek VITE_DEEPSEEK_API_KEY浏览器打开 http://localhost:5173/ 即可体验应用4.2 CLI 快速注入会话组件add chat命令注入现有应用。使用add chat模板快速注入 AI 聊天应用。在已有的项目根目录执行npx opentiny/tiny-robot-cli add chat pnpm dlx opentiny/tiny-robot-cli add chat根据指引选择选项生成完毕后将TinyRobotChat组件放到想要初始化聊天应用的位置。比如在src/App.vue中script setup langts import HelloWord from ./components/HelloWorld.vue import TinyRobotChat from ./TinyRobotChat.vue /script template HelloWorld / TinyRobotChat / /template配置大模型Key。在.env文件里补上对应的API_KEY。默认示例是VITE_DEEPSEEK_API_KEY安装依赖、启动项目。如果package.json被更新了记得执行一次安装pnpm install pnpm dev浏览器打开 http://localhost:5173/ 即可体验应用5.【其他】交互、功能细节优化 bug 修复✨新增能力Bubble: 新增统一的bubble-event事件通道和state-change状态联动以及 provider 级 box/content attributes 注入。Sender: 新增按字素簇统计字符数准确处理 Emoji 与组合字符长度。Sender: 新增hasExternalContent属性使附件等外部内容可以参与发送状态判断。useMessage: 抽离消息核心引擎并迁移到适配器架构支持在 Vue 与原生 JavaScript 场景复用消息处理能力。toolPlugin: 支持运行时工具提供者聚合与工具来源追踪便于根据当前消息上下文动态提供模型工具。优化改进Reasoning:思考气泡默认展开减少查看推理内容时的额外操作。McpServerPicker: 优化样式变量与整体视觉一致性。Attachments / Dropdown / Suggestion: 完善暗色主题变量、卡片 hover 与交互表面样式。Feedback / Welcome: 优化暗色模式下的展示效果。Docs / Demo: 优化示例壳层、导航、代码块与暗色模式显示效果。Build: 锁定 Tiptap 依赖并更新 Playgroundidbimport map。Build: 补充 CSSsideEffects确保样式文件在打包时被正确保留。Testing: 为 Sender 补充 E2E 选择器与 Mention / Suggestion / Template 场景覆盖。 问题修复Layout: 稳定声明类型并简化 slot 存在性判断。Bubble: 修复非标准 API 返回空reasoning_content时的渲染处理。Attachments: 修复附件列表归一化处理问题并补充测试用例。Sender: 修复动作按钮 tooltip 间距与渲染异常并稳定模板删除测试场景。Playground / Docs: 修复分享链接路径配置问题并移除 VitePress 品牌色硬编码。CI / Workspace: 预览工作流评论动作并排除 CLI 模板包进入 workspace。总结这一版的核心不是组件数量而是缩短从组件到产品的距离。Skills 解决能力怎么组织CLI 解决项目怎么起Anchor 解决长内容怎么看Layout 解决复杂页面怎么搭。四个方向都指向同一件事让搭建的过程更短让产出的应用更完整。关于 OpenTiny NEXTOpenTiny NEXT 是一套企业智能前端开发解决方案以生成式 UI 和 WebMCP 两大核心技术为基础对现有传统的 TinyVue 组件库、TinyEngine 低代码引擎等产品进行智能化升级构建出面向 Agent 应用的前端 NEXT-SDKs、AI Extension、TinyRobot智能助手、GenUI等新产品实现AI理解用户意图自主完成任务加速企业应用的智能化改造。欢迎加入 OpenTiny 开源社区。添加微信小助手opentiny-official 一起参与交流前端技术OpenTiny 官网https://opentiny.designTinyRobot 代码仓库https://github.com/opentiny/tiny-robot 欢迎star ⭐如果你也想要共建可以进入代码仓库找到 good first issue标签一起参与开源贡献~如果你有任何问题欢迎在评论区留言交流