TinyEngine2.9版本发布：更智能，更灵活，更开放！

OpenTiny社区2025-12-15 18:02

前言

TinyEngine 是一款面向未来的低代码引擎底座，致力于为开发者提供高度可定制的技术基础设施------不仅支持可视化页面搭建等核心能力，更可通过 CLI 工程化方式实现深度二次开发，帮助团队快速构建专属的低代码平台。

无论是资源编排、服务端渲染、模型驱动应用，还是移动端、大屏端、复杂页面编排场景，TinyEngine 都能灵活适配，成为你构建低代码体系的坚实基石。

最近我们正式发布 TinyEngine v2.9 版本，带来多项功能升级与体验优化，在增强平台智能化能力的同时，进一步降低配置复杂度，让"定制化"变得更简单、更高效。

本次版本迭代中，我们欣喜地看到越来越多开发者加入开源共建行列。特别感谢@fayching @LLDLLY 等社区伙伴积极参与功能贡献与问题反馈。正是这些点滴汇聚的力量，推动着 TinyEngine 不断前行。我们也诚挚邀请更多热爱技术、追求创新的朋友加入社区，一起打造更强大、更开放的低代码生态。

v2.9.0 变更特性概览

  • 【增强】全新版本AI助手，智能搭建能力升级
  • 【新特性】添加资源管理插件和资源选择配置器
  • 【增强】预览插件支持应用预览
  • 【增强】Tailwindcss支持
  • 【增强】支持静态数据源
  • 【增强】组件物料更新
  • 【增强】MCP工具更新
  • 【其他】功能细节优化与bug修复。

TinyEngine v2.9.0 新特性解读

1. 【增强】全新版本AI助手，智能搭建能力升级（体验版本）

在TinyEngine v2.9版本中，我们对AI搭建页面能力进行全新升级，下面是主要功能的介绍与快速上手：

1）全新 Agent 模式

新增的 Agent 模式支持自然语言或图片生成页面，借助AI大模型强大的能力，让您告别繁琐的手动拖拽，让 AI 辅助开发更加智能、强大。

  • 全新 Agent 智能搭建模式，自然语言描述需求，由AI直接返回页面Schema
  • 画布采用流式渲染，能够实时看到页面生成效果
  • 生成页面后支持继续对话二次修改，使用增量返回修改速度更快
  • 支持上传设计图或手绘草图，AI 识别并还原为可编辑的页面（需要先选择视觉模型）

2）基础能力升级

  • 现代化界面：全新的聊天界面，支持 Markdown 渲染、代码高亮
    全屏模式：
  • 会话管理：支持查看管理多个历史对话，自动保存历史记录思考模式：支持推理模型的深度思考，提供更准确的解决方案
  • 多模型支持：兼容各种OpenAI兼容格式 AI 模型，提供模型设置界面自由添加选择模型服务
  • 集成平台更多的MCP工具（Chat模式） 工具调用：

3）简单配置，快速上手

平台设置：

  • 设置模型服务：

    支持通过AI插件的customCompatibleAIModels选项自定义添加OpenAI兼容格式大模型（使用MCP功能需要使用支持tools的大模型），建议使用DeepSeek R1/V3、Qwen3、Gemini等对视觉/工具支持良好的模型，优先使用满血模型、推理类型模型效果更好。

    js 复制代码 
    // registry.js
export default {
  // ......
  [META_APP.Robot]: {
    options: {
      // encryptServiceApiKey: false, // 是否加密服务API密钥, 默认为false
      // enableResourceContext: false, // 提示词上下文携带资源插件图片，默认true
      // enableRagContext: true, // 提示词上下文携带查询到的知识库内容，默认false
      customCompatibleAIModels: [{ // 自定义AI模型(OpenAI兼容格式模型), 下面以智谱模型服务为例
        provider: 'GLM',
        label: '智谱模型',
        baseUrl: 'https://open.bigmodel.cn/api/paas/v4',
        models: [
          {
            label: 'GLM视觉理解模型',
            name: 'glm-4.5v',
            capabilities: {
              vision: true, // 是否支持视觉理解能力
              reasoning: { extraBody: { enable: { thinking: { type: 'enabled' } }, disable: null } } // 是否支持深度思考及深度思考打开与关闭额外的body字段
            }
          },
          {
            label: 'GLM-4.5推理模型',
            name: 'glm-4.5',
            capabilities: {
              toolCalling: true,
              reasoning: { extraBody: { enable: { thinking: { type: 'enabled' } }, disable: null } }
            }
          }
        ]
      }]
    }
  }
  // ......
}

    可以通过对接最新后端服务使用完整的AI插件能力，或者也可以在前端项目配置AI模型接口Proxy来使用, 这里以本地转发到百炼模型为例：

    js 复制代码 
    // vite.config.js
const originProxyConfig = baseConfig.server.proxy
baseConfig.server.proxy = {
  '/app-center/api/chat/completions': {
    target: 'https://dashscope.aliyuncs.com',
    changeOrigin: true,
    rewrite: path => path.replace('/app-center/api/', '/compatible-mode/v1/'),
  },
  '/app-center/api/ai/chat': {
    target: 'https://dashscope.aliyuncs.com',
    changeOrigin: true,
    rewrite: path => path.replace('/app-center/api/ai/chat', '/compatible-mode/v1/chat/completions'),
  },
  ...originProxyConfig,
}

    补充说明：截图生成UI能力由于依赖上传图片接口，需要启动后端服务，且需要使用支持视觉理解能力的模型，如qwen-vl系列模型

  • 插件配置：

    在插件中也提供了对部分功能的自定义能力，包括是否启用加密API Key解决安全风险问题、是否使用知识库RAG能力提供额外的知识背景提升问答对话效果、是否允许使用资源管理插件中的图片等：

    js 复制代码 
       // registry.js
export default {
  [META_APP.Robot]: {
    options: {
      // encryptServiceApiKey: false, // 是否加密服务API密钥, 默认为false
      // enableResourceContext: false, // 提示词上下文携带资源插件图片，默认true
      // enableRagContext: true, // 提示词上下文携带查询到的知识库内容，默认false
      // modeImplementation: { // 支持通过注册表传入chat和agent模式的实现
      //   chat: useCustomChatMode
      //   agent: useCustomAgentMode
      // }
    }
  }
}

用户设置：

  • 配置服务与密钥：在设置面板编辑内置服务添加API Key或者添加自定义的模型服务
  • 选择模型：可以从内置百炼、DeepSeek 或者自定义的模型服务中选择模型（图片生成UI需要多模态模型，MCP工具调用需要支持工具调用模型）
  • 开始使用：在输入框输入问题或者上传图片问答，同时可以自由切换 Agent/Chat 模式，配置MCP工具，开启深度思考等，从智能搭建到深度辅助，全方位提升您的开发效率。快来体验，释放您的创造力！

2.【新特性】添加资源管理插件和资源选择配置器

在应用开发中，通常会需要引用图片等资源，资源管理插件主要满足这类场景需求，可以上传项目中用到的静态资源，在编排页面或AI生成页面时引用（当前仅支持图片格式附件）。

2.1 资源管理

1）资源分组：资源管理插件通过分组管理资源，上传资源之前需要先创建分组，可以为不同场景的静态资源进行分组，比如基础图标库，或者也可以按模块分类 创建好分组后，点击分组名可以管理当前资源分组

2）添加资源

添加资源分为两种方式，输入URL和名称添加网络资源，上传图片或图标资源。 其中资源名称必填，通过url添加的话url也必填，如果是上传的，则不能输入url,支持上传png、jpg、svg文件，支持批量上传

3）修改资源

已添加资源的管理，hover时显示名称，操作包括复制和删除，复制是复制添加完成后在用户服务器上的url地址 也支持批量操作，点击批量操作后，出现删除图标（后续还会扩展其他批量操作），且资源变为可多选的状态

2.2 资源使用

1）在画布中使用

可以通过图片组件使用资源，选中图片组件后在图片的属性设置处，点击选择资源可以设置为资源管理中的图片

效果

2）在AI插件中使用

在AI插件Agent模式生成页面时，页面中经常会需要使用到图片资源，AI无法直接生成这些图片，默认会将当前资源管理插件的图片作为备用资源引入使用（仅使用带有描述介绍的图片）。例如"生成登录页面"自动引用背景图与Logo：

如果不希望在AI助手插件中使用，可以通过修改注册表关闭

js 复制代码 
// registry.js
export default {
  [META_APP.Robot]: {
    options: {
      enableResourceContext: false, // 提示词上下文携带资源插件图片，默认true
    }
  }
}

3. 【增强】预览插件支持应用预览

在之前的预览插件中只能够实现单页面的预览，对于需要在多个页面中交互跳转的场景无法满足。

在v2.9 版本中，TinyEngine支持了应用的全局预览，能够预览完整项目的效果，并且支持手动路由切换，也能够在调试模式下查看整个应用的源码。 1）入口：

工具栏的预览图标进行了调整，直接点击图标与之前逻辑一致为页面预览，点击后面的箭头可打开下拉列表，可以选择应用预览

2）预览效果

打开预览页面后，可以看到应用预览与页面预览相比添加了路由切换栏，可以选择路由进行切换。

4. 【增强】Tailwindcss支持

Tailwind CSS 是一种实用优先的 CSS 框架，提供丰富的原子类，如 text-center、p-4、bg-blue-500 等，可快速构建定制化、响应式界面。

低代码平台支持 Tailwind 后，用户在可视化搭建的同时，能直接通过类名精细控制样式，无需编写或配置大量样式即可实现高效美观的前端开发，提升灵活性与开发速度。

在v2.9以上版本，已默认支持Tailwind CSS框架。

启用后的行为

  • 设计态：画布支持直接加载Tailwind样式类

  • 预览态：自动按需加载 @tailwindcss/browser，使画布/预览中可直接使用 Tailwind 原子类。

  • 出码生成：生成的应用将自动完成以下配置（基于 Tailwind CSS v4 零配置方案）：

    • 在依赖中添加 tailwindcss，并在开发依赖中添加 @tailwindcss/vite；
    • 在 Vite 配置中注册 tailwindcss() 插件；
    • 生成 src/style.css，内容包含 @import "tailwindcss";；
    • 在 src/main.js 自动引入 ./style.css。

以上步骤由引擎/出码器自动完成，无需手动干预。

效果

选中节点后在属性配置面板样式类中直接填写Tailwind样式类名，即可看到画布Tailwind样式生效：

关闭 Tailwind

可以通过注册表关闭Tailwind功能：

js 复制代码 
// registry.js
export default {
  'engine.config': {
    // ...其他配置
    enableTailwindCSS: true, // 开启（默认即为 true）；设为 false 可关闭
  },
};

当配置为 enableTailwindCSS: false 时：

  • 预览态不会加载 @tailwindcss/browser；
  • 出码时不会注入与 Tailwind 相关的依赖、Vite 插件及样式文件导入。

注意事项

  • 预览依赖解析：内置 import-map 已包含 @tailwindcss/browser 映射；如使用自定义 CDN/离线环境，请确保该映射可用。
  • 自定义样式：可在生成的 src/style.css 中追加自定义样式，或在项目中新增样式文件后自行引入。
  • 运行时渲染：如果您自定义了运行时渲染引擎，请确保在运行时渲染中增加对 Tailwind CSS 的支持。

5.【增强】支持静态数据源

设计器提供数据源来配合画布上的组件/区块渲染，之前版本只支持采取远程API请求JSON数据动态获取的方式，自TinyEngine v2.9+版本开始，支持静态数据源配置。

使用步骤

1）创建数据源，数据源类型选择静态数据源，配置数据源名称以及数据源字段，根据配置的数据源字段新增静态数据。

2）使用数据源Mock数据（数据源使用方式与远程数据源相同）

6.【增强】组件物料更新

  • 修改路由选择配置器，添加标签栏配置器和导航组件

拖拽一个导航条组件到画布，可以更改导航条为横向或者纵向，导航菜单项支持增删改，菜单项支持配置跳转页面

  • 更新物料Icon（设计稿换新风格后，原物料图标跟页面风格不匹配，更换所有的物料图标）

  • 添加TinyVue图表组件

物料面板新增TinyVue图表组件，主要包括折线图、柱状图、条形图、圆盘图、环形图、雷达图、瀑布图、漏斗图、散点图 等

  • 添加TinyVue基础组件

  • 表单类型中新增单选组、评分、滑块、级联选择器 组件

  • 数据展示中新增骨架屏、卡片、日历、进度条、标记、标签、统计数值 组件
  • 导航类型中新增步骤条和树形菜单组件

7. 【增强】MCP工具更新

AI 助手除了新增的搭建模式，原有的对话模式也进行了增强，增加了若干个插件的 mcp 工具：

  • 国际化（i18n） 相关 mcp 工具
  • 应用状态、页面状态相关 mcp 工具
  • 页面增删查改工具
  • 节点操作相关 mcp 工具（节点选中、属性修改、增删节点等等）

如何使用：

当前可以升级到 v2.9 版本，切换到 chat 模式，即可在对话中使用MCP工具，AI会自动调用相应工具。用户也可以手动点击关闭某个 mcp 工具。

示例图：

二次开发 TinyEngine 时，如何修改/添加/删除 mcp 工具？

当前 mcp 工具都默认随着插件的注册表导出（因为依赖插件的相关能力），所以如果需要修改/添加/删除 mcp 工具，修改注册表即可。

默认的插件注册表导出：

js 复制代码 
// mcp 工具 mcp/index.js
export const mcp = {
  tools: [getGlobalState, addOrModifyGlobalState, deleteGlobalState]
}


// 插件注册表导出 index.js
export default {
  ...metaData,
  entry,
  metas: [globalStateService],
  // mcp 的相关导出
  mcp
}

在二次开发工程中修改/添加 mcp 工具，同自定义注册表，请参考注册表相关文档。

未来优化：

  • 添加、调优 mcp 工具
  • 添加 chat 模式的系统提示词，让 AI 工具调用效果更好

8. 【其他】功能细节优化&bug修复

以上是此次更新的主要内容

如需了解更多可以查看：v2.9.0 所有 changelog

结语

TinyEngine v2.9 的发布，不仅是功能层面的一次全面跃迁------从 AI 助手的能力增强、Tailwind CSS 的原生支持，到资源管理插件的引入、应用预览能力的落地------更是我们对"极致可定制"理念的又一次深化实践。每一个细节的打磨，每一次架构的演进，都旨在让开发者以更低的成本、更高的自由度，构建真正属于自己的低代码世界。

这不仅仅是一个版本的更新，更是社区共建成就的见证。我们相信，开源的意义不仅在于代码共享，更在于思想碰撞与协作共创。正是每一位用户的使用、反馈与贡献，让 TinyEngine 在真实场景中不断淬炼成长。

未来之路，我们继续同行。 欢迎你持续关注 TinyEngine 的演进，参与社区讨论，提交你的想法与代码。让我们携手，把低代码的可能性推向更远的地方。

关于OpenTiny

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～

OpenTiny 官网：opentiny.design

OpenTiny 代码仓库：github.com/opentiny

TinyVue 源码：github.com/opentiny/ti...

TinyEngine 源码： github.com/opentiny/ti...

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~ 如果你也想要共建，可以进入代码仓库，找到 good first issue 标签，一起参与开源贡献~

相关推荐
被考核重击2 小时前
浏览器原理
前端·笔记·学习
网络研究院2 小时前
Firefox 146 为 Windows 用户引入了加密本地备份功能
前端·windows·firefox
Mr.Jessy2 小时前
JavaScript高级：深入对象与内置构造函数
开发语言·前端·javascript·ecmascript
老华带你飞2 小时前
列车售票|基于springboot 列车售票系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·学习·spring
幸运小圣3 小时前
深入理解ref、reactive【Vue3工程级指南】
前端·javascript·vue.js
用户47949283569153 小时前
面试官最爱挖的坑：用户 Token 到底该存哪？
前端·javascript·面试
Irene19913 小时前
Web前端开发中的垃圾回收详解
前端
Heo3 小时前
Vue3.4中diff算法核心梳理
前端·javascript·面试
惜.己3 小时前
前端笔记（二）
前端·笔记
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03【AutoGLM部署】本地私有化部署AI手机Agent04Linux下V2Ray安装配置指南05Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser06Open-AutoGLM Windows 安装部署教程07【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）08BongoCat - 跨平台键盘猫动画工具09Windows 11 官方系统安装与重装完整教程（2025年最新版）10安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）