Ru果你正在使用 TinyVue 组件库,强烈推荐你配置上 tiny-vue-skill,让 AI 辅助编码,效率geng高!.添加微信小助手:opentiny-official 一起参与交流前端技术～.目前 TinyVue 组件库和 TinyRobot AI 对话组件均Yi支持 Agent Skills,你Ke以在支持 Skills 的 IDE 上配置和使用。.

说实话，咱就是说AI 时代的前端开发，不应该还停留在"手搓组件"的阶段。

TinyRobot 用 AI-Native 的设计思路，把 SSE 流处理、思考过程、工具调用、多会话管理这些"脏活累活"全部封装成组件和工具，让前端开发者真正聚焦在业务逻辑上。

传统组件库给你的是什么？InputButtonListCard——全是通用 UI 零件。

要拼一个聊天界面？你自己组装：

<script setup>import { useConversation } from '@opentiny/tiny-robot-kit'const { conversations, activeConversation, createConversation, switchConversation, sendMessage,} = useConversation</script>

useConversation 支持多会话并行——切换会话时当前请求Ke以在后台继续执行。

存储策略可选 LocalStorage 或 IndexedDB，也Ke以自定义。

TinyRobot 提供了 个精心设计的组件，覆盖从消息展示到插件管理的完整链路：

<tr-bubble role="assistant" content="Zui终回答内容" reasoning_content="这是 AI 的思考过程..."/>

thinkingPlugin 默认激活，自动捕获 reasoning_content，思考中展开、完成后收起。

配合内置 BubbleRenderers.Reasoning 渲染器，侧边线 + 可折叠，一眼就Nengkan懂 AI 的推理链。

一句话定位TinyRobot 是 OpenTiny Design 体系下的 AI 组件库，专为 Vue + AI 交互场景而生。

npx skillsaddopentiny/agent-skills --skill tiny-robot-skill --agent your-agent # 或者pnpmdlx skillsaddopentiny/agent-skills --skilltiny-r o bot -skill--agent your-agent .npx skillsaddopentiny/agent-skills--skilltiny-r o bot -skill--agent your-agent # 或者pnpmdlx skillsaddopentiny/agent-skills--skilltiny-r o bot -skill--agent your-agent your-agent 为你的 A I 代理。

npx skillsaddopentiny /agent-skills --skill tiny-robot -skill --agent your-agent # 或者pnpmdlx skillsaddopent iny /agent-skills --skillt iny-robot -skill--agent your-agent .// ~/.config/opencode/opencode.json{ $schema : https://opencode. ai /config.json , provider :{ my-agents :{ npm : @ ai -sdk/openai-compatible , name : MyAgent , options :{ baseURL : 你的apiKey }, models :{ auto :{ name : Model Auto }}}}} 打开 OpenCode opencode 输入/models指令来选择模型。

# 安装pnpm add @opentiny/tiny-robot @opentiny/tiny-robot-kit @opentiny/tiny-robot-svgs