🎨 看完 GenUI SDK 源码我悟了！

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

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

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

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

维度	传统对话式 AI	Generative UI
AI 输出	纯文本/Markdown	可交互组件（表单、图表、卡片）
用户能做什么	只能继续对话	直接在 AI 生成的 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 怎么写，它只需要知道"我要一个表格，三列，数据是这些"。

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

bash 复制代码

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

包名	干什么	核心能力
`@opentiny/genui-sdk-server`	后端大脑	LLM 对接、消息编排、工具调用、访问控制
`@opentiny/genui-sdk-vue`	Vue 前端渲染器	Schema 解析、组件动态渲染、主题定制
`@opentiny/genui-sdk-angular`	Angular 前端渲染器	Schema 解析、Angular 组件动态渲染

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

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

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

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

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

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

Vue 渲染器的工作流：

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

定制化能力很强：

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

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

bash 复制代码

packages/materials/

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

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

扩展流程：

Materials 中注册组件 Schema 定义
Vue/Angular 渲染器中注册组件实现
Server 配置声明该组件可用于 AI 生成
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：opentiny.github.io/genui-sdk/p...

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

十、在 OpenTiny 生态中的位置

搭档	关系
TinyRobot	GenUI Vue 渲染器可能复用 TinyRobot 对话组件做基础 UI 层
NEXT SDK	NEXT SDK 的 WebMCP 能力可为 GenUI 工具调用提供浏览器端通道
TinyVue	GenUI 组件物料可以包含 TinyVue 组件------AI 生成 TinyVue 标准组件
TinyEngine	Schema 渲染理念与低代码渲染有相似性

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

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

🌟 核心创新

Generative UI 范式 ------ 从"AI 说"到"AI 画"，文本对话进化为可交互 UI
前后端一体化 ------ Server + Vue/Angular 渲染器完整覆盖，不是只做前端壳
Schema 驱动 ------ 描述式 Schema 连接 AI 输出与前端渲染，框架中立
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。虽然项目尚处早期，但架构设计展现了清晰的愿景和扎实的工程基础。

📚 项目资源

资源	地址
🏠 GitHub 源码	github.com/opentiny/ge...
📖 官方文档	docs.opentiny.design/genui-sdk/g...
🎮 Playground	opentiny.github.io/genui-sdk/p...
📦 Server 文档	docs.opentiny.design/genui-sdk/g...
🔗 官网首页	opentiny.design/genui-sdk
📦 npm Vue 包	www.npmjs.com/package/@op...

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