OpenTiny NEXT 从入门到精通·第 5 篇：生态篇——TinyEngine 低代码平台与 TinyRobot 智能助手

如果说组件库是“砖瓦”，TinyEngine 就是“建筑图纸”——它让页面搭建从手工编码走向可视化配置；如果说低代码是“骨架”，TinyRobot 就是“神经”——它让每个应用都能拥有智能对话能力。本篇将带你深入 OpenTiny 生态中的两大核心工具：TinyEngine 低代码引擎和 TinyRobot 企业智能助手，并串联起 TinyCLI、TinyPro 等配套工具，帮助你构建完整的开发生态。

低代码平台听起来很美，但市面上的产品往往有两个极端：要么功能太死板，只能做简单的 CRUD 页面；要么高度定制困难，被平台“锁定”。TinyEngine 的设计哲学恰恰相反——它是一个“低代码引擎底座”，而不是一个“低代码平台成品”。你可以基于它，构建出专属于自己业务场景的低代码平台，并且生成的代码可以独立部署，完全不依赖引擎运行时。

与此同时，AI 能力正在重塑低代码的开发模式。2025 年，TinyEngine 全面升级了 AI 插件，支持 Agent 模式和 Chat 模式，用户甚至可以通过上传一张设计稿截图，让 AI 自动识别并生成可编辑的页面。

本篇文章将从以下几个方面展开：

1. TinyEngine 核心架构：洛书架构与插件化设计
2. AI 智能搭建：从自然语言到页面的一键生成
3. TinyRobot 企业智能助手：为应用注入 AI 对话能力
4. TinyPro 中后台模板：开箱即用的企业级系统
5. TinyCLI 脚手架：覆盖开发全链路的工程化工具
6. 生态实战：TinyPro 集成 TinyEngine 打造一站式开发平台

一、TinyEngine——企业级智能低代码引擎

1.1 TinyEngine 的核心定位

TinyEngine 是 OpenTiny 开源的低代码引擎底座，而不是一个封装好的低代码平台。它的核心定位是：

让开发者能够定制属于自己的低代码平台。

你可以通过以下两种方式使用 TinyEngine：

• 线上搭配组合：直接使用在线 Demo 进行可视化页面搭建。
• 二次开发：通过 CLI 创建个人工程，实时定制出自己专属的低代码平台。

TinyEngine 适用于多种低代码平台开发场景，包括资源编排、服务端渲染、模型驱动应用、移动端、大屏端、页面编排等。

1.2 洛书架构——插件化与可扩展性的完美平衡

TinyEngine 采用独创的 “洛书架构” ，通过元服务（Meta Service）与元应用（Meta App）分离的设计，实现了功能与 UI 的解耦，让开发者既能够同步引擎的新特性和 bug 修复，同时又能基于自身业务属性，对插件、设计器、布局、出码等方式进行定制。

核心设计理念：

• 元服务（Meta Service） ：纯功能实现，提供 API 接口（如代码生成、页面渲染），与 UI 无关。
• 元应用（Meta App） ：纯 UI 实现，提供可视化界面（如代码生成器的弹窗组件），不关心具体功能实现。

这种架构的最大价值在于：当开发者需要深度定制自己的低代码平台时，可以只修改 UI 层（元应用），而核心功能层（元服务）可以持续跟随官方版本升级，避免了“定制即锁定”的困境。

1.3 插件化架构详解

TinyEngine 的所有功能模块都由插件构成——页面上方的工具栏、左侧的插件栏、右侧的属性配置栏，以及中间的画布区域，全都是插件。

插件化架构的核心优势：

1. 灵活组装：你可以根据需要选择启用哪些插件，像搭积木一样组装出个性化的设计器。
2. 易于扩展：通过开发新插件，可以快速为设计器增加新功能。
3. 独立维护：每个插件可以独立开发、测试、升级，互不影响。

1.4 核心特性一览

特性	说明
可视化搭建	拖拽物料面板中的组件到画布，实时预览效果
源码双向转换	基于 AST 解析与 Schema 归一化，实现 Vue/React 与 DSL 无缝互转
跨框架出码	支持导出为 Vue、React 等多种主流框架代码
多场景支持	资源编排、服务端渲染、移动端、大屏端等
AI 集成	支持自然语言/图片生成页面、MCP 工具调用
插件扩展	通过 CLI 一行命令创建插件项目

二、AI 智能搭建——让低代码开发效率跃升

2025 年是 TinyEngine 的“AI 智能化元年”。TinyEngine 在 2.8 版本完成了 AI 插件重大升级，2.9 版本进一步强化了智能搭建能力。

2.1 Agent 模式与 Chat 模式

新版 AI 插件支持两种工作模式：

• Agent 模式（智能搭建） ：

  • 支持上传图片或自然语言搭建页面
  • 流式页面渲染，实时看到页面效果
  • 通过对话创建组件、调整样式、修改属性
  • 适合页面搭建、界面调整等场景

• Chat 模式（智能对话） ：

  • 传统问答式交互体验
  • 支持代码生成、文档编写、技术咨询
  • 支持调用平台 MCP 工具完成特定任务

2.2 自然语言/图片生成页面

这是 TinyEngine AI 插件最令人惊艳的能力。以搭建一个首页为例，你只需要上传设计稿截图，AI 就能识别并生成可编辑的页面。

操作流程：

1. 点击左下角 AI 图标呼出聊天窗口
2. 在模型设置中选择支持视觉理解的模型（如 qwen-vl-max）
3. 上传设计稿图片
4. 发送界面描述，等待 AI 返回生成效果
5. 单击「应用」将结果生成在画布上
6. 预览并保存

💡 资深提示：使用 AI 生成页面时，建议选择对工具调用和视觉理解支持良好的模型，如 DeepSeek R1/V3、Qwen3、Gemini 等，优先使用满血版或推理模型以获得最佳效果。

2.3 MCP 工具调用——对话即操作

TinyEngine 集成 OpenTiny Next SDK，支持了 MCP（Model Context Protocol）工具引擎，让 AI 能够直接调用平台插件功能，实现“对话即操作”的智能开发体验。

目前 AI 可通过 MCP 协议直接操作平台能力，包括创建词条、创建页面、修改组件属性等。用户还可以通过 MCP 工具管理面板查看启用的 MCP 服务器，并启用/禁用特定的 MCP 工具。

2.4 实操演示：使用 AI 搭建页面

这里以搭建一个数据看板为例，演示完整的 AI 智能搭建流程：

步骤 1：选择模型
在设置面板中配置模型服务，选择支持视觉理解的模型。

步骤 2：发送描述
在 Agent 模式中输入自然语言描述：

帮我搭建一个销售数据看板，包含：
- 顶部 KPI 卡片（总销售额、订单数、转化率）
- 中间销售趋势折线图
- 底部产品销量排行榜

步骤 3：AI 生成页面
AI 返回页面 Schema，画布采用流式渲染，实时显示页面效果。

步骤 4：二次调整
如果对生成效果不满意，可以继续对话进行二次修改，AI 会使用增量返回方式，修改速度更快。

步骤 5：保存应用
点击「应用」将 AI 生成的页面应用到画布，保存即可。

整个页面搭建过程，从描述到成品，可能只需要几分钟，传统开发需要半天到一天的工作量。

三、TinyRobot——企业级 AI 对话组件库

TinyRobot 是一套专为 AI 应用构建的前端交互框架，帮助团队快速搭建企业级 AI 助手、智能客服与多轮对话系统。

3.1 核心组件

组件	功能	使用场景
Bubble	消息气泡组件，支持 Markdown 渲染	展示 AI 回复和用户消息
Sender	消息输入框组件，支持多模态输入	用户输入问题或指令
Prompts	快捷提示组件	展示常用问题或操作建议
Container	会话容器组件	管理多轮对话上下文

3.2 核心能力

流式渲染：支持 SSE/WebSocket 实时打字效果，让 AI 回复如“真人”般逐字呈现，避免用户等待焦虑。

会话管理：支持多会话切换、本地存储、历史消息持久化。会话自动保存，刷新页面不丢失。

工具调用展示：当 AI 调用 MCP 工具时，可以实时显示工具调用状态（调用中、成功、失败），让用户了解 AI 的执行过程。

Markdown 与代码高亮：AI 回复内容支持 Markdown 格式，代码块自动高亮，适合输出技术文档、代码示例。

3.3 Skills 能力——让 AI 辅助搭建 AI 对话页面

TinyRobot 现已支持 Skills——这是一套用于指导 AI 使用 TinyRobot 组件库构建聊天界面的工具。开发者可以通过 Skills，让 AI 按照最佳实践自动生成聊天界面代码。

支持的 AI 代理：Cursor、OpenCode 等。

安装方式：

npx skills add opentiny/agent-skills --skill tiny-robot-skill --agent cursor

安装完成后，在 Cursor 对话框输入 /tiny-robot-skill，即可让 AI 按照 TinyRobot 最佳实践生成聊天界面代码。

3.4 基础使用示例

<template>
  <div class="chat-container">
    <tiny-robot-container v-model:conversations="conversations">
      <tiny-robot-bubble
        v-for="msg in messages"
        :key="msg.id"
        :role="msg.role"
        :content="msg.content"
      />
      <template #input>
        <tiny-robot-sender
          v-model="inputText"
          :loading="isLoading"
          @send="handleSend"
        />
      </template>
    </tiny-robot-container>
  </div>
</template>

<script setup>
import { TinyRobotContainer, TinyRobotBubble, TinyRobotSender } from '@opentiny/robot'

const messages = ref([])
const inputText = ref('')
const isLoading = ref(false)

const handleSend = async (text) => {
  messages.value.push({ role: 'user', content: text })
  isLoading.value = true
  // 调用 AI 接口，流式返回
  isLoading.value = false
}
</script>

四、TinyPro——开箱即用的中后台模板

4.1 TinyPro 的核心优势

TinyPro 是基于 TinyVue 打造的前后端分离的后台管理系统模板。如果将开发 Web 应用比作建造房子，TinyVue 组件是“砖瓦”，TinyPro 就是已经搭建好的“样板房”。

核心优势：

• 上手成本低：一行命令即可创建完整的后台管理系统
• 支持前后端：前端基于 Vue 3 + TypeScript + TinyVue，后端基于 NestJS
• 功能强大：支持组件粒度的权限管理、页签模式、多级菜单、多种布局方式
• 使用成本低：支持在线配置角色、用户、菜单、权限，无需写代码
• 开发者友好：支持 Vite、Webpack、Rspack、Farm 等多种构建工具

4.2 快速初始化

使用 TinyCLI 一行命令即可初始化：

# 安装 TinyCLI 脚手架
npm install @opentiny/cli -g

# 初始化 TinyPro 项目
tiny init pro

按照交互提示选择技术栈、构建工具，配置数据库和 Redis 连接信息，即可完成项目初始化。

4.3 权限管理与在线配置

TinyPro 将菜单、路由、国际化词条、角色、用户、权限等内容都放到了后端，用户可以通过在线方式配置这些内容。

这样做的好处是：

• 前端工程师只需专注于构建前端页面
• 管理员对系统有更多的控制权
• 功能模块的上线不依赖于前端开发

五、TinyCLI——覆盖开发全链路的脚手架

5.1 TinyCLI 的核心定位

TinyCLI 是 OpenTiny 提供的跨平台前端工程化 CLI 工具，为开发者提供一系列开发套件及工程插件，覆盖前端开发的整个链路，保证团队开发过程的一致性和可复制性。

主要套件：

• TinyPro：开箱即用的中后台管理模板
• TinyEngine：低代码引擎项目脚手架
• TinyTheme：主题定制工具

5.2 常用命令

# 安装 TinyCLI
npm install @opentiny/cli -g

# 查看可用套件
tiny list

# 初始化 TinyPro 项目
tiny init pro

# 初始化 TinyEngine 项目
tiny init engine

# 创建 TinyEngine 插件
tiny create plugin

六、生态实战：TinyPro 集成 TinyEngine 打造一站式开发平台

6.1 集成架构

TinyPro 与 TinyEngine 的深度集成，是 OpenTiny 生态中“后台模板 + 低代码引擎”的最佳实践。整体架构如下：

• TinyEngine 提供低代码设计器的核心能力
• 插件系统 通过插件扩展功能
• 注册表机制 统一管理插件和服务
• 配置器系统 自定义组件属性配置

6.2 核心能力——一键生成 TinyPro 代码

TinyEngine 中集成的 generate-code-tinypro 插件，可以将可视化设计直接转换为 TinyPro 项目兼容的代码，并自动完成菜单、权限及国际化配置：

• 智能代码生成：基于可视化设计自动生成符合 TinyPro 规范的 Vue 3 + TypeScript 代码
• 一键集成：自动创建菜单、配置权限、添加国际化词条
• 代码转换：将 TinyEngine 生成的代码自动转换为 TinyPro 项目兼容格式
• 本地保存：支持将生成的文件保存到本地文件系统
• 可视化配置：提供友好的 UI 界面进行菜单和路由配置

6.3 使用流程

1. 设计页面：在 TinyEngine 可视化编辑器中拖拽组件设计页面
2. 点击出码：点击工具栏中的“出码”按钮
3. 配置菜单：在弹出的对话框中填写菜单配置信息
4. 生成预览：点击“生成预览”查看将要生成的文件
5. 完成集成：点击“完成集成”，自动创建菜单、分配权限并保存文件
6. 查看效果：在 TinyPro 中直接看到页面效果

6.4 开启本地开发

# 安装依赖
pnpm install

# 启动后端
pnpm dev:backend

# 启动前端
pnpm dev

# 启动低代码设计器
cd lowcode-designer && pnpm dev

启动成功后，访问 http://localhost:8090 即可体验低代码设计器。

七、生态工具速览

工具	定位	核心功能
TinyEngine	低代码引擎底座	可视化搭建、源码生成、AI 智能搭建
TinyRobot	AI 对话组件库	消息气泡、流式渲染、会话管理、Skills
TinyPro	中后台模板	权限管理、多级菜单、前后端分离
TinyCLI	工程化脚手架	项目初始化、插件创建、构建部署
TinyEngine AI Plugin	AI 辅助插件	自然语言生成页面、图片转页面、MCP 工具调用

总结

本篇我们深入探索了 OpenTiny 生态中的核心工具：

1. TinyEngine：

   • 定位为“低代码引擎底座”，而非封闭的低代码平台
   • 洛书架构实现元服务与元应用分离，兼顾灵活性与可升级性
   • 插件化设计让功能扩展变得简单
   • AI 插件支持自然语言/图片生成页面，颠覆传统低代码开发模式

2. TinyRobot：

   • 企业级 AI 对话组件库，开箱即用
   • 支持流式渲染、会话管理、工具调用展示
   • Skills 能力让 AI 辅助搭建 AI 对话页面

3. TinyPro：

   • 基于 TinyVue 的企业级中后台模板
   • 一行命令初始化，开箱即用
   • 支持在线配置菜单、权限、国际化

4. TinyCLI：

   • 覆盖前端开发全链路的工程化工具
   • 保证团队开发的一致性和可复制性

5. 生态集成：

   • TinyPro 集成 TinyEngine，实现“可视化设计 → 一键生成代码 → 自动配置权限”的全流程提效

OpenTiny 生态正在从“组件库 → 低代码引擎 → AI 智能化 → 工程化工具”不断演进。2025 年是 OpenTiny 生态全面爆发的一年——TinyEngine 完成 AI 智能化升级，TinyRobot 推出 Skills 能力，生态工具链持续完善。

无论你是希望快速搭建中后台系统、构建企业级低代码平台，还是为应用注入 AI 对话能力，OpenTiny 生态都为你提供了完整的技术支持。

下篇预告： 《架构篇——跨框架集成与微前端实战》将深入探讨 OpenTiny 的跨框架能力，解决企业多技术栈共存、存量系统迁移、微前端架构等核心难题，敬请期待！

如果觉得本文对你有帮助，欢迎点赞、收藏、评论，你的支持是我持续创作的动力！