本文由云软件体验技术团队岑灌铭原创。随着大语言模型快速迭代LLM 已具备强大的自然语言理解与结构化内容生成能力。而如何高效渲染 AI 生成内容、快速打造美观交互的动态界面已然成为 AI 应用规模化落地的核心痛点。生成式 UIGenerative UI顺势成为破解该难题的核心技术方向。OpenTiny GenUI SDK是 OpenTiny 团队基于生成式 UI 理念倾力打造的开源开发方案以下简称GenUI SDK)具备完备的前后端一体化集成能力。无论是从零快速搭建 AI 对话类应用还是为现有业务系统无缝嵌入动态生成式界面能力GenUI SDK 均可实现开箱即用、轻量化接入与高灵活扩展大幅降低 AI 可视化应用的开发门槛。了解更多GenUI SDK详情官网https://www.opentiny.design/genui-sdk源码https://github.com/opentiny/genui-sdk本文将深度拆解 GenUI SDK 六大核心开发特性帮助你全面了解这一革命式的 AI 应用开发工具。一、现有 AI 生态兼容支持对接主流 LLM 与工具生态遵循 OpenAI 格式GenUI SDK 遵循OpenAI Chat Completions API接口规范可无缝对接 OpenAI、DeepSeek等主流大模型服务。若你的项目已具备成熟的 Agent 架构与工程业务逻辑且原有体系兼容 OpenAI 协议接入 GenUI SDK 时可保留现有逻辑无需重构改造。服务端包opentiny/genui-sdk-server提供开箱即用的 Chat Completions 能力支持流式返回、结构化 JSON Schema 输出让模型生成的内容能够实时、流式地渲染 UI界面。支持 MCP 服务接入MCPModel Context Protocol是连接 AI 与外部工具、数据源的重要协议。GenUI SDK 支持 MCP 服务接入可轻松连接丰富的工具生态。你可以将业务系统中已有的 MCPServer 接入到生成式 UI 中 接入 MCP 后当模型在调用工具时缺少必要参数GenUI SDK 能够自动生成交互式 UI来收集所需信息实现工具调用 参数收集的一体化体验。企业内部系统工具、第三方 API自定义工具甚至是前端页面都可以通过简单改造成为 MCPServer 与 GenUI 深度集成。以下是12306mcp服务中查票工具的要求参数在没有接入生成式UI能力之前当查询车票缺少参数大模型会返回文本要求补充参数。以下是集成了 MCP Server 的 运行效果(视频经加速处理)同样是查票场景接入了生成式UI后大模型直接生成了表单继续信息收集。填写完成后点击查询按钮即可触发查询。二、定制主题适配不同产品的视觉风格内置主题切换GenUI SDK 内置多种主题模式满足不同场景的视觉需求light浅色主题适合日间使用dark深色主题护眼且适合夜间场景lite清新主题提供更柔和的视觉体验auto跟随系统偏好自动切换light和dark模式通过GenuiConfigProvider的theme属性即可一键切换无需额外配置。演练场中可以体验及时切换效果完全自定义主题样式除了内置主题GenUI SDK 支持基于CSS 变量的深度定制。你可以通过覆盖 TinyRobot 及物料组件库提供的 Token 变量实现品牌级主题定制自定义主色、圆角、间距等设计 Token调整按钮、输入框等组件的视觉风格通过id属性创建作用域实现多主题并存无论是企业级产品的品牌规范还是面向特定用户群体的视觉偏好GenUI SDK 都能灵活适配。以下是自定义的一个紫色主题三、自定义组件扩展生成式 UI 的组件库扩展业务组件使用GenuiChat组件通过customComponents配置你可以将自有业务组件纳入生成式 UI 体系传入组件的Schema 定义属性、类型、描述让模型理解如何正确使用传入组件的引用ref实现实际组件渲染例如在特性一中生成的商品卡片大模型每次输出难免存在细微差异视觉风格也可能与业务系统不完全统一。为实现更一致的体验你可以预先注册自定义商品卡片组件结合 MCP 工具让 AI 在响应用户商品查询时自动生成包含价格、商品图、购买按钮等完整信息的规范卡片界面。通过自定义组件可让生成的 UI 高度贴合业务设计规范与品牌风格。以下是电商系统中接入了自定义组件前后的效果对比。接入前接入后同理对于 User 这类结构复杂、内部逻辑繁重但外部参数较少的特殊 UI 组件也可将其封装为自定义组件提供给 AI 使用进一步提升系统整体体验与专业性。四、自定义交互满足业务侧的个性化需求灵活配置交互行为GenUI SDK 支持通过customActions配置自定义交互行为。每个 Action 包含name动作名称供 AI 在 Schema 中通过this.callAction(name, params)调用description动作描述帮助模型理解何时使用parameters参数定义JSON Schemaexecute前端执行函数典型应用场景跳转新页面用户点击「查看详情」时打开新窗口下载附件生成导出按钮触发文件下载拉取数据根据用户选择调用后端接口刷新内容提交表单将表单数据提交至指定 API多轮对话内置continueChatAction支持用户与生成 UI 的持续交互通过自定义交互能力AI 生成的界面不再是单纯的 “只读展示”而是可以直接执行真实业务操作完美满足复杂场景下的人机协同需求。例如在电商系统中可配置加入购物车等自定义交互行为结合 MCP 联动能力让 AI 界面与业务系统深度打通实现真正智能化的业务交互。五、多技术栈支持融入现有项目的技术栈内置 Vue 与 Angular 渲染器GenUI SDK 内置Vue与Angular双框架渲染器opentiny/genui-sdk-vue基于 Vue 3 的前端组件与渲染器集成GenuiChat、GenuiRenderer、GenuiConfigProvider等组件开箱即用opentiny/genui-sdk-angular基于 Angular 的渲染器支持在 Angular 应用中集成生成式 UI 能力两个渲染器使用相同的 Schema 协议确保跨框架的兼容性。同一份 Schema 可在不同技术栈间无缝迁移后续我们将会计划支持更多的技术栈敬请期待~以下分别是使用 TinyUI (angular组件库)和TinyVue生成的登录表单:TinyUI:TinyVue:六、示例与片段提升生成界面的质量自定义片段customSnippetscustomSnippets提供常用的组件组合模式如标准表单结构、列表卡片布局等。这些片段作为模板注入到模型的上下文中帮助模型快速复用成熟的 UI 模式减少低质量输出。示例与片段的结合能够助力构建更加优秀的 UI 界面满足多样化的视觉偏好与业务需求。自定义示例customExamples通过customExamples配置你可以向模型提供业务最佳实践示例。每个示例包含name示例名称description示例说明schema完整的组件使用 Schema模型会参考这些示例生成更符合业务规范的界面。例如为数据可视化场景配置示例可显著提升生成质量。你可以自定义数据看板的风格为看板搭配好布局与配色那么大模型在按需生成看板时会参考你的布局与配色为你生成个性化的数据看板组件包一览包名描述opentiny/genui-sdk-server集成生成式 UI 能力的后台服务配置简单启动快速。支持自定义组件、自定义操作等能力opentiny/genui-sdk-vue基于 Vue 的前端组件与渲染器可用于快速构建生成式 UI Web 应用同时拥有强大的定制能力opentiny/genui-sdk-angular基于 Angular 的渲染器支持在 Angular 应用中集成生成式 UI 能力立即体验演练场安全整改中可访问备用连接https://playground.opentiny.design/genui-sdk演练场备用链接https://opentiny.github.io/genui-sdk/playground/快速开始https://docs.opentiny.design/genui-sdk/guide/quick-start.html服务端使用https://docs.opentiny.design/genui-sdk/guide/server-usage.html结语GenUI SDK 在设计上兼顾了开箱即用与深度定制既能让开发者快速搭建可落地的 AI 应用又能在组件、交互、主题、技术栈等维度灵活扩展。欢迎对生成式 UI 感兴趣的技术爱好者体验使用 GenUI SDK。GenUI SDK 现已开源采用 MIT 协议。欢迎 Star、Fork参与贡献与 OpenTiny 一起推动生成式 UI 技术的发展。关于 OpenTiny NEXTOpenTiny NEXT 是一套企业智能前端开发解决方案以生成式 UI 和 WebMCP 两大核心技术为基础对现有传统的 TinyVue 组件库、TinyEngine 低代码引擎等产品进行智能化升级构建出面向 Agent 应用的前端 NEXT-SDKs、AI Extension、TinyRobot智能助手、GenUI等新产品实现AI理解用户意图自主完成任务加速企业应用的智能化改造。欢迎加入 OpenTiny 开源社区。添加微信小助手opentiny-official 一起参与交流前端技术OpenTiny 官网https://opentiny.designGenUI SDK 代码仓库https://github.com/opentiny/genui-sdk 欢迎star ⭐如果你也想要共建可以进入代码仓库找到 good first issue标签一起参与开源贡献~如果你有任何问题欢迎在评论区留言交流