React 正式登场！GenUI SDK v1.4.0 三框架渲染、出码与 Agent 生态重磅升级~

前言

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

此前，React 渲染器已通过 Alpha 预览版率先亮相；随着 GenUI SDK v1.4.0 正式发布，React 渲染器也一并进入正式版。至此，GenUI SDK 的生成式 UI 渲染能力完整覆盖 Vue、React、Angular 三大主流前端技术栈。

本次更新围绕 三大主流框架渲染完善、vue出码能力支持、物料体系开放升级、Playground 与构建器模式体验重塑、工程稳定性与集成效率提升 五个方向展开，并带来一批工程稳定性修复，让生成式 UI具备更强大的生态兼容性和更广泛场景应用。

• 开源地址：github.com/opentiny/ge… （欢迎 Star ⭐）
• 官方网站：opentiny.design/genui-sdk
• 演练场地址：opentiny.github.io/genui-sdk/p…

版本特性总览

🚀 三框架渲染与出码能力进阶

• React 渲染器正式发布，并配套 Ant Design 5 物料、完整文档与演练场在线体验。
• Vue 新增 SchemaJson 出码能力，可生成完整 Vue SFC，为二次开发和工程交付打通最后一公里。
• Angular 渲染器支持 Content Children、内容投影、Ref实例引用和Template Ref，复杂组件组合能力显著增强。

🧩 物料体系开放升级

• OpenTiny Vue 物料新增 Plus 层级，在 Standard 基础上增加 15 个高级组件，生成式 UI 从卡片与看板进一步走向完整业务应用。
• 图标纳入物料统一管理，切换物料时组件、图标配套同步变更，渲染器保持通用，降低自定义物料接入成本。
• Server包 支持启动时传入 materialsMeta，业务自定义物料可直接进入生成链路。
• Vue / React / Angular 渲染器支持自定义消息通知组件，方便复用项目原有业务提示能力。

⚡ 演练场与构建器模式体验重塑

• 对话模式与构建器模式切换升级为独立路由，模式入口更清晰，页面切换更顺滑。
• 演练场支持按框架选择组件库，生成提示、物料元数据和渲染结果保持一致。
• 构建器新增组件点选修改：直接选中预览页上的组件，用自然语言定向修改目标元素。
• 新增请求总耗时、首响耗时与渲染耗时展示，更直观地定位体验瓶颈。
• 输入长度上限提升至 20,000，长需求、长上下文输入更加从容。

🛡️ 工程稳定性提升

• TinyVue 升级至 3.31，并修复流式生成表单时过早出现校验提示的问题。
• IndexedDB 本地存储异常不会中断消息渲染；优化 Angular 技术栈的状态持久化保存。
• 修复 transform-jsx 与类型声明构建问题，提升开发态和发包产物的兼容性。

🤖 Agent 生态扩展

• 新增 Skill Generator：基于项目物料直接生成 Agent Skill，让 Agent 直接具备 GenUI SDK 能力。
• 新增 Integration Skill：让 Agent 读懂 GenUI SDK 用法，更精确地完成 SDK 接入。
• 推出 dsh-genui 插件，在 DeepSeek Harness 的对话中也能直接使用生成式 UI。

🔬 生成效果量化

• 新增 GenUI Benchmark 评测套件：把生成质量、协议合规、时延与 Token 成本变成可量化的数据。

新特性详解

1. React 渲染器正式发布，三大前端技术栈完整集结

React 是当前使用最广泛的前端技术栈之一。此前发布的 Alpha 预览版让开发者率先体验了 React 栈的渲染能力，而 v1.4.0 进一步补齐运行时、物料、文档与演练场链路，React 渲染器由预览走向正式可用。

正式版以 @opentiny/genui-sdk-react 交付，支持将模型流式生成的 SchemaJson 渲染为 React 界面，并且同样支持自定义组件、自定义 Actions、缓冲字段与全局状态等能力，与 Vue、Angular 的使用体验保持一致。

与渲染器同步发布的 @opentiny/genui-sdk-materials-react-antd 基于 Ant Design 5 提供官方物料。渲染器与具体组件库保持解耦，前端通过 GenuiConfigProvider 注入物料，使用方式也十分简单：

import { GenuiConfigProvider, GenuiRenderer } from '@opentiny/genui-sdk-react';
import { materials } from '@opentiny/genui-sdk-materials-react-antd/materials';
import 'antd/dist/reset.css';

export function App({ schema }: { schema: string | Record<string, unknown> }) {
  return (
    <GenuiConfigProvider materials={materials}>
      <GenuiRenderer content={schema} />
    </GenuiConfigProvider>
  );
}

详细用法可以参考以下文档：

• react快速开始文档：docs.opentiny.design/genui-sdk/g…
• react组件API文档：docs.opentiny.design/genui-sdk/c…  

React 技术栈在演练场也有对应的体验入口：在对话模式的物料面板中选择 React 物料即可体验。

• 演练场链接：opentiny.github.io/genui-sdk/p…

2. 从 SchemaJson 到 Vue 源码，生成结果可真实应用

很多生成式 UI 场景都要经历同一条路径：先让模型快速生成可交互页面，再由开发者接手调整业务逻辑、样式和工程结构。如果生成结果只能停留在运行时 SchemaJson，后续交付仍需要大量人工翻译。

v1.4.0 为 Vue 技术栈补上了代码生成能力。开发者可以把 SchemaJson 转换为包含 <template>、<script setup> 与 <style> 的 Vue SFC，生成内容会尽量还原组件树、状态、方法、refs 和样式。

@opentiny/genui-sdk-vue 新增了 code-generator 子路径，提供代码生成 API generateCode，使用方式如下：

import { generateCode } from '@opentiny/genui-sdk-vue/code-generator';

const { panelName, panelValue, errors } = await generateCode({
  pageInfo: {
    name: 'OrderForm',
    schema,
  },
  componentsMap,
  formatWithPrettier: true,
});

其中，panelName 是输出文件名，panelValue 是生成后的 Vue SFC；errors 会返回编译校验结果，方便在下载或写入工程前提前发现问题。对于需要定制格式化选项或关闭编译校验的场景，也可以直接使用 VueCodeGenerator。

此次更新在演练场也提供了“导出 Vue 源码”入口，让原型验证与工程开发自然衔接。现在，在演练场中生成卡片后，鼠标悬浮到卡片上，右上角会出现“导出源码”按钮，点击即可获得对应的 Vue SFC 代码。

我们还可以借助 TinyVue 演练场验证这份源码：将导出的代码复制、粘贴到演练场后，页面立即正常渲染，并呈现出与 GenUI 演练场一致的效果——这也说明生成的源码可以直接用于真实工程。
 

3. Angular 渲染器进阶，复杂组件不再止步于“能显示”

表格、表单、列表等企业级组件往往依赖内容查询、模板引用与内容投影。缺少这些 Angular 原生语义时，简单卡片可以正常渲染，但一进入组合组件和模板驱动场景，表达能力就会明显受限。

v1.4.0 对 Angular 渲染器进行了系统增强：

• 支持按类型或引用名查询 Content Child / Content Children。
• 支持区分 ng-content select 投影区域，让子内容进入正确插槽。
• 支持声明命名模板，并在内容查询中读取 TemplateRef。
• 支持模板上下文变量，使模板能够承接动态数据。
• 支持 refs 特性，可通过 this.refs 或作用域变量访问组件引用。

这些能力让 Angular 下的生成式 UI 从基础组件树渲染，进一步走向复杂组件结构和真实业务交互。配套新增的 refs 示例，也让开发者与模型都有了更清晰的使用参照。

4. 物料不再是附属配置，而是可组合的能力边界

在不同企业项目里往往需要不同的组件库，并沿用各自的图标、主题和消息反馈。只替换组件映射还不够，真正可组合的物料体系，需要把这些与视觉和交互相关的能力一起交还给业务侧选择。

v1.4.0 一方面通过 Plus 物料扩展复杂应用的生成边界，另一方面继续完善主题、图标、服务端元数据和通知能力，让“选择一套物料”真正覆盖从模型生成到前端呈现的完整链路。

Plus 物料：从生成卡片，走向生成完整业务应用

物料数量并非越多越好。简单问答如果一次性把所有组件描述都交给模型，不仅会占用更多上下文，也会增加组件选择难度；但如果物料过少，模型面对后台管理、组织权限、审批流等真实业务需求时，又只能生成一组基础输入框，难以表达页面结构和业务语义。

因此，OpenTiny Vue 物料在 v1.4.0 形成了清晰的三级选择：

物料层级	适用场景	主要能力
Mini	轻量表单、信息块、简单卡片	保留常用输入与展示组件，优先控制提示词上下文
Standard	数据展示与分析	在 Mini 之上加入 Tab、分页和图表，适合列表、看板与详情页
Plus	完整业务应用页	在 Standard 之上增加 15 个高级组件，覆盖复杂信息组织、层级数据选择和流程交互

Plus 并不是简单扩大组件清单，而是补齐了构建复杂应用所需的几类关键能力：

• 复杂信息组织：TinyCollapse、TinyCollapseItem、TinySteps、TinyCarousel 可以把长内容拆分为分区、步骤或分屏，避免生成页面只是从上到下堆叠组件。
• 层级与大数据选择：TinyCascader、TinyTree、TinyTransfer、TinyAutocomplete、TinyPopeditor 能表达部门、区域、权限、成员等具有层级或大数据量特征的业务对象。
• 更丰富的业务输入：TinyColorPicker 与 TinyIpAddress 让生成界面可以覆盖主题配置、网络配置等更专业的录入场景。
• 上下文反馈与临时任务：TinyDialogBox、TinyTooltip、TinyPopover 让确认、补充说明和局部操作留在当前任务流中完成。

这意味着模型生成的不再只是“看起来像页面”的静态组件树，而是能够按照业务信息架构组织内容、绑定页面状态，并通过事件和 Action 完成提交、重置与继续对话的应用界面。

例如，我们在演练场中用 Plus 物料生成了一套“员工入职信息登记”应用。折叠面板将较长的表单拆分为“基本信息”“教育及工作经历”“薪资与福利”三个区域，用户可以按主题逐组填写，避免页面从上到下堆满字段；“部门”字段则使用级联选择器，从技术部、产品部等一级组织继续选择前端开发组、产品经理组等二级小组，一次操作即可完成组织路径录入。配合日期选择、数字输入、单选、开关以及提交和重置逻辑，这个例子直观展示了 Plus 如何把生成式 UI 从局部内容展示推进到完整业务流程：

想要使用 Plus 物料也十分简单，只需在前端注入 plusMaterials：

<script setup lang="ts">
import { GenuiChat, GenuiConfigProvider } from '@opentiny/genui-sdk-vue';
import { plusMaterials } from '@opentiny/genui-sdk-materials-vue-opentiny-vue/materials';
</script>
<template>
  <GenuiConfigProvider :materials="plusMaterials">
    <GenuiChat url="https://your-chat-backend/chat/completions" />
  </GenuiConfigProvider>
</template>

前端注入 Plus 物料后，还需要让服务端也认识这套物料——这正是接下来要介绍的服务端物料配置。

图标随物料交付，组件体验保持完整

图标与组件通常属于同一套设计语言。本次更新将图标能力归入物料体系，各组件库可以连同自己的图标一起提供给生成链路。切换物料时，组件与图标能够保持一致；渲染器也不再承担特定组件库的适配，更容易接入企业内部物料。

TinyVue 可用图标：

Element Plus可用图标：

TinyNG可用图标：

服务端启动也能选择物料，前后端描述保持一致

过去启动服务端时，生成链路使用的物料描述主要固定为 TinyVue 与 TinyNG。即使前端接入了其他组件库，模型仍无法自动理解这些组件的使用方式与参数，容易出现前端能够渲染、服务端却不会生成的情况。

现在，startServer 与 equipChatCompletions 支持在启动时传入 materialsMeta，服务端不再局限于 TinyVue 和 TinyNG，可以按项目需要选择 Plus、Element Plus、Ant Design 或企业自定义物料。以 Plus 为例，服务端传入对应的 plusMaterialsMeta 后，折叠面板、级联选择器等组件便能进入 system prompt 和生成链路：

import { startServer } from '@opentiny/genui-sdk-server';
import { plusMaterialsMeta } from '@opentiny/genui-sdk-materials-vue-opentiny-vue/meta';

startServer({
  port: 3100,
  baseURL: 'https://api.openai.com/v1',
  apiKey: process.env.LLM_API_KEY ?? '',
  materialsMeta: plusMaterialsMeta,
});

通知能力开放，生成界面自然融入系统

异常提示是业务页面不可缺少的反馈。Vue、React 与 Angular 的 Config Provider 现在均支持注入自定义 Notify，无论项目使用哪套组件库或企业内部消息组件，都可以继续沿用原有交互规范；未配置时则回退到内置提示，不影响开箱即用。

以 Vue 为例，只需将业务侧消息组件包装为 NotifyHandler，再传给 GenuiConfigProvider：

<script setup lang="ts">
import { TinyNotify } from '@opentiny/vue';
import type { NotifyHandler } from '@opentiny/genui-sdk-vue';

const notify: NotifyHandler = (options) => TinyNotify(options);
</script>
<template>
  <GenuiConfigProvider :materials="materials" :notify="notify">
    <GenuiRenderer :content="schema" />
  </GenuiConfigProvider>
</template>

物料架构升级小结

从 Plus 组件扩展，到图标与主题能力归入物料，再到服务端元数据与通知能力开放，这组变化共同完成了一件事：让物料成为一套可以整体选择、组合和替换的应用能力，而渲染器保持稳定、通用和轻量。

5. 演练场体验全面升级，交互细节进一步打磨

除了前面提到的 React 物料体验、按框架选择组件库、Plus 物料验证与 Vue 源码导出，演练场（Playground）本身也完成了一轮体验升级；同时，输入长度上限也从 1,000 提升至 20,000，长需求、长上下文的输入更加从容。

模式切换交互优化

本次更新重新梳理了对话模式与构建器模式的使用路径，将模式切换升级为独立路由：链接可以直接定位到对应模式，入口更清晰，页面切换也更顺滑。

时间统计信息

为了让性能判断不再依靠体感，生成完成信息现在会展示请求总耗时、首响耗时和渲染耗时，帮助开发者快速区分瓶颈来自模型响应、网络传输还是 UI 渲染。
 

组件点选修改：直接指定元素做调整

当页面变得复杂，用文字描述要修改的位置很容易产生歧义。比如说“修改第二个按钮”，模型需要通读全部生成内容、自行对应目标，很容易改错位置。

构建器模式的组件点选能力把这段沟通变得更直接。进入开发态后，可以在预览页面中直接点选要修改的组件，被选中的目标会高亮显示，并以组件标签的形式加入输入框。接着只需补充“改成主色按钮”“把这一组字段调整为两列”之类的要求，模型便能结合对应组件的上下文定向修改；需要同时调整多个区域时，也可以连续点选多个组件后一次说明。

对开发者来说，这就像在设计稿上圈出修改位置后再写批注：目标更明确，提示词更短，也减少了模型改到无关区域的概率。选中项可以随时移除或清空，发送后的用户消息仍会保留组件标签，方便回看每一轮修改针对了哪里。

 

6. 两套 Skill 工具包，赋能 Agent

Skill Generator：给 Agent 直接生成一份生成式 UI Skill

@opentiny/genui-sdk-skill-generator 提供API能力，选择物料和配置，直接生成一份可供 Agent 接入的 Skill。Agent 装上这份 Skill，就具备了生成式 UI 能力，可以按照项目组件库与规范产出页面，不再需要手写和维护大量 Prompt。支持 Vue、React、Angular，物料可选 Standard、Plus、Element Plus、Ant Design 或企业自定义物料，产出的 Skill 与项目实际技术栈保持一致。

详细的 API 文档：docs.opentiny.design/genui-sdk/c…

Integration Skill：让 Agent 帮你完成 SDK 接入

另一个包是 @opentiny/genui-sdk-integration-skill。这个技能是指导大模型如何使用 GenUI SDK 的。内置 Vue、Angular、React。Node Server 的选型指引、安装步骤、物料配置、流式响应处理、常见坑点等知识库。开发者只需要描述项目需求，Agent 就可以按照这套 Skill，完成项目初始化、前后端接入工作。

这份 Integration Skill 的实际体验，我们后续会在专题文章详细介绍。他能够让 Agent 从安装 Skill，到初始化 Vue 3 项目、接入指定物料并启动验证，再到继续补齐后端服务，敲一下文字即可完成生成式UI的全链路集成。

7. AI 生态扩展，在 DSH 中也能使用生成式 UI

GenUI SDK 不只服务于从零开发的 AI 应用，也在持续进入更多 Agent 平台和开发者生态。面向 DeepSeek Harness（DSH），我们推出了 dsh-genui 插件，让开发者为现有对话接入 OpenTiny GenUI SDK 的生成式 UI 能力。

安装插件后，模型回复不再局限于文本和 Markdown。用户可以直接用自然语言要求 Agent 生成图表、表单、计算器、仪表盘或交互式小应用，并在回复区域中直接查看和操作。表单提交、按钮点击等交互结果还可以返回对话，由模型承接当前状态继续分析或执行，形成“模型生成界面—用户完成操作—Agent 继续处理”的完整闭环。

安装也只需要一条命令：

dsh plugin --profile web add dsh-genui

想了解实际效果、使用方式和更多示例，可以继续查看：

• 介绍文章：dsh-genui 插件详细介绍
• 插件主页：dsh-genui — GenUI inside DeepSeek Harness

从生成 Skill、帮助 Agent 接入 GenUI SDK，到把生成式 UI 带进 DSH，这些扩展让 GenUI SDK 不再只是一套开发库，也逐渐成为可以融入不同 AI 工具与 Agent 工作流的开放能力。

8. 生成效果可量化：新增 GenUI Benchmark 评测套件

生成式 UI 的效果过去更多依赖体感和个别案例：换一个模型、改一段提示词或升级一版物料，究竟变好还是变差，很难说清。v1.4.0 在开源仓库中新增了评测套件：按内置场景让模型批量生成页面，校验协议合规，同时统计请求成功率、时延与 Token 消耗，并可选引入 LLM Judge 给出质量评分。

这套评测体系的意义，不只是多了一个跑分工具：

• 让“好”有统一标尺：模型选型、提示词调整、物料升级都在同一套场景与口径下比较，结论可复现，不再依赖个人体感。
• 让能力边界清晰可见：场景覆盖基础组件、复杂页面、约束、边界与多轮上下文，哪类需求已经稳定、哪类还容易翻车，评测结果一目了然。
• 让基准成为社区资产：评测随仓库开源，开发者可以用同一套基准评估自己的模型与物料组合，社区也能在此基础上共建更丰富的场景。

本地运行也很简单：复制 packages/benchmarks/.env.example 为 .env，按模型清单填写对应的 API Key 与 Base URL（如 DEEPSEEK_API_KEY / DEEPSEEK_BASE_URL），再执行 pnpm benchmarks 即可打开配置页，选择模型与场景开始评测。

配置页的关键配置项如下：

• 模型：用于对应场景生成结果的大模型
• 协议：界面 UI 使用的协议
• 场景：预设的测试场景，如生成表单、展示销售数据等
• System 对照：plain 使用空 system 提示词，生成纯文本对照样本；full 使用完整的生成式 UI 提示词
• LLM Judge：可选，使用大模型对生成结果进行评分

选择以下配置进行评测：

以下是输出的各项指标的量化报告：

更多模型与配置组合的评测结果，欢迎大家亲自跑一跑~

 

其他值得关注的修复

1.首页优化
对官网首页进行了构建优化，视频采用懒加载策略，提升初次加载速度；同时新增硬币博弈生成式 UI 案例，从更具互动性的场景理解 GenUI 能做什么。

2.流式表单校验提示更加自然
流式生成表单时，字段与默认值会逐步到达。如果校验过早触发，页面还没生成完整就可能出现错误提示。v1.4.0 在升级 TinyVue 3.31 的同时补充合理默认值并优化表单校验行为，让提示在流式阶段更加稳定。

3.本地持久化异常不再拖垮渲染
浏览器 IndexedDB 可能因容量、权限或环境限制保存失败。现在，保存异常不会继续向上抛出并中断消息渲染，持久化失败与 UI 展示被更合理地隔离开。

4.Angular 卡片状态恢复更加可靠
针对 Angular 卡片在路由返回后消失，以及跨框架桥接场景下 saveState 无法正确定位卡片的问题，本版补齐了恢复与状态保存逻辑。切换页面再返回时，卡片和交互状态能够更稳定地延续。

5.开发与构建链路进一步加固
本版修复了开发态 JSX 转换的兼容问题，以及 transform-jsx.d.ts 引用源码目录的问题，降低文档开发、类型声明生成和 npm 构建过程中的意外报错。

总结

GenUI SDK v1.4.0 以三框架渲染与出码能力进阶、物料体系开放升级、Playground 与构建器模式体验重塑、工程稳定性与集成效率提升为核心升级方向。

从 React 渲染器正式发布、三大前端技术栈完整集结，到 Vue SchemaJson 一键导出源码与 Angular 复杂模板能力完善；从 Plus 物料补齐复杂业务组件，到构建器模式直接点选组件定向修改，再到两套 Skill 工具包与 DSH 插件把生成式 UI 带进各类 Agent 工作流——这次更新关注的不只是“生成出了什么”，更关注生成结果如何进入真实项目、如何被准确修改，以及如何稳定交付。

欢迎各位开发者升级体验。使用过程中若遇到边界场景或有优化建议，欢迎通过 GitHub Issues 反馈；也欢迎 Star 与参与贡献。我们将持续迭代打磨更优质的 GenUI 产品能力！

详细变更列表可参考 Release Note：github.com/opentiny/ge…

关于 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标签，一起参与开源贡献~如果你有任何问题，欢迎在评论区留言交流！