TinyRobot v0.5.0新版本升级亮点

前言

TinyRobot 是一套专为 AI 应用构建的前端交互框架，能够帮助团队快速搭建企业级 AI 助手、智能客服与多轮对话系统。基于 OpenTiny 设计体系，它提供从对话 UI、流式渲染到会话管理的完整能力，让开发者无需自行研发复杂交互逻辑，即可构建体验一致、可扩展的 AI 产品。从原型到可运行的应用，整个过程被压缩到数小时以内。

刚刚正式发布的 TinyRobot v0.5.0 版本，这次更新不仅增加了多个组件，更让“搭建一个 AI 聊天应用”这件事变得更加简单。

v0.5.0 变更特性概览

• 【新特性】新增 Skills 能力
• 【新特性】CLI：新增脚手架，一条命令即可创建一个 TinyRobot 项目
• 【新组件】Anchor：新增内容导航组件，长回答和长对话更易于阅读
• 【新组件】Layout：新增布局组件，支持常规布局和浮层布局模式
• 【其他】交互、功能细节优化与 bug 修复

TinyRobot v0.5.0 新特性解读

1. 【新特性】：新增 Skills 能力

本次新增的 Skills 能力是一个功能丰富的模块。它本质上是一种轻量、开放的格式，用于为 AI Agent 注入专业知识和工作流程。每个 Skill 就是一个包含 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 从多种来源加载 Skill

TinyRobot Kit 支持从浏览器文件、Node.js 文件系统和 GitHub 仓库加载 Skill。开发者既可以让用户在页面中选择本地目录，也可以读取服务端已有的 Skill 目录，或者直接使用仓库中统一维护的内容。加载完成后，不同来源都会转换为一致的 Skill 定义，后续接入聊天流程时无需关心其来源。这种设计既适合个人开发时快速试用，也适合团队通过代码仓库集中维护和版本管理。

1.2 保存并复用 Skill

针对不同运行环境，TinyRobot 提供多种保存方式。Memory Storage 适合临时预览和测试；IndexedDB Storage 可在浏览器中跨会话保留用户导入的 Skill；File 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 模板项目中内置了 DeepSeek 和阿里百炼两个大模型服务商，可通过在 .env 中配置对应的 API_KEY。同时内置 3 个 MCP 插件，分别是阿里百炼提供的12306车票查询、高德地图，以及 Model Context Protocol 的示例 MCP。阿里百炼的 MCP 插件依赖于 VITE_ALIYUN_DASHSCOPE_KEY。

 复制代码cd 
cp .env.example .env# 编辑 .env
# 阿里百炼 API_KEY。部分 MCP 插件，依赖此变量
VITE_ALIYUN_DASHSCOPE_KEY=
# DeepSeek
VITE_DEEPSEEK_API_KEY=

浏览器打开 ，即可体验应用。

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 lang="ts">
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

浏览器打开 ，即可体验应用。

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 依赖并更新 Playground idb import map。
• Build: 补充 CSS sideEffects，确保样式文件在打包时被正确保留。
• 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 NEXT

OpenTiny NEXT 是一套企业智能前端开发解决方案，以生成式 UI 和 WebMCP 两大核心技术为基础，对现有传统的 TinyVue 组件库、TinyEngine 低代码引擎等产品进行智能化升级，构建出面向 Agent 应用的前端 NEXT-SDKs、AI Extension、TinyRobot 智能助手、GenUI 等新产品，实现 AI 理解用户意图自主完成任务，加速企业应用的智能化改造。