GenUI SDK v1.3.0 发布｜多框架兼容，一键换物料，渲染器 & 演练场全面增强！

前言

GenUI SDK 是 OpenTiny 团队基于生成式 UI 理念打造的解决方案，旨在增强大模型显示与交互效果。SDK 提供完整的前后端一体化集成能力，遵循 OpenAI 规范；内置 Vue 与 Angular 双框架渲染器，支持自定义的组件库、交互行为与主题样式。既能快速从零搭建一个 AI 对话应用，也可以在现有业务系统中嵌入生成式 UI 能力。

近日，GenUI SDK v1.3.0 正式发布 ！本次版本围绕核心能力解耦发包、物料体系可插拔、渲染器能力强化、多框架协同渲染、演练场全方位升级五大核心方向迭代，彻底解决旧版耦合度高、框架适配弱、自定义拓展受限等痛点，让 SDK 更灵活、更稳定、更适配企业级智能化落地场景。

开源地址：github.com/opentiny/ge...（欢迎 Star ⭐）

官方网站：opentiny.design/genui-sdk

版本特性总览

📦 核心能力发布 + 物料可插拔

核心包独立发布 ：@opentiny/genui-sdk-core 正式上线 npm，协议定义、Prompt 生成、流式 Schema 解析、Delta 增量补丁、JSON 修复等底层核心能力可单独引入，适配自定义 Agent、服务端流水线等个性化场景
物料完全解耦：UI 物料与渲染器彻底拆分，推出多套独立可发布物料包，支持 OpenTiny、Element Plus 组件库一键切换
存量平滑兼容：Vue、Angular 双端提供 Legacy 兼容组件，老项目无需大规模改造即可升级

⚡ 渲染器能力增强

默认值补全： 默认 Props 在 Vue / Angular 两端统一自动补全，可自由设置默认值，可为流式渲染兜底
新增refs： Schema 支持 refs，可在 methods / 事件里直接调用组件实例方法（如表单 validate）
自定义Action增强： 自定义交互 Action 支持异步执行与返回值透传，复杂对话链路可自由编排
生命周期： 渲染器协议新增 onMounted / onUnmounted 两个生命周期。

🚀 多框架渲染 + Playground 全面升级

演练场一键切换 Vue / Angular，同一会话也能混用两端卡片
支持 A2A v1.0，对端不兼容时自动回退旧版本
将 OpenAPI 文档，一键转化成对话里可用的工具
模板模式可手改 Schema、查看版本历史、引入版本管理；
Vue技术栈提示词可选 Mini / Standard 版本
中英双语切换，并记住语言偏好

🛡️ 体验与稳定性

通知载荷、纯 Markdown 展示、jsonPatch 加固等多项修复
图片内容类型对齐 OpenAI 规范；Prompt 对 API 参数使用规则更清晰

🧪 抢先体验

新增React渲染器测试版，可以抢先体验

新特性详解

1、Core 核心包独立发包，能力自由复用

旧版 GenUI SDK 核心能力全部耦合在整体包中，开发者无法单独复用底层逻辑，自定义开发受限。v1.3.0 将核心底层能力完全抽离，独立发布 @opentiny/genui-sdk-core，对外开放全套底层核心模块：

标准化协议类型定义
智能化 Prompt 生成逻辑
大模型流式 Schema 实时提取
前端增量渲染 Delta Patch
AI 输出 JSON 自动修复

开发者可脱离渲染器，单独在服务端、自定义 Agent、AI 流水线中使用核心能力，灵活度大幅提升。以生成提示为例，核心包 + 物料元数据即可组装系统提示词：

js 复制代码

import { genPrompt } from '@opentiny/genui-sdk-core'
import { materialsMeta } from '@opentiny/genui-sdk-materials-vue-element-plus/meta'

const systemPrompt = genPrompt('Vue', materialsMeta, {
  customActions: [
    { name: 'submitForm', description: '提交表单', async: true, return: { type: 'boolean' } },
  ],
})

genPrompt 的完整类型是 genPrompt(framework, materialsMeta, customConfig?, options?)，framework 既可传字符串（'Vue' / 'Angular'），也可传自定义框架配置，方便扩展新框架；customConfig 里还能注入自定义组件、片段、示例与 Action。

详细使用方式见 Core 库使用文档。

2、物料可插拔架构，多组件库一键切换

本次版本完成渲染器与 UI 物料的彻底解耦 ，GenuiChat、GenuiRenderer 不再内置固定组件库，通过 GenuiConfigProvider 统一注入物料配置，真正实现「一套渲染内核，多套 UI 物料自由切换」。

目前已上线三大官方物料包：

物料包	适用场景
`@opentiny/genui-sdk-materials-vue-opentiny-vue`	Vue + OpenTiny
`@opentiny/genui-sdk-materials-vue-element-plus`	Vue + Element Plus
`@opentiny/genui-sdk-materials-angular-opentiny-ng`	Angular + OpenTiny NG

以 Element Plus 适配为例，快速接入代码：

js 复制代码

import 'element-plus/dist/index.css'
import { GenuiConfigProvider, GenuiChat } from '@opentiny/genui-sdk-vue'
import { materials } from '@opentiny/genui-sdk-materials-vue-element-plus/materials'

js 复制代码

<GenuiConfigProvider :materials="materials">
  <GenuiChat />
</GenuiConfigProvider>

同时版本提供 Legacy 兼容组件，存量旧项目可零成本兼容，无需一次性全量改造，支持渐进式升级：

js 复制代码

import { GenuiLegacyRenderer as GenuiConfigProvider, GenuiLegacyChat as GenuiChat } from '@opentiny/genui-sdk-vue'

3、新增图表组件

本次更新@opentiny/genui-sdk-materials-vue-opentiny-vue 升级了图表组件版本，同时还新增了多个图表组件，用于构建更加丰富的界面。Legacy 兼容组件也同步升级并新增了图表。

漏斗图：

散点图：

瀑布图：

拓扑图：

仪表盘：

4、渲染器能力增强

在业务场景的落地和应用过程中，我们支持打磨渲染器能力。v1.3.0 在渲染器上增强了四块能力：默认 Props、refs、异步 Action、lifeCycles，让GenUI SDK能够适配更加复杂的业务场景。

（1）默认 Props：默认值兜底，规避流式渲染异常

目前常用的组件库因为开发时间较早，并没有考虑到会有流式渲染情况，一些必填属性对于流式渲染的场景不够友好，因此大模型流式生成 Schema 时，会面临一个尴尬的问题，组件在流式的过程中会缺少一些必填的属性，比如select组件的options,因属性为 null/undefined 直接抛出渲染报错。

v1.3.0 基于物料元数据构建 defaultPropsMap，自动补全空值属性（用户显式传入的值不会被覆盖），同时支持自定义修改组件基准默认配置（例如按钮组件在不配置的情况下默认设置为primary类型）。大模型仅需输出差异化关键配置。

（2）refs + 异步 Action：支撑组件实例调用，实现后端表单校验

自定义 Action 的定义里多了两个可选字段：

return：返回值 JSON Schema，省略表示无返回值
async：为 true 时 execute 可返回 Promise，this.callAction(name, params) 也会返回 Promise，大模型理解后，可用 then / await 编排

如下是一个自定义表单校验的Action, 对接后台接口，校验用户名是否重复

css 复制代码

const customActions = {
  checkUsernameDuplicate: {
    name: 'checkUsernameDuplicate',
    description: '对接后台接口，校验用户名是否已存在（重复）',
    async: true,
    parameters: {
      type: 'object',
      properties: {
        username: {
          type: 'string',
          description: '待校验的用户名',
        },
      },
      required: ['username'],
    },
    return: {
      type: 'object',
      properties: {
        valid: {
          type: 'boolean',
          description: '是否通过校验：true 表示用户名可用，false 表示已重复',
        },
        message: {
          type: 'string',
          description: '校验结果说明',
        },
      },
      required: ['valid', 'message'],
    },
    execute: async (params: { username: string }) => {
      const res = await fetch(`/api/user/check-username?username=${encodeURIComponent(params.username)}`);
      const data = await res.json();
      // 假设后台返回 { exists: boolean }
      if (data.exists) {
        return { valid: false, message: '用户名已存在' };
      }
      return { valid: true, message: '用户名可用' };
    },
  },
};

refs 支持在根节点声明实例引用，通过 props.ref绑定组件实例；然后可在事件、自定义方法中直接调用组件实例原生方法，能够使用表单的校验能力，进行初步的前端校验，再搭配支持异步执行、可获取返回结果的自定义 Action进行后台的业务校验。

典型场景：用户注册过程中，先通过前端表单，对账号和密码进行一下规则校验，然后发起后端接口校验账号唯一性，整套「前端初步校验 → 后台查重校验 → 继续注册」流程可直接在 Schema 内编排实现。

搭配上述的自定义Action，一个完整的业务场景表单注册校验示例如下：

json 复制代码

{
  "componentName": "Page",
  "state": {
    "formData": {
      "username": "",
      "password": ""
    }
  },
  "refs": {
    "formRef": null
  },
  "methods": {
    "validateForm": {
      "type": "JSFunction",
      "value": "function() { return this.refs.formRef.validate(); }"
    },
    "checkUsername": {
      "type": "JSFunction",
      "value": "async function() { return this.callAction('checkUsernameDuplicate', { username: this.state.formData.username }); }"
    },
    "handleSubmit": {
      "type": "JSFunction",
      "value": "async function() { try { const formValid = await this.methods.validateForm(); if (!formValid) { return; }; const result = await this.methods.checkUsername(); if (!result.valid) { console.log(result.message); return; }; this.callAction('continueChat', { message: '注册成功，用户名：' + this.state.formData.username }); } catch (e) {} }"
    }
  },
  "children": [
    {
      "componentName": "TinyForm",
      "props": {
        "model": {
          "type": "JSExpression",
          "value": "this.state.formData"
        },
        "ref": {
          "type": "JSExpression",
          "value": "this.refs.formRef"
        },
        "rules": {
          "username": [
            { "required": true, "message": "请输入用户名" },
            { "min": 6, "message": "用户名长度需大于5位" }
          ],
          "password": [
            { "required": true, "message": "请输入密码" },
            { "min": 6, "message": "密码长度需大于5位" }
          ]
        }
      },
      "children": [
        {
          "componentName": "TinyFormItem",
          "props": {
            "label": "用户名",
            "prop": "username"
          },
          "children": [
            {
              "componentName": "TinyInput",
              "props": {
                "placeholder": "请输入用户名",
                "modelValue": {
                  "type": "JSExpression",
                  "model": true,
                  "value": "this.state.formData.username"
                }
              }
            }
          ]
        },
        {
          "componentName": "TinyFormItem",
          "props": {
            "label": "密码",
            "prop": "password"
          },
          "children": [
            {
              "componentName": "TinyInput",
              "props": {
                "type": "password",
                "placeholder": "请输入密码",
                "modelValue": {
                  "type": "JSExpression",
                  "model": true,
                  "value": "this.state.formData.password"
                }
              }
            }
          ]
        },
        {
          "componentName": "TinyFormItem",
          "children": [
            {
              "componentName": "TinyButton",
              "props": {
                "type": "primary",
                "text": "注册",
                "onClick": {
                  "type": "JSFunction",
                  "value": "function() { this.methods.handleSubmit(); }"
                }
              }
            }
          ]
        }
      ]
    }
  ]
}

（3）生命周期钩子落地，支持生成式 UI 加载业务数据

渲染器新增了页面生命周期 onMounted 和 onUnmounted。

最核心的作用，就是让 AI 生成出来的页面拥有主动请求后端、拉取业务数据的能力。考虑到生成式 UI 是流式分片持续更新 Schema，我们做了时机控制：页面依旧可以一边接收数据流一边实时预览渲染，但生命周期钩子要等整套 Schema 接收完成之后，只执行一次。

onMounted 适合用来发起接口调用、载入业务数据；onUnmounted 在页面关闭时执行，用来取消请求、清理各类监听，防止资源泄漏。目前 Vue 和 Angular 框架全部支持，真正让生成页面从静态模板，升级为能够对接后端、承载业务逻辑的可用界面。

以下是通过自定义Action搭配生命周期请求后台数据的示例：

css 复制代码

{
  "componentName": "Page",
  "state": {
    "tableData": []
  },
  "methods": {
    "loadTableData": {
      "type": "JSFunction",
      "value": "async function() { const result = await this.callAction('fetchEmployeeList'); this.state.tableData = result.data; }"
    }
  },
  "lifeCycles": {
    "onMounted": {
      "type": "JSFunction",
      "value": "function() { this.methods.loadTableData(); }"
    }
  },
  "children": [
    {
      "componentName": "TinyGrid",
      "props": {
        "data": {
          "type": "JSExpression",
          "value": "this.state.tableData"
        },
        "columns": [
          { "type": "index", "width": 60 },
          { "field": "name", "title": "姓名" },
          { "field": "id", "title": "工号" },
          { "field": "department", "title": "部门" }
        ]
      }
    }
  ]
}

5、演练场能力进一步增强

在v1.2.0新增了skill能力和A2A能后，v1.3.0致力于优化体验，进一步地对演练场进行了能力增强与优化

（1）多框架：一键切换，同屏混用

多框架方案打破技术栈「二选一」的局限，一套底座同时支撑 Vue、Angular 两大主流前端框架。

在演练场中，您可一键切换目标框架；切换完成后，Prompt 驱动的代码生成逻辑、组件实时渲染引擎将自动同步适配当前技术栈。系统持久记忆你的框架偏好，再次打开会话无需重复配置。

支持同一历史会话混用，允许在同一个会话内同时展示 Vue、Angular 不同框架产出的 Schema 卡片，便于开发者横向对比两套技术栈的代码结构，组件风格样式等。

（2）A2A 协议升级至 v1.0

演练场正式完成 A2A v1.0 协议适配。

A2A 提供 Agent 与应用之间标准化互通能力，核心价值在于支持接入各类外部 Agent，并把第三方智能体封装成标准化工具，灵活组装多方 AI 能力，打破不同 Agent 之间的调用壁垒。

通信链路自带版本兼容机制：系统自动探测对接外部 Agent 使用的协议版本，当检测到对方使用旧协议导致调用失败时，将智能自动回退适配。开发者无需额外开发版本判断逻辑，高效完成新旧 Agent 生态互联互通。

例如这里有一个在线的解答网页规范的agent, 你可以将他接入到演练场体验。这里接入后询问一下SEO相关的问题：

Agent链接：specification.website/.well-known...

（3）OpenAPI文档转工具

平台内置 OpenAPI 解析能力，实现存量接口一键转化为对话工具。

你可以在演练场配置 OpenAPI 文档地址、粘贴文档内容、上传OpenAPI 文档文件三种方式上传后，一键解析文档内容。演练场将自动解析接口定义，批量将业务 API 封装为标准化对话工具，供给智能体调用。（通常需要同步配置请求头)

目标服务地址以及鉴权请求头后，系统无需改造后端代码，即可快速将存量业务能力整合进对话流程，实现业务能力的灵活编排与复用，高效完成 AI 与业务系统的打通。

以下是将华为云ECS文档转化为工具的演示(需要自行配置token)：

（4）模板加入历史版本控制

在v1.2.0开放的模板模式支持直接在线编辑 Schema，修改内容后实时预览渲染效果。但是修改后由于没有历史记录，多次修改后难以追踪修改内容，也无法回退到某一版本。本次更新新增版本历史能力，系统自动以卡片形式留存每一次 Schema 生成记录，支持快速查看版本差异 Diff、一键回滚复现历史方案，便于问题追溯、方案横向对比，降低反复调试、方案丢失带来的成本，提升模板迭代调试效率。

修改后会生成历史记录，点击历史记录查看diff。也可以一键应用之前历史版本：

（5）切换提示词版本

选用 Vue 技术栈时，提供两套提示词规格：Mini 版本精简轻量化，仅保留表单组件和表格组件等常用场景，大幅降低 Token 消耗。Standard 版本主要新增了图表组件，能够支持图表数据渲染。可根据所用模型能力自由选择，实现资源与效果最优平衡。

用Mini版本生成表单：

用Standard版本生成图表：

（6）国际化适配

演练场进行了国际化适配，支持中文、英文界面自由切换。可以通过页面左下角控件调整语言类型。演练场会自动记忆语言偏好设置，后续重新进入页面、新建会话时自动加载对应语种

React渲染器发布测试版本

React 渲染器测试版发布，配套 Ant Design 物料库同步上线！目前React技术栈发布了@opentiny/genui-sdk-react@1.3.0-alpha.1以及@opentiny/genui-sdk-materials-react-antd@1.3.0-alpha.1两个测试包。诚邀大家抢先试用、提出建议，助力正式版本更完善！

提示词生成：

js 复制代码

import { genPrompt } from '@opentiny/genui-sdk-core';
import { materialsMeta } from '@opentiny/genui-sdk-materials-react-antd/meta';

const systemPrompt = genPrompt('React', materialsMeta);

UI组件使用：

js 复制代码

import { useState } from 'react';
import { GenuiConfigProvider, GenuiRenderer } from '@opentiny/genui-sdk-react';

function App() {
  // ...other code
  const [schema, setSchema] = useState('');
  return (
    <GenuiConfigProvider materials={materials}>
        <GenuiRenderer key={rendererKey} content={schema} />
    </GenuiConfigProvider>
  );
  
}

demo生成效果如下：

其他问题修复，提升生产稳定性

优化纯 Markdown 文本场景渲染逻辑，无 UI 卡片时回落纯文本显示
强化 JSON 补丁渲染规则、优化组件 ID 分配机制，避免增量渲染错乱
统一图片内容类型为 OpenAI 标准，适配全网主流大模型
优化 Prompt 参数校验与使用规则，约束模型输出规范，降低异常概率
修复流式渲染场景下 ref 为空对象时报错问题

版本总结

GenUI SDK v1.3.0 是一次架构解耦+能力强化+体验升级的重磅迭代：通过 Core 独立发包、物料可插拔架构彻底解放 SDK 拓展性；通过渲染器底层优化解决流式渲染、复杂交互的生产痛点；通过演练场全面升级降低开发者落地门槛，同时超前支持 React 测试版、A2A 最新协议，全方位适配企业前端智能化改造需求。

欢迎各位开发者升级体验，若在使用过程中遇到问题、有功能优化建议，可通过 GitHub Issues 反馈，也欢迎 Star 收藏、参与开源共建！

完整迭代明细可查阅官方 Release 文档：v1.3.0 Release Note

关于 OpenTiny NEXT

OpenTiny NEXT 是一套企业智能前端开发解决方案，以生成式 UI 和 WebMCP 两大核心技术为基础，对现有传统的 TinyVue 组件库、TinyEngine 低代码引擎等产品进行智能化升级，构建出面向 Agent 应用的前端 NEXT-SDKs、AI Extension、TinyRobot智能组件库、GenUI等新产品，实现AI理解用户意图自主完成任务，加速企业应用的智能化改造。

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

OpenTiny 官网：opentiny.design

GenUI SDK 代码仓库：github.com/opentiny/ge... （欢迎star ⭐）

如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~如果你有任何问题，欢迎在评论区留言交流！

GenUI SDK v1.3.0 发布｜多框架兼容，一键换物料，渲染器 & 演练场全面增强！

前言

版本特性总览

新特性详解

1、Core 核心包独立发包，能力自由复用

2、物料可插拔架构，多组件库一键切换

3、新增图表组件

4、渲染器能力增强

（1）默认 Props：默认值兜底，规避流式渲染异常

（2）refs + 异步 Action：支撑组件实例调用，实现后端表单校验

（3）生命周期钩子落地，支持生成式 UI 加载业务数据

5、演练场能力进一步增强

（1）多框架：一键切换，同屏混用

（2）A2A 协议升级至 v1.0

（3）OpenAPI文档 转工具

（4）模板加入历史版本控制

（5）切换提示词版本

（6）国际化适配

React渲染器发布测试版本

其他问题修复，提升生产稳定性

版本总结

关于 OpenTiny NEXT

（3）OpenAPI文档转工具