TinyEngine 2.8版本正式发布:AI能力、区块管理、Docker部署一键强化,迈向智能时代!

前言

TinyEngine低代码引擎使开发者能够定制低代码平台。它是低代码平台的底座,提供可视化搭建页面等基础能力,既可以通过线上搭配组合,也可以通过cli创建个人工程进行二次开发,实时定制出自己的低代码平台。适用于多场景的低代码平台开发,如:资源编排、服务端渲染、模型驱动、移动端、大屏端、页面编排等。

近期,我们正式推出TinyEngine v2.8 版本,希望能够给大家带来更好的使用体验,能够深度定制化的同时可以更简洁便利地配置。

这次版本特性开发和问题修复已经有更多的开发者朋友参与进来,我们在此诚挚感谢 @timtiam @0x7A7A6572 @QxQstar @LLDLLY 积极参加 TinyEngine 的开源共建,同时也邀请大家一起加入开源社区的建设,让 TinyEngine 成长的更加优秀和茁壮。

v2.8.0 变更特性概览

  • 【增强】【AI 新特性】更新 robot 插件 UI 并新增 MCP 工具。
  • 【增强】【区块管理】添加区块双向绑定属性选择功能到事件表单。
  • 【增强】【物料】支持在物料列表中隐藏内置物料。
  • 【增强】【状态管理】应用状态仅允许 JSON 对象。
  • 【其他】升级 vue-repl、同步页面状态和全局状态的保存行为。
  • 【其他】支持前后端Docker部署。
  • 【其他】文档更新、功能细节优化与bug修复、mockserver 支持自定义数据库路径等等与一系列 bug 修复。

TinyEngine v2.8.0 新特性解读

1. 【AI 新特性:更新 robot 插件 UI 并新增 MCP 工具(体验版本)。

在TinyEngine v2.8+版本中,我们对AI插件进行了一系列新能力的升级:

  • 使用 TinyRobot组件(OpenTiny体系面向AI场景的全新组件/产品) 更新了AI插件UI,UI焕然一新。
  • 集成OpenTiny Next SDK 支持了 MCP(Model Context Protocol)工具引擎,让AI能够直接调用平台插件功能,实现"对话即操作"的智能开发体验!
  • 添加了MCP MetaService,将部分平台插件的关键能力封装成了可供AI通过MCP协议调用的工具,并支持添加拓展更多的工具。

1)AI插件新特性

核心能力:

  • AI可通过MCP协议直接操作平台能力(创建词条/创建页面/修改属性等)
  • 支持可视化管理MCP工具

使用步骤:

  • 设置模型接口:

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

    js 复制代码
    // registry.js
    [META_APP.Robot]: {
      options: {
        customCompatibleAIModels: [
          { label: 'SiliconFlow:DeepSeek-V3', value: 'deepseek-ai/DeepSeek-V3', manufacturer: 'siliconflow' },
          { label: 'Qwen:qwen-max', value: 'qwen-max', manufacturer: 'qwen' },
        ]
      }
    },

    可以配置本地的MCP工具使用的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/'),
      },
      ...originProxyConfig,
    }
  • 配置模型:

    首次使用或切换AI模型时,需要进行配置:

    1) 点击右上角设置按钮

    2)选择合适的AI模型

    3)输入对应的API Token

  • 开始对话:输入问题开始对话吧

场景示例:

  • 智能页面生成:"创建一个登录页,包含账号密码输入和提交按钮"

  • 批量属性修改:"把所有输入框边框改为红色"

2)MCP MetaService

MCP MetaService 是注册管理MCP相关能力的核心元服务。目前支持 MCP 工具的自动收集、增删改查、调用工具等等能力。

获取 mcpClient:

js 复制代码
const client = getMetaApi(META\_SERVICE.McpService)?.getMcpClient()

工具管理相关 api 示例:(ai 对话框已经集成了,这里仅列出简单的调用示例)

js 复制代码
const client = getMetaApi(META\_SERVICE.McpService)?.getMcpClient()

// 列出工具
client.listTools()

// 调用工具
client.callTool({ name: toolId, arguments: args })

// 禁用或者启用某个工具
client.upateTool(toolId, { enabled: true/false })

插件注册MCP工具:

MCP MetaService 已经具备了从注册表中收集 mcp 相关工具的能力,我们仅需在插件的注册表上声明相关的 mcp 工具,就可以集成到 AI对话框中等待大模型在合适的场景调用。

注册示例

a. 声明工具:

ts 复制代码
// 声明工具:

const addI18n = {
  name: 'add\_i18n',
  description:
    'Add a new i18n entry to the current TinyEngine low-code application. Use this when you need to add new internationalization translations to your application.',
  // 入参声明
  inputSchema: inputSchema.shape,
  // 出参声明
  outputSchema: outputSchema.shape, // 使用 Zod 版本的统一输出结构
  annotations: {
    title: 'Add I18n Entry',
    readOnlyHint: false,
    destructiveHint: false,
    idempotentHint: true,
    openWorldHint: false
  },
  callback: async (args: z.infer\<typeof inputSchema>) => {
    // ... 调用相关方法实现 i18n 词条的添加
  }
}

b. 在插件注册表中声明:

ts 复制代码
import { addI18n, delI18n, updateI18n, getI18n } from './tools'

export const TranslateService = {
  id: 'engine.service.translate',
  // .... 其他注册表声明项
  mcp: {
    // 工具声明
    tools: \[addI18n, delI18n, updateI18n, getI18n]
  }
}

2. 【区块管理】添加区块双向绑定属性选择功能到事件表单。

v2.8 版本中,由外部开发者 @0x7A7A6572 在区块管理-事件设置 事件名的输入框中,添加了快捷绑定 onUpdate 事件(双向绑定属性使用)的按钮,提升用户的体验。

关联PR:github.com/opentiny/ti...

3. 【物料】支持在物料列表中隐藏内置物料。

在 V2.8 版本中。(实际上 v2.7.2 也已经支持了)。我们增加了隐藏内置物料的能力。方便二开用户根据自身的垂直业务场景决定是否在物料面板中展示内置组件。

配置项名称: hiddenBuiltinMaterials

配置示例:

js 复制代码
// registry.js
export default {
  \[META\_APP.Materials]: {
    options: {
      hiddenBuiltinMaterials: \[
        'Box', // 盒子容器(普通div 容器)
        'CanvasRowColContainer', // 行列容器
        'CanvasFlexBox', // 弹性容器
        'CanvasSection', // 全宽居中容器
        'Text', // 文本
        'Icon', // 图标
        'Img', // 图片
        'Slot', // 插槽(区块插槽需要)
        'RouterView', // 路由视图(子页面需要,不建议隐藏)
        'RouterLink', // 路由链接
        'Navigation', // 导航条
        'NavigationV', // 纵向导航条
        'Collection' // 数据源容器(数据源功能依赖,不建议隐藏)
      ]
    }
  }
}

使用场景:

  • 隐藏不常用的内置组件,简化物料面板
  • 根据项目需求定制显示的组件列表

关联PR:github.com/opentiny/ti...

4. 【状态管理】应用状态仅允许 JSON 对象。

在 v2.7 版本以前,我们的应用状态提示 state 的初始状态可以是字符串、数字、布尔值、对象、数组等等值,但是实际上,由于全局状态的底层实现是 pinia,初始化的状态只能是 object。 这样可能会在提示上存在误导,导致用户使用错误。

错误使用示例:

在 v2.8 版本,我们修改为只允许使用 json 对象,避免错误使用:

关联PR: github.com/opentiny/ti...

5. 升级 vue-repl、同步页面状态和全局状态的保存行为。

1) vue-repl 升级

v2.8 版本中,我们将页面预览的底层依赖 vue-repl 从 v2.9 升级到了 v4.6.1。vue-repl v4.6.1 支持 jsx 的编译,无需额外使用 @vue/babel-plugin-jsx 进行手动转换。

关联PR:github.com/opentiny/ti...

2) 同步页面状态和全局状态的保存行为

v2.8 版本中,我们将页面状态和全局状态的保存行为一致化。

原来的页面状态点击保存的行为 原来应用状态点击保存的行为 统一后的点击保存行为
关闭状态管理插件 关闭编辑面板 关闭编辑面板。(状态管理插件不关闭,停留在列表)
提示保存成功 \ 提示保存成功

6. 支持前后端Docker部署正式发布

告别复杂的环境配置! 在最新版本中,TinyEngine现已支持全栈Docker-Compose部署,前端+Java后端5分钟即可完成服务器部署,享受容器化带来的高效与稳定!

核心价值:

  • 开箱即用的全栈方案:预置Nginx反向代理配置,自动构建Node+Java容器化环境
  • 极简操作流程:只需几行命令完成前后端的部署上线

操作步骤:

1) 环境准备:安装docker与docker compose,使用git clone命令拉取 tiny-engine前端代码后端代码

2) 修改配置:修改nginx.conf中的ip/域名

3) 一键启动/停止:

bash 复制代码
# 启动服务
cd tiny-engine-backend-java && docker-compose up -d
# 停止服务
docker-compose stop
# 查看日志
docker-compose logs -f

如此即已完成服务部署上线,现在就来体验三分钟完成全栈部署的高效工作流吧!

7. 功能细节优化&bug修复

  • mockserver 支持自定义数据库路径 @hexqi #1501
  • 修复选中框占满画布时,选中的工具栏位置被遮挡的 bug。@chilingling #1581
  • 禁止选中工具栏双击选中,避免意外整个画布被选中的 bug @chilingling #1569
  • TinyGrid 物料增加版本配置。@LLDLLY#1568
  • 修复页面预览祖先页面顶层为文件夹的时候页面显示不正确的 bug @chilingling #1567
  • README 文档更正。@QxQstar#1532

以上是此次更新问题修复的主要内容,如需了解更多可以查看:v2.8.0 所有 changelog

结语

TinyEngine 2.8 版本更新不仅有全新的AI插件与 MCP 工具尝鲜、区块双向绑定体验增强、vue-repl 升级,还支持隐藏内置物料、对顶层文件夹预览等等 bug 进行修复 。每一步前行都值得铭记,感谢有您陪伴我们一起迭代成长,同时也欢迎大家加入社区讨论,参与社区共建!

关于 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 标签,一起参与开源贡献~

相关推荐
骑驴看星星a33 分钟前
Vue中的scoped属性
前端·javascript·vue.js
四月_h40 分钟前
在 Vue 3 + TypeScript 项目中实现主题切换功能
前端·vue.js·typescript
qq_427506081 小时前
vue3写一个简单的时间轴组件
前端·javascript·vue.js
雨枪幻。2 小时前
spring boot开发:一些基础知识
开发语言·前端·javascript
lecepin2 小时前
AI Coding 资讯 2025.8.27
前端·ai编程
TimelessHaze3 小时前
拆解字节面试题:async/await 到底是什么?底层实现 + 最佳实践全解析
前端·javascript·trae
执键行天涯3 小时前
从双重检查锁定的设计意图、锁的作用、第一次检查提升性能的原理三个角度,详细拆解单例模式的逻辑
java·前端·github
青青子衿越3 小时前
微信小程序web-view嵌套H5,小程序与H5通信
前端·微信小程序·小程序
qfZYG4 小时前
Trae 编辑器在 Python 环境缺少 Pylance,怎么解决
前端·vue.js·编辑器