本文由体验技术团队岑灌铭原创。背景传统 AI 对话的局限随着大语言模型(LLM)的不断发展模型选择越来越多能力也越来越强。但传统大模型对话主要依赖纯文本输入和输出一旦涉及复杂交互、结构化展示或多轮协作就会暴露出明显的体验瓶颈可读性差、表达形式局限纯文本呈现方式带来了较高的阅读成本复杂的业务逻辑、多步骤流程、图表和可视化信息用纯文字难以准确、高效地表达。例如一张折线图能直观展示趋势用文字描述则冗长且不直观。交互闭环断裂传统对话模式下用户往往需要经历「先阅读回复 → 理解内容 → 再手动输入下一步指令 → 发送内容继续对话」的流程。工具调用的体验断层当LLM需要调用工具但缺少参数时需要文字提示用户补充。用户需要理解每个参数的含义、类型和格式自行组织输入这种体验生硬且容易出错。这些问题的症结在于纯文本形式难以跟上用户对 “高效完成复杂任务” 的核心诉求而生成式UI正是解决这一痛点的解决方案。生成式 UI 简介生成式 UIGenerative UI是一种创新的人机交互范式在对话过程中能够动态生成并实时渲染 UI 界面让 AI 不再局限于纯文字输出而是能够画出表单、按钮、图表、卡片等丰富的交互组件。用户可以直接在生成的界面中操作操作行为即时反馈回对话上下文驱动模型进行下一轮响应使交互与对话融为一体。GenUI SDK是 OpenTiny 团队基于生成式 UI 理念打造的解决方案提供完整的前后端一体化集成能力。它遵循 OpenAI 接口规范可无缝对接主流大模型服务内置 Vue 与 Angular 双框架渲染器支持自定义的组件库、交互行为与主题样式。无论是从零搭建一个 AI 对话应用还是在现有业务系统中嵌入生成式界面能力GenUI SDK 都能让开发者开箱即用、灵活扩展。核心亮点交互范式的三大突破:1、以界面重构文字打破文字表达壁垒用可视化界面释放信息价值。表格、卡片、列表、图表等组件让数据与流程一目了然用户无需再在文字中挖矿。2、打破两步交互实现从界面到对话的一站式流转。用户在生成的表单中填写、在按钮上点击这些操作会即时反馈到对话上下文中驱动模型的下一轮回复。无需看完再手动输入然后发送交互与对话融为一体。3、让 AI 更懂业务在工具调用缺少参数时模型可以自动生成交互式 UI 收集所需信息。用户只需在生成好的表单中填写并提交参数即被正确传递给工具无需理解参数格式、无需自行翻译需求。结合 MCP 等生态GenUI 让 AI 真正具备了落地业务场景的交互能力。SDK 工程能力:1、现有 AI 生态兼容遵循 OpenAI 格式可无缝对接主流 LLM 服务原生支持 MCP 服务接入轻松连接丰富的工具生态。2、定制主题支持亮色、暗黑等主题切换也可以完全自定义主题样式适配不同产品的视觉风格与使用场景。3、自定义组件支持传入自定义组件与描述扩展生成式 UI 的组件库让生成的界面更贴合自身业务需求。4、自定义交互支持配置自定义交互行为如跳转新页面、下载附件等满足业务侧的各类个性化需求。5、多技术栈支持内置 Vue 与 Angular 渲染器同时开放自定义渲染扩展接口便于融入现有项目的技术栈。6、示例与片段支持配置自定义示例与片段帮助模型理解业务最佳实践进一步提升生成界面的质量。GenUI SDK效果展示以下是车票查询场景的录屏能够让您更加深刻地了解GenUI SDK:GenUI SDK效果展示演练场体验您还通过演练场亲自体验车票查询场景GenUI SDK演练场注意在体验前需先配置12306 MCP工具此处可以使用 WebAgent 中 MCP 市场提供的12306工具https://chat.opentiny.design/api/v1/mcp-server/12306/mcp快速上手3 步集成 GenUI SDK1. 后台服务准备下载server包pnpm add opentiny/genui-sdk-server # 或 npm install opentiny/genui-sdk-server # 或 yarn add opentiny/genui-sdk-server启动服务使用 OpenAI 兼容的 LLM 服务将下面的API_KEY和BASE_URL替换为您的 LLM 服务配置export API_KEY********* BASE_URLhttps://your-llm-server.com/api npx genui-sdk-server若控制台出现genui-sdk-server is running on http://localhost:3100则说明启动成功2.创建工程初始化首先创建一个新的 Vue 项目执行以下命令按默认配置初始化工程npm create vuelatest genui-chat安装依赖进入项目目录并安装 GenUI SDKcd genui-chat npm install opentiny/genui-sdk-vue删除样式初始化引入的样式会污染组件样式因此需要删除修改src/main.js或src/main.ts// import ./assets/main.css; 删除 Vue 初始化工程引入的样式import{createApp}fromvue;importAppfrom./App.vue;createApp(App).mount(#app);3.使用并配置GenuiChat结合配置和主题的完整示例如下script setup langtsimport{ref}fromvue;import{GenuiChat,GenuiConfigProvider}fromopentiny/genui-sdk-vue;consturlhttp://localhost:3100/chat/completions;// 步骤1启动的服务constmodelref(deepseek-v3.2);// 对应模型服务提供商的模型IDconsttemperatureref(0.5);constthemerefdark|lite|light|auto(dark);/scripttemplateGenuiConfigProvider:themethemeGenuiChat:urlurl:modelmodel:temperaturetemperaturetemplate #emptydivclassempty-text欢迎使用生成式UI/div/template/GenuiChat/GenuiConfigProvider/templatestylebody,html{padding:0;margin:0;}#app{position:fixed;width:100vw;height:100vh;}.tiny-config-provider{height:100%;}.empty-text{height:100%;display:flex;justify-content:center;align-items:center;font-size:30px;}/style完成以上3步后即可打开浏览器立即体验了~若想进一步了解GenUI SDK的用法可以前往GenUI SDK 开发文档查看。关于OpenTiny欢迎加入 OpenTiny 开源社区。添加微信小助手opentiny-official 一起参与交流前端技术GenUI 官网https://opentiny.design/genui-sdkOpenTiny 代码仓库https://github.com/opentiny欢迎进入代码仓库 StarTinyVue、TinyEngine、TinyPro、TinyNG、TinyCLI、TinyEditor 如果你也想要共建可以进入代码仓库找到 good first issue标签一起参与开源贡献~如果你有任何问题欢迎在评论区留言交流