TinyRobot：基于 OpenTiny Design 的企业级 AI 交互组件框架

OpenTiny社区2026-03-11 16:36

本文由云软件体验技术团队胡靖原创。

在 AI 应用蓬勃发展的今天，企业对智能对话、AI 助手等产品的需求日益旺盛。为了帮助开发者快速构建高质量、体验一致的 AI 应用，越来越多的 AI 组件库开始涌现。TinyRobot 作为 OpenTiny 生态的一员，遵循 OpenTiny Design 设计体系，提供丰富的 AI 交互组件和工具，让开发者只需几步即可轻松构建企业级 AI 产品，降低开发难度和成本，提高开发效率和灵活性。

TinyRobot 是什么

面向企业 AI 应用的 Vue 3 交互组件与对话框架。

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

为什么需要 TinyRobot

构建 AI 对话类产品通常涉及以下工程挑战：

  • 流式响应渲染与中断控制
  • 多轮会话状态管理
  • 工具调用结果展示
  • Markdown / 多模态内容渲染
  • 输入增强（联想、附件、模板）
  • UI 与模型交互逻辑耦合严重

借助 TinyRobot 的标准化组件与组合式 API，开发者不再需要从零实现复杂的 AI 交互系统，只需按需组装组件，就能快速完成高质量 AI 对话产品开发。

核心能力

1. 原生 AI 交互组件体系

内置面向对话场景设计的 UI 组件：

  • Bubble：支持流式文本、Markdown、代码块、工具调用展示
  • Sender：支持多行输入、模板、@提及、附件上传
  • Container：会话容器与布局系统
  • History：会话历史管理
  • Attachments：文件与多模态输入展示
  • ThemeProvider：主题与外观系统

组件采用可组合架构，支持按需引入与 Tree Shaking。

2. 模型无关的响应处理机制

通过 useMessage 与 responseProvider 抽象 AI 响应协议：

  • 原生支持流式响应
  • 支持工具调用（Function Calling）
  • 提供插件扩展机制
  • 内置请求状态管理与中断控制

开发者仅需实现模型请求逻辑，即可完成完整对话链路。

3. 可扩展插件与工具调用体系

TinyRobot 提供标准化工具调用展示机制：

  • 自动解析 tool_calls
  • 支持自定义插件扩展
  • 支持外部系统集成

该机制使 AI 应用具备可扩展能力，而非仅限文本对话。

4. 主题系统与品牌定制

基于 CSS 变量的主题架构：

  • 亮色 / 暗色模式切换
  • 主题嵌套支持
  • 持久化存储
  • 品牌级 UI 定制能力

可快速构建符合企业视觉规范的 AI 产品界面。

5. 会话存储与状态持久化

支持多种存储策略：

  • LocalStorage
  • IndexedDB
  • 自定义存储实现

适用于长对话、用户偏好与多会话管理场景。

快速上手

安装

bash 复制代码 
# tiny-robot 套件
pnpm add @opentiny/tiny-robot @opentiny/tiny-robot-kit @opentiny/tiny-robot-svgs
# markdown 渲染器依赖
pnpm add markdown-it dompurify

入口引入样式：

arduino 复制代码 
import '@opentiny/tiny-robot/dist/style.css'

1. UI 层（组件示例）

开箱即用，只需简单配置，就能渲染完整 AI 聊天界面，并自动处理消息滚动、气泡显示和输入状态。

js 复制代码 
<template>
  <div class="chat-demo">
    <!-- 在 BubbleList 上配置其他渲染器，需要使用 BubbleProvider 包裹 -->
    <tr-bubble-provider :fallback-content-renderer="BubbleRenderers.Markdown">
      <tr-bubble-list class="chat-list" :messages="messages" :role-configs="roles" auto-scroll />
    </tr-bubble-provider>
    <tr-sender
      v-model="inputMessage"
      :placeholder="isProcessing ? '正在思考中...' : '请输入问题'"
      :loading="isProcessing"
      :clearable="true"
      @submit="handleSubmit"
      @cancel="abortRequest"
    />
  </div>
</template>

<script setup lang="ts">
import { BubbleRenderers, TrBubbleList, TrBubbleProvider, TrSender, type BubbleRoleConfig } from "@opentiny/tiny-robot";
import { IconAi, IconUser } from "@opentiny/tiny-robot-svgs";
import { h, ref } from "vue";
import { useChat } from "./useChat";

const { messages, isProcessing, sendMessage, abortRequest } = useChat();
const inputMessage = ref("");

function handleSubmit(content: string) {
  if (!content || isProcessing.value) return;
  sendMessage(content);
  inputMessage.value = "";
}

// 简洁角色配置：左右排列 + 头像
const roles: Record<string, BubbleRoleConfig> = {
  assistant: { placement: "start", avatar: h(IconAi, { style: { fontSize: "32px" } }) },
  user: { placement: "end", avatar: h(IconUser, { style: { fontSize: "32px" } }) },
};
</script>

<style scoped>
.chat-demo {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.chat-list {
  height: 400px;
}

/* 使用 data-type 选择器可以匹配不同类型的渲染器 */
:deep([data-type="markdown"]) p {
  margin: 0;
}
</style>

2. 消息数据处理（Kit 示例）

Kit 自动管理消息状态、请求中状态和中止操作，无需手动处理复杂逻辑。

js 复制代码 
import { useMessage, sseStreamToGenerator } from '@opentiny/tiny-robot-kit'

export function useChat() {
  return useMessage({
    initialMessages: [{ role: 'assistant', content: '你好！我是 TinyRobot 示例助手。' }],
    responseProvider: async (requestBody, abortSignal) => {
      // 替换为你的大模型 API 地址
      const url = import.meta.env.VITE_API_URL

      if (!url) {
        throw new Error('api url is not set')
      }

      // 替换为你的大模型 API 密钥
      const apiKey = import.meta.env.VITE_API_KEY

      if (!apiKey) {
        throw new Error('api key is not set')
      }

      const res = await fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',

          Authorization: `Bearer ${apiKey}`,
        },
        body: JSON.stringify({
          model: 'deepseek-chat',
          ...requestBody,
          stream: true,
        }),
        signal: abortSignal,
      })
      return sseStreamToGenerator(res, { signal: abortSignal })
    },
    plugins: [
      {
        onError: ({ currentTurn, error }) => {
          currentTurn[currentTurn.length - 1]!.content = String(error)
        },
      },
    ],
  })
}

3. 示例效果

完成上述步骤后，你即可获得一个完整的 AI 聊天界面，支持：

  • 流式回复，实时展示助手回答，Markdown渲染
  • 自动滚动，始终显示最新消息
  • 输入框状态管理，包括加载状态和中止请求

想快速体验？执行下面步骤，在本地运行

  • 执行下方命令，一键拉取官方演示模板到本地
bash 复制代码 
npx degit opentiny/tiny-robot#chat-demo tiny-robot-chat-demo
  • 进入项目目录，编辑 .env.local 文件，填写你的 API 地址和密钥（接口返回格式兼容 ChatGPT API 即可）
ini 复制代码 
# 示例（以 DeepSeek 为例，可替换为 OpenAI/其他兼容接口）
VITE_API_URL=https://api.deepseek.com/chat/completions
VITE_API_KEY=sk-xxxx
  • 安装依赖后运行，成功后将自动打开浏览器，即刻体验
bash 复制代码 
# 进入项目目录
cd tiny-robot-chat-demo
# 安装依赖
pnpm i
# 启动项目并自动打开浏览器
pnpm dev --open

更多 API 细节与组件用法，请参考TinyRobot 官方文档

未来展望与共建邀请

TinyRobot 将持续优化 AI 组件与交互能力，重点提升多轮对话、流式消息显示、会话管理和主题定制的支持，同时扩展更多适用于 AI 应用的组件，让开发者能够更高效地构建智能界面。

我们欢迎开发者加入共建，一起推动 TinyRobot 的发展：

相关推荐
hi大雄1 小时前
我的 2025 — 名为《开始的勇气》🌱
前端·年终总结
用户3153247795451 小时前
Tailwind CSS 学习手册
前端·css
踩着两条虫1 小时前
AI 驱动的 Vue3 应用开发平台 深入探究（三）：核心概念之引擎架构与生命周期
前端·vue.js·ai编程
是小段呀2 小时前
agent-browser 使用教程
ai编程
发际线向北2 小时前
0x00 Android 渲染机制解析
前端
_Eleven2 小时前
Tiptap 完全使用指南
前端·vue.js·github
甲维斯2 小时前
完整体验一下腾讯云的CodingPlan
ai编程
chaors2 小时前
Langchain入门到精通0x02：ICEL
人工智能·langchain·ai编程
小蜜蜂dry2 小时前
nestjs学习 - 中间件（Middleware）
前端·nestjs
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03本地部署 OpenClaw + DeepSeek-R1 完全指南04OpenClaw 连接飞书完整指南：插件安装、配置与踩坑记录05OpenClaw 飞书机器人不回复消息？3 小时踩坑总结06Window 10部署openclaw报错node.exe : npm error code 12807OpenClaw 接入 QQ Bot 完整实践指南08OpenClaw macOS 完整安装与本地模型配置教程（实战版）09npm-error code 128问题解决方法10得物前端部门，没了