TinyRobot v0.5.0新版本升级亮点

来源：互联网 2026-07-21 08:08:08

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

前言

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，使模型在回答问题或执行任务时遵循相应要求。团队也可将业务知识和任务要求独立维护，在不同项目和聊天场景中反复使用。

TinyRobot v0.5.0新版本升级亮点

当 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 定义，后续接入聊天流程时无需关心其来源。这种设计既适合个人开发时快速试用，也适合团队通过代码仓库集中维护和版本管理。

TinyRobot v0.5.0新版本升级亮点

1.2 保存并复用 Skill

针对不同运行环境，TinyRobot 提供多种保存方式。Memory Storage 适合临时预览和测试；IndexedDB Storage 可在浏览器中跨会话保留用户导入的 Skill；File System Storage 则适合 Node.js 服务或已有本地目录的项目。应用可先导入和保存 Skill，再根据名称读取并用于聊天。Skill 的保存与界面中的启用状态相互独立，开发者可继续使用复选框、下拉框或其他符合产品体验的交互方式。

TinyRobot v0.5.0新版本升级亮点

1.3 接入聊天流程

在聊天场景中，应用既可以直接启用用户已指定的 Skill，也可以将候选 Skill 交给模型，根据当前问题自动匹配。确定 Skill 后，skillPlugin 会生成对应的 instructions；如果 Skill 带有附加文件，还会提供 list_skill_files 和 read_skill_file 等运行时工具，由 toolPlugin 收集并执行模型返回的工具调用。Vue 应用可通过 skillPlugin 接入这些能力。当前使用的 Skill 和选择方式可以跟随界面状态变化，每次发送消息时都会读取最新配置，因此无需为切换 Skill 重新创建整套聊天实例。

TinyRobot v0.5.0新版本升级亮点

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

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

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

2.1 目录建立

Anchor 的接入方式较为直接。只需准备目录内容，再让正文中的对应内容与目录一一对应，组件就能将整块长内容整理成可跳转的目录。这种方式既适用于文章页，也适用于对话页，只要内容本身有清晰分段，就可以自然接入目录导航。

2.2 跳转与高亮

使用 Anchor 组件后，用户可以直接通过目录在长内容中跳转。点击某一项，页面就会滚动到对应内容；滚动到某一段，目录也会同步高亮到对应项。为了让用户更容易确认当前位置，Anchor 还支持在跳转后对目标内容做短暂高亮。这样可以使用户更方便地获取信息，浏览过程更加顺畅。

TinyRobot v0.5.0新版本升级亮点

2.3 搜索与展开

当目录项增多时，查找有效内容的速度可能变慢。Anchor 支持直接在目录中搜索，用户可通过关键词快速找到目标内容，在长页面中查找信息更加省力。除搜索外，目录面板还支持展开、收起，以及左右停靠。这样它既可以作为轻量的侧边目录存在，也可以作为页面中的稳定辅助导航使用，适配不同类型的页面布局。

TinyRobot v0.5.0新版本升级亮点

Anchor 不仅是增加了一个目录组件，而是将“整理目录、快速跳转、滚动跟随和搜索查找”整合为一种更适合长内容页面的导航方式，让长页面更容易查看，也更容易找到目标内容。

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

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

3.1 搭建页面结构

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

TinyRobot v0.5.0新版本升级亮点

3.2 统一侧栏交互

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

TinyRobot v0.5.0新版本升级亮点

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

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

TinyRobot v0.5.0新版本升级亮点

配置大模型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=

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

TinyRobot v0.5.0新版本升级亮点

4.2 CLI 快速注入会话组件

add chat命令注入现有应用。 使用 add chat 模板快速注入 AI 聊天应用。在已有项目根目录执行：

 复制代码npx @opentiny/tiny-robot-cli add chat
pnpm dlx @opentiny/tiny-robot-cli add chat

根据指引选择选项。

TinyRobot v0.5.0新版本升级亮点

生成完毕后，将 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 理解用户意图自主完成任务，加速企业应用的智能化改造。

侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述