TinyRobot v0.5.0 新版本强在哪？

前言

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

最近我们正式发布 TinyRobot v0.5.0 版本，这次更新不只是多了几个组件，而是让"搭一个 AI 聊天应用"这件事变得更简单了。

• 开源地址：github.com/opentiny/ti...（欢迎 Star ⭐）
• 官方网站：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 从多种来源加载 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 模板项目中内置了 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 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

浏览器打开 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 依赖并更新 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理解用户意图自主完成任务，加速企业应用的智能化改造。

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～

OpenTiny 官网：opentiny.design

TinyRobot 代码仓库：github.com/opentiny/ti... （欢迎star ⭐）

如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~如果你有任何问题，欢迎在评论区留言交流！