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

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

TinyRobot 是什么

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

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

• 官网：opentiny.design/tiny-robot

为什么需要 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
• 自定义存储实现

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

快速上手

1.安装

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

入口引入样式：

import '@opentiny/tiny-robot/dist/style.css'

2. UI 层（组件示例）

<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>

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

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)
        },
      },
    ],
  })
}

4. 示例效果

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

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

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

• 执行下方命令，一键拉取官方演示模板到本地

npx degit opentiny/tiny-robot#chat-demo tiny-robot-chat-demo

• 进入项目目录，编辑 .env.local 文件，填写你的 API 地址和密钥（接口返回格式兼容 ChatGPT API 即可）

# 示例（以 DeepSeek 为例，可替换为 OpenAI/其他兼容接口）
VITE_API_URL=
VITE_API_KEY=sk-xxxx

•  安装依赖后运行，成功后将自动打开浏览器，即刻体验

# 进入项目目录
cd tiny-robot-chat-demo
# 安装依赖
pnpm i
# 启动项目并自动打开浏览器
pnpm dev --open

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

未来展望与共建邀请

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

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

• TinyRobot 仓库：github.com/opentiny/ti…（欢迎star）
• TinyRobot 文档：docs.opentiny.design/tiny-robot/
• OpenTiny 官网：opentiny.design/
• 关于我们：opentiny.design/opentiny-de…