进阶必看！GenUI SDK 深度源码分析~

当 AI 回复不再只是一坨 Markdown 文本，而是直接渲染出可交互的表单、图表、卡片——这才是 AI 交互的下一站。GenUI SDK 说：我来了。

一、这项目到底在做什么？

GenUI SDK 是 OpenTiny 团队围绕 Generative UI（生成式 UI） 构建的全栈开发工具包。

先别被名字吓到。核心概念很简单：

举个例子：用户问"帮我查一下订单状态"，传统 AI 用文字描述订单信息；Generative UI 直接渲染一个订单卡片——状态标签、操作按钮，你可以直接点"取消订单"。

这就是 GenUI SDK 要做的事：让 AI 的输出从自然语言升级到组件描述语言。

当前版本 @opentiny/genui-sdk-vue@1.2.1，MIT 许可证，113 Stars。语言构成：TypeScript 66.2% + Vue 31.2%。

二、核心机制：Schema 驱动渲染

GenUI SDK 的"魔法"本质是一条管线：

AI 输出 → UI Schema → 渲染器解析 → Vue/Angular 组件 → 用户交互 → 新消息 → AI

Schema 不是硬编码的 HTML 或 Vue 模板，而是描述式的组件定义：

• 声明组件类型（Form、Card、Chart）
• 声明组件属性（表单字段、卡片内容、图表数据）
• 声明组件交互（按钮动作、表单提交回调）

关键洞察：AI 的输出格式从"自然语言"变成了"组件描述语言"，前端渲染器把描述翻译成真正的 UI。这意味着——AI 不需要知道 Vue 怎么写，它只需要知道"我要一个表格，三列，数据是这些"。

三、架构拆解：前后端一体化三包架构

genui-sdk/
├── packages/
│   ├── server/              # 后端服务包
│   ├── frameworks/          # 前端框架包
│   │   ├── vue/             # Vue 渲染器
│   │   └── angular/         # Angular 渲染器
│   ├── core/                # 核心共享逻辑
│   ├── materials/           # 物料/组件描述
│   ├── chat-completions/    # 聊天补全
│   ├── benchmarks/          # 性能基准测试
│   └── ...
├── projects/                # 示例项目
├── sites/                   # Playground 站点
├── docs/                    # 文档
└── pnpm-workspace.yaml

前后端一体化——不是只做前端画个壳，Server 包是 GenUI 的"大脑"，负责把纯文本响应编排成带 UI Schema 的结构化响应。

四、Server 包：不只是透传 LLM 响应

Server 包的核心价值在于对响应进行编排和增强：

• LLM 对接：遵循 OpenAI API 规范，OpenAI/DeepSeek/Anthropic 等主流 LLM 都能接
• 消息编排：把用户消息、AI 响应、工具调用结果编排成完整对话流
• MCP 工具扩展：通过 MCP 连接外部/企业系统，扩展 AI 的"工具箱"
• 访问控制：不同用户能用不同工具，企业场景刚需
• 自定义动作：配置自定义命令（打开页面、获取数据、生成表单）

一句话：Server 不是简单透传 API 响应，它要把"AI 说的话"翻译成"前端能画的东西"。

五、Vue 渲染器：Schema 到组件的翻译官

Vue 渲染器的工作流：

1. 接收 AI 返回的 UI Schema
2. 解析为组件描述（什么组件、什么属性、什么交互）
3. 用 Vue 的 <component :is="xxx"> 动态渲染
4. 用户交互 → 封装成消息 → 回传给 AI

定制化能力很强：

• 自定义组件库：注册你的业务组件，让 AI 也能生成——“AI 不只懂标准组件，还懂你的业务组件”
• 自定义交互逻辑：配置多轮对话流程和自定义命令
• 主题定制：Token 化主题系统，暗黑模式和品牌定制都支持

六、Materials（物料）系统：AI 的 UI 词汇量

packages/materials/

Materials 包是 GenUI 的"字典"——定义 AI 可以使用的组件"词汇"：

• 每个物料描述一个组件的"规格"（名称、属性、默认值、交互定义）
• AI 只能生成 Materials 中注册过的组件类型——不会出现前端无法渲染的组件
• 开发者可以添加新物料扩展 AI 的"UI 词汇量"

扩展流程：

1. Materials 中注册组件 Schema 定义
2. Vue/Angular 渲染器中注册组件实现
3. Server 配置声明该组件可用于 AI 生成
4. AI 即可在响应中使用该组件

AI 的生成能力始终与前端渲染能力对齐——不会出现"AI 画了个前端画不出来"的情况。

七、MCP 工具集成：AI 不只展示，还能操作

GenUI SDK 支持 MCP（Model Context Protocol）扩展：

• AI 在对话中可以"调用工具"——查数据库、调 API、读文件
• 工具调用结果可以转化为 Generative UI 组件（查询结果渲染为表格）
• MCP 让 GenUI 从"展示层"变成"业务操作层"

这意味着用户跟 AI 说"帮我查本月销售数据"，AI 不只是文字描述，而是直接给你一个图表组件，你可以切换维度、筛选条件——真正可交互的 AI。

八、Angular 渲染器：跨框架不是说说而已

Angular 渲染器跟 Vue 渲染器功能对称，用 Angular Dynamic Component 机制渲染 Schema 指定的组件。

双框架渲染器的设计哲学：Schema 是通用的，渲染器是可替换的。你选 Vue 就用 Vue 渲染器，选 Angular 就用 Angular 渲染器——框架中立，不是 Vue 独占。

九、Playground：自证式体验

GenUI 提供了在线 Playground：https://opentiny.github.io/genui-sdk/playground/

最妙的是——Playground 本身就是用 GenUI SDK 构建的。你在 Playground 中与 AI 对话，AI 生成的 UI 就是 GenUI 的实际效果。这叫"自己证明自己"，比任何文档截图都管用。

十、在 OpenTiny 生态中的位置

GenUI SDK 在生态中处于AI 应用层——利用底层组件（TinyVue/TinyRobot）和协议层（NEXT SDK/WebMCP），构建面向终端用户的 Generative UI 应用。

十一、总结：AI 交互的下一站

🌟 核心创新

1. Generative UI 范式 —— 从"AI 说"到"AI 画"，文本对话进化为可交互 UI
2. 前后端一体化 —— Server + Vue/Angular 渲染器完整覆盖，不是只做前端壳
3. Schema 驱动 —— 描述式 Schema 连接 AI 输出与前端渲染，框架中立
4. Materials 可扩展 —— AI 的 UI 词汇量通过物料注册可控扩展

👍 优势

• OpenAI API 规范兼容，LLM 接入门槛低
• Vue + Angular 双框架支持，不是 Vue 独享
• MCP 工具集成，AI 不只展示还能操作
• 自证式 Playground，效果直观

🤔 挑战

• 目前Stars数不高，项目还在早期推广——需要更多场景验证
• Generative UI 需要AI 模型配合输出 Schema，对 LLM 提示工程有要求
• 组件物料丰富度决定了 AI 生成 UI 的能力上限——物料越多越强

🎯 适用场景

• AI 驱动的业务操作界面（AI 客服直接生成订单操作面板）
• 智能数据可视化（AI 动态生成图表）
• 对话式表单填写（AI 根据上下文生成定制表单）
• 企业 AI 助手的交互增强

GenUI SDK 代表了 AI 前端交互的下一代范式——从纯文本对话进化到可交互的生成式 UI。虽然项目尚处早期，但架构设计展现了清晰的愿景和扎实的工程基础。

📚 项目资源

觉得有意思？点赞👍收藏⭐让更多人看到！Generative UI 这个方向绝对是 AI 交互的下一波浪潮，先了解先占坑~

关于 OpenTiny NEXT

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

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
OpenTiny 官网：https://opentiny.design
GenUI SDK 代码仓库：https://github.com/opentiny/genui-sdk （欢迎star ⭐）