TinyRobot v0.5.0 新版本强在哪？

OpenTiny社区
96 阅读12分钟

前言

TinyRobot 是一套专为 AI 应用构建的前端交互框架，帮助团队快速搭建企业级 AI 助手、智能客服与多轮对话系统。基于 OpenTiny 设计体系，TinyRobot 提供从对话 UI、流式渲染到会话管理的完整能力，使开发者无需自研复杂交互逻辑，即可构建体验一致、可扩展的 AI 产品。从原型到可运行 AI 应用，仅需数小时。
最近我们正式发布 TinyRobot v0.5.0 版本，这次更新不只是多了几个组件，而是让"搭一个 AI 聊天应用"这件事变得更简单了。

欢迎大家体验这个版本。如果你在使用过程中有建议、想法或问题，也欢迎通过 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，让模型在回答问题或执行任务时遵循对应要求；团队也可以将业务知识和任务要求独立维护，并在不同项目和聊天场景中复用。

1.png

Skill 参与对话时，skillPlugin 负责解析本次请求启用的 Skill，并生成对应的 instructions 和运行时工具。插件不会固定 instructions 在模型请求中的承载方式，应用可以根据模型或 provider 的协议，将其写入 system message、user message 或独立请求字段。Skill 带有参考文件时，模型还可以通过运行时工具按需读取其中的文本内容。

下面以 vue-best-practices 为例。用户在界面中启用 Skill 后提出 Vue 开发问题，模型会遵循其中的开发规范；需要进一步了解响应式、单文件组件或组件数据流时，还可以读取 Skill 附带的参考资料。

2.gif

1.1 从多种来源加载 Skill

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

3.png

1.2 保存并复用 Skill

针对不同运行环境，TinyRobot 提供了多种保存方式。Memory Storage 适合临时预览和测试；IndexedDB Storage 可以在浏览器中跨会话保留用户导入的 Skill；File System Storage 则适合 Node.js 服务或已有本地目录的项目。

应用可以先导入和保存 Skill，再根据名称读取并用于聊天。Skill 的保存与界面中的启用状态彼此独立，开发者可以继续使用复选框、下拉框或其他符合产品体验的交互方式。

4.png

1.3 接入聊天流程

在聊天场景中，应用既可以直接启用用户已经指定的 Skill，也可以把候选 Skill 交给模型，根据当前问题自动匹配。确定 Skill 后，skillPlugin 会生成对应的 instructions；如果 Skill 带有附加文件，还会提供 list_skill_files 和 read_skill_file 等运行时工具，由 toolPlugin 收集并执行模型返回的工具调用。

Vue 应用可以通过 skillPlugin 接入这些能力。当前使用的 Skill 和选择方式可以跟随界面状态变化，每次发送消息时都会读取最新配置，因此不需要为了切换 Skill 重新创建整套聊天实例。

5.png

Skills 不只是增加了一组底层 API，而是为聊天应用提供了一种更清晰的能力组织方式：模型怎么完成任务、需要参考哪些内容，可以从页面代码中独立出来，并在不同项目中持续复用。

2. 【新组件】 Anchor：新增内容导航组件，长回答和长对话更容易阅读

新增 Anchor 锚点组件，用来给长文章、长对话和信息较多的页面增加目录导航。它可以把页面内容整理成目录，支持快速跳转、滚动跟随高亮，以及目录搜索，帮助用户更快找到想看的内容。

2.1 目录建立

Anchor 的接入方式比较直接。我们只需要准备目录内容，再让正文中的对应内容和目录一一对应，组件就能把整块长内容整理成可跳转的目录。

这种方式既适用于文章页，也适用于对话页，只要内容本身有清晰分段，就可以很自然地接入目录导航。

2.2 跳转与高亮

使用 Anchor 组件之后，用户就可以直接通过目录在长内容里跳转。点到哪一项，页面就会滚动到对应内容；滚动到哪一段，目录也会跟着亮到哪一项。

为了让用户更容易确认当前位置，Anchor 还支持在跳转后对目标内容做短暂高亮。这样可以使用户更方便的获取到信息，浏览过程会更顺畅。

6.gif

2.3 搜索与展开

当目录项越来越多时，查找有效内容的速度会变慢。Anchor 支持直接在目录里搜索，用户可以通过关键词快速找到目标内容，长页面里查找信息会更省力。

除了搜索，目录面板还支持展开、收起，以及左右停靠。这样它既可以作为一个轻量的侧边目录存在，也可以作为页面里的稳定辅助导航使用，适配不同类型的页面布局。

7.gif

Anchor 不是单纯增加了一个目录组件，而是把“整理目录、快速跳转、滚动跟随和搜索查找”放进了一套更适合长内容页面的导航方式里，让长页面更容易看，也更容易找。

3.【新组件】Layout：新增布局组件，支持常规布局和浮层布局模式

Layout 布局组件支持标准页面结构、可收起侧栏和浮层工作区，适用于对话页、工作台和复杂编辑页。在复杂的页面中，布局问题主要表现在多个区域如何实现协同交互。
当一个页面同时有导航区、主内容区、信息区，以及临时展开的操作面板时，如果这些能力分别实现，结构和交互就很容易分散。Layout 这次重点解决的，就是这类复杂工作区的组织问题。

3.1 搭建页面结构

Layout 提供了一套完整而清晰的页面结构，大家可以直接使用 left-aside、header、main、footer 和 right-aside 这几个区域，把页面最基础的结构搭好。
对于后台页、编辑页和对话页这类结构明确的界面，这样的方式更直接，也更稳定。

8.png

3.2 统一侧栏交互

Layout 支持 dock 和 drawer 两种侧栏模式：前者是整体布局的一部分，适合常驻导航和信息区；后者覆盖主区内容，更适合按需展开的临时面板。
除此之外，组件还支持侧栏收起、保留窄栏，以及拖拽调整宽度。它不仅把侧栏“放进页面”，而且把侧栏在真实工作区里的常见交互也有涉及到，让页面结构和交互状态保持一致。

9.png

3.3 扩展浮层区域

当页面之外还需要一个临时工作台时，Layout 还可以进一步切换到 floating 模式。此时整个布局会脱离普通文档流，变成一个可拖动、可缩放的浮层面板。
这个浮层内部仍然保留完整的布局能力，头部、主区和左右侧栏都可以继续使用。

10.gif

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

创建完成后，根据指引安装依赖、启动项目 

11.png

配置大模型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/ ，即可体验应用

12.png

4.2 CLI 快速注入会话组件

add chat命令注入现有应用。 使用 add chat 模板快速注入 AI 聊天应用。

在已有的项目根目录执行：

npx @opentiny/tiny-robot-cli add chat
pnpm dlx @opentiny/tiny-robot-cli add chat

根据指引选择选项

13.png

生成完毕后，将 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/ ，即可体验应用

14.gif

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标签，一起参与开源贡献~如果你有任何问题，欢迎在评论区留言交流！

avatar
文章
阅读
粉丝