前端提效神器全新AI组件库TinyRobot改写日常开发模式

前端提效神器！全新 AI 组件库 TinyRobot，改写日常开发模式

还在手搓 SSE 流处理？还在用 div 拼 Chat UI？醒醒吧，2026 年了。

那些年，我们踩过的 AI 前端坑

做过 AI 对话界面的同学都知道，这玩意儿简直是"胶水代码地狱"：

SSE 流式处理------手动拼装的噩梦

// 传统写法：手动解析 SSE 事件流
const eventSource = new EventSource('/api/chat');
eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  if (data.choices[0].delta.content) {
    // 手动拼接文本片段
    currentText += data.choices[0].delta.content;
    // 手动更新 DOM
    document.getElementById('chat-content').innerText = currentText;
  }
  if (data.choices[0].finish_reason === 'stop') {
    eventSource.close();
  }
};

光一个 SSE 就要处理：连接建立、数据解析、增量拼接、断线重连、取消中断......每个场景都得自己写一遍。

Chat UI 组装------拼图式开发

传统组件库给你的是什么？Input、Button、List、Card------全是通用 UI 零件。要拼一个聊天界面？你自己组装：

• 消息列表怎么渲染？手写循环 + 条件判断
• 流式文本怎么展示？手动监听 + 拼接更新
• AI 思考过程怎么呈现？自己写折叠面板
• 工具调用怎么可视化？自己写 JSON 展示 + 执行状态
• 多会话怎么切换？自己管理状态 + localStorage

一个完整的 AI Chat 页面，60% 以上是胶水代码，只有 40% 是真正的业务逻辑。这不离谱吗？

reasoning_content、tool_calls------被忽视的"新物种"

大模型的输出早就不是纯文本了：

• reasoning_content：AI 的思考过程（DeepSeek、o1 等模型的核心特性）
• tool_calls：AI 要调用外部工具（Function Calling 的标配）
• 多模态内容：图文混合、结构化卡片

传统组件库完全没考虑这些，你得自己解析、自己渲染、自己管理状态。每加一个模型特性，就多一堆 hack。

TinyRobot：AI-Native，不是"通用 UI + Chat 补丁"

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

一句话定位：TinyRobot 不是给传统组件库"加个聊天补丁"，而是从 AI 交互的本质出发，重新设计组件模型。

对比维度	传统组件库 + 手工拼装	TinyRobot
SSE 流式处理	手动 EventSource + 逐帧拼接	useMessage + responseProvider 一行搞定
AI 思考过程	自写折叠面板 + 手动监听	thinkingPlugin 自动展开/收起
工具调用渲染	手写 JSON 展示 + 状态管理	toolPlugin + BubbleRenderers.Tool 内置渲染
多会话切换	自写状态管理 + localStorage	useConversation + 存储策略开箱即用
消息分组	手写条件渲染 + 样式切换	BubbleList + groupStrategy 自动分组

关键特性一览

1. SSE 流式------从 30 行到 3 行

<script setup>
import { useMessage, sseStreamToGenerator } from '@opentiny/tiny-robot-kit'

const { messages, sendMessage, requestState } = useMessage({
  responseProvider: async (body, signal) => {
    const response = await fetch('/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
      signal,
    })
    return sseStreamToGenerator(response, { signal })
  },
})
</script>

三行代码，SSE 流式连接、增量更新、中断取消全部搞定。responseProvider 支持 Promise（非流式）、AsyncGenerator（流式）、Promise<AsyncGenerator> 三种返回值，无缝对接各种后端。

2. tool_calls 渲染------从零实现到插件激活

<script setup>
import { useMessage, toolPlugin } from '@opentiny/tiny-robot-kit'

const { messages, sendMessage } = useMessage({
  responseProvider,
  plugins: [
    toolPlugin({
      getTools: async () => [
        {
          type: 'function',
          function: {
            name: 'get_weather',
            description: 'Get weather by city name.',
            parameters: {
              type: 'object',
              properties: { city: { type: 'string' } },
              required: ['city'],
            },
          },
        },
      ],
      callTool: async (toolCall) => {
        const args = JSON.parse(toolCall.function?.arguments || '{}')
        return `Weather of ${args.city}: Sunny.`
      },
    }),
  ],
})
</script>

toolPlugin 自动处理：工具声明注入、tool_calls 解析、工具执行、结果回写、下一轮请求。内置的 BubbleRenderers.Tool 渲染器直接可视化工具调用过程。

3. reasoning_content 展示------思考过程不再是黑箱

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

thinkingPlugin 默认激活，自动捕获 reasoning_content，思考中展开、完成后收起。配合内置 BubbleRenderers.Reasoning 渲染器，侧边线 + 可折叠，一眼就能看懂 AI 的推理链。

4. 多会话管理------从手动管理到引擎池

<script setup>
import { useConversation } from '@opentiny/tiny-robot-kit'

const {
  conversations,
  activeConversation,
  createConversation,
  switchConversation,
  sendMessage,
} = useConversation({
  useMessageOptions: { responseProvider },
})
</script>

useConversation 支持多会话并行------切换会话时，当前请求可以在后台继续执行。存储策略可选 LocalStorage 或 IndexedDB，也可以自定义（比如对接远程服务器）。

5. MCP 集成------让 AI 接入工具生态

import { toolPlugin, useMessage } from '@opentiny/tiny-robot-kit'
import { getTools, callTool } from './mcp-amap'

useMessage({
  responseProvider,
  plugins: [
    toolPlugin({
      getTools: async () => getTools(),
      callTool: async (toolCall) => {
        return await callTool(
          toolCall.function.name,
          JSON.parse(toolCall.function.arguments),
        )
      },
    }),
  ],
})

搭配 @modelcontextprotocol/sdk，直接接入 MCP 服务（如高德地图等），扩展 AI 的工具调用能力。TinyRobot 还提供了 McpServerPicker 和 McpAddForm 组件，让用户在界面上管理和添加 MCP 插件。

组件阵容：16 个组件，覆盖 AI 交互全场景

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

类别	组件	说明
核心交互	Bubble	消息气泡，支持流式文本、Markdown、图片、推理、工具调用等多种渲染
	Sender	消息输入框，支持模板编辑、@提及、智能联想、语音输入、文件上传
	Container	对话容器，支持全屏/窗口模式
	Prompts	提示集，引导用户快速开始对话
欢迎与引导	Welcome	欢迎页，展示标题、描述、图标和底部内容
反馈与互动	Feedback	气泡反馈，支持操作按钮、点赞/踩、数据来源展示
会话管理	History	历史记录列表，支持分组、重命名、删除、自定义菜单
附件与拖拽	Attachments	文件附件展示
	DragOverlay	拖拽浮层
MCP 插件	McpAddForm	MCP 插件添加表单，支持表单/代码两种添加方式
	McpServerPicker	MCP 插件选择器，已安装/市场双标签页管理
建议与提示	SuggestionPills	建议按钮组，溢出模式 + 自动滚动
	SuggestionPopover	建议弹出框
	DropdownMenu	下拉菜单
主题与兼容	Theme	主题配置，亮暗色切换 + 自定义主题 + 持久化
	SenderCompat	Sender 兼容组件，v0.3 → v0.4 快速迁移

加上配套的 3 个 Composable 工具：

工具	说明
useMessage	消息状态管理 + 流式响应 + 插件体系
useConversation	多会话管理 + 存储策略 + 后台引擎池
sseStreamToGenerator / formatMessages 等	辅助工具函数

开发体验：从"拼图"到"搭积木"

TinyRobot 改变了前端的日常开发模式：

之前：

1. 研究 SSE 协议 → 手写流处理
2. 设计消息结构 → 手写渲染逻辑
3. 实现思考过程展示 → 自写折叠组件
4. 处理工具调用 → 自写 JSON 可视化
5. 管理多会话 → 自写状态 + 存储
6. 联调样式 → CSS 一把梭

现在：

1. 安装 TinyRobot → 引入组件
2. 配置 responseProvider → 流式搞定
3. 用 BubbleList + messages → 渲染搞定
4. 启用 thinkingPlugin → 思考过程搞定
5. 启用 toolPlugin → 工具调用搞定
6. 用 useConversation → 多会话搞定

胶水代码从 60% 降到不到 10%，剩下的全是业务逻辑------这才是前端该干的事。

快速上手

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

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import '@opentiny/tiny-robot/dist/style.css'

const app = createApp(App)
app.mount('#app')

<!-- App.vue -->
<template>
  <tr-bubble-list :messages="messages" :role-configs="roleConfigs" auto-scroll />
  <tr-sender v-model="inputText" @submit="handleSubmit" :loading="isProcessing" />
</template>

<script setup>
import { ref } from 'vue'
import { TrBubbleList, TrSender } from '@opentiny/tiny-robot'
import { useMessage, sseStreamToGenerator } from '@opentiny/tiny-robot-kit'

const inputText = ref('')
const { messages, sendMessage, isProcessing } = useMessage({
  responseProvider: async (body, signal) => {
    const response = await fetch('/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
      signal,
    })
    return sseStreamToGenerator(response, { signal })
  },
})

const roleConfigs = {
  assistant: { placement: 'start' },
  user: { placement: 'end' },
}

function handleSubmit(text) {
  sendMessage(text)
  inputText.value = ''
}
</script>

一个完整的 AI Chat 页面，不到 30 行代码。这就是 TinyRobot 带来的效率变革。

写在最后

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

如果你还在为 AI 对话界面写胶水代码，试试 TinyRobot------你会发现，原来开发可以这么轻松。

现在就上手 ：npm install @opentiny/tiny-robot

---

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 ⭐） TinyRobot skill源码：github.com/opentiny/ag... （欢迎 Star ⭐）

---