OpenTiny NEXT 从入门到精通·第 5 篇

OpenTiny NEXT 从入门到精通·第 5 篇生态篇——TinyEngine 低代码平台与 TinyRobot 智能助手如果说组件库是“砖瓦”TinyEngine 就是“建筑图纸”——它让页面搭建从手工编码走向可视化配置如果说低代码是“骨架”TinyRobot 就是“神经”——它让每个应用都能拥有智能对话能力。本篇将带你深入 OpenTiny 生态中的两大核心工具TinyEngine 低代码引擎和 TinyRobot 企业智能助手并串联起 TinyCLI、TinyPro 等配套工具帮助你构建完整的开发生态。低代码平台听起来很美但市面上的产品往往有两个极端要么功能太死板只能做简单的 CRUD 页面要么高度定制困难被平台“锁定”。TinyEngine 的设计哲学恰恰相反——它是一个“低代码引擎底座”而不是一个“低代码平台成品”。你可以基于它构建出专属于自己业务场景的低代码平台并且生成的代码可以独立部署完全不依赖引擎运行时。与此同时AI 能力正在重塑低代码的开发模式。2025 年TinyEngine 全面升级了 AI 插件支持 Agent 模式和 Chat 模式用户甚至可以通过上传一张设计稿截图让 AI 自动识别并生成可编辑的页面。本篇文章将从以下几个方面展开TinyEngine 核心架构洛书架构与插件化设计AI 智能搭建从自然语言到页面的一键生成TinyRobot 企业智能助手为应用注入 AI 对话能力TinyPro 中后台模板开箱即用的企业级系统TinyCLI 脚手架覆盖开发全链路的工程化工具生态实战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.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 就能识别并生成可编辑的页面。操作流程点击左下角 AI 图标呼出聊天窗口在模型设置中选择支持视觉理解的模型如 qwen-vl-max上传设计稿图片发送界面描述等待 AI 返回生成效果单击「应用」将结果生成在画布上预览并保存资深提示使用 AI 生成页面时建议选择对工具调用和视觉理解支持良好的模型如 DeepSeek R1/V3、Qwen3、Gemini 等优先使用满血版或推理模型以获得最佳效果。2.3 MCP 工具调用——对话即操作TinyEngine 集成 OpenTiny Next SDK支持了 MCPModel Context Protocol工具引擎让 AI 能够直接调用平台插件功能实现“对话即操作”的智能开发体验。目前 AI 可通过 MCP 协议直接操作平台能力包括创建词条、创建页面、修改组件属性等。用户还可以通过 MCP 工具管理面板查看启用的 MCP 服务器并启用/禁用特定的 MCP 工具。2.4 实操演示使用 AI 搭建页面这里以搭建一个数据看板为例演示完整的 AI 智能搭建流程步骤 1选择模型在设置面板中配置模型服务选择支持视觉理解的模型。步骤 2发送描述在 Agent 模式中输入自然语言描述帮我搭建一个销售数据看板包含 - 顶部 KPI 卡片总销售额、订单数、转化率 - 中间销售趋势折线图 - 底部产品销量排行榜步骤 3AI 生成页面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 skillsaddopentiny/agent-skills--skilltiny-robot-skill--agentcursor安装完成后在 Cursor 对话框输入/tiny-robot-skill即可让 AI 按照 TinyRobot 最佳实践生成聊天界面代码。3.4 基础使用示例template div classchat-container tiny-robot-container v-model:conversationsconversations tiny-robot-bubble v-formsg in messages :keymsg.id :rolemsg.role :contentmsg.content / template #input tiny-robot-sender v-modelinputText :loadingisLoading sendhandleSend / /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 脚手架npminstallopentiny/cli-g# 初始化 TinyPro 项目tiny init pro按照交互提示选择技术栈、构建工具配置数据库和 Redis 连接信息即可完成项目初始化。4.3 权限管理与在线配置TinyPro 将菜单、路由、国际化词条、角色、用户、权限等内容都放到了后端用户可以通过在线方式配置这些内容。这样做的好处是前端工程师只需专注于构建前端页面管理员对系统有更多的控制权功能模块的上线不依赖于前端开发五、TinyCLI——覆盖开发全链路的脚手架5.1 TinyCLI 的核心定位TinyCLI 是 OpenTiny 提供的跨平台前端工程化 CLI 工具为开发者提供一系列开发套件及工程插件覆盖前端开发的整个链路保证团队开发过程的一致性和可复制性。主要套件TinyPro开箱即用的中后台管理模板TinyEngine低代码引擎项目脚手架TinyTheme主题定制工具5.2 常用命令# 安装 TinyCLInpminstallopentiny/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 使用流程设计页面在 TinyEngine 可视化编辑器中拖拽组件设计页面点击出码点击工具栏中的“出码”按钮配置菜单在弹出的对话框中填写菜单配置信息生成预览点击“生成预览”查看将要生成的文件完成集成点击“完成集成”自动创建菜单、分配权限并保存文件查看效果在 TinyPro 中直接看到页面效果6.4 开启本地开发# 安装依赖pnpminstall# 启动后端pnpmdev:backend# 启动前端pnpmdev# 启动低代码设计器cdlowcode-designerpnpmdev启动成功后访问 http://localhost:8090 即可体验低代码设计器。七、生态工具速览工具定位核心功能TinyEngine低代码引擎底座可视化搭建、源码生成、AI 智能搭建TinyRobotAI 对话组件库消息气泡、流式渲染、会话管理、SkillsTinyPro中后台模板权限管理、多级菜单、前后端分离TinyCLI工程化脚手架项目初始化、插件创建、构建部署TinyEngine AI PluginAI 辅助插件自然语言生成页面、图片转页面、MCP 工具调用总结本篇我们深入探索了 OpenTiny 生态中的核心工具TinyEngine定位为“低代码引擎底座”而非封闭的低代码平台洛书架构实现元服务与元应用分离兼顾灵活性与可升级性插件化设计让功能扩展变得简单AI 插件支持自然语言/图片生成页面颠覆传统低代码开发模式TinyRobot企业级 AI 对话组件库开箱即用支持流式渲染、会话管理、工具调用展示Skills 能力让 AI 辅助搭建 AI 对话页面TinyPro基于 TinyVue 的企业级中后台模板一行命令初始化开箱即用支持在线配置菜单、权限、国际化TinyCLI覆盖前端开发全链路的工程化工具保证团队开发的一致性和可复制性生态集成TinyPro 集成 TinyEngine实现“可视化设计 → 一键生成代码 → 自动配置权限”的全流程提效OpenTiny 生态正在从“组件库 → 低代码引擎 → AI 智能化 → 工程化工具”不断演进。2025 年是 OpenTiny 生态全面爆发的一年——TinyEngine 完成 AI 智能化升级TinyRobot 推出 Skills 能力生态工具链持续完善。无论你是希望快速搭建中后台系统、构建企业级低代码平台还是为应用注入 AI 对话能力OpenTiny 生态都为你提供了完整的技术支持。下篇预告《架构篇——跨框架集成与微前端实战》将深入探讨 OpenTiny 的跨框架能力解决企业多技术栈共存、存量系统迁移、微前端架构等核心难题敬请期待如果觉得本文对你有帮助欢迎点赞、收藏、评论你的支持是我持续创作的动力