前言
介绍了 OpenTiny 团队发布的 GenUI SDK，一个基于生成式 UI（Generative UI）理念的人机交互解决方案。今日前端早读课文章由 @岑灌铭分享，@✘✘✘投稿，公号：OpenTiny 授权。
正文从这开始～～
#### 背景：传统 AI 对话的局限
随着大语言模型 (LLM) 的不断发展，模型选择越来越多，能力也越来越强。但传统大模型对话，主要依赖纯文本输入和输出，一旦涉及复杂交互、结构化展示或多轮协作，就会暴露出明显的体验瓶颈：
* 可读性差、表达形式局限：纯文本呈现方式带来了较高的阅读成本，复杂的业务逻辑、多步骤流程、图表和可视化信息，用纯文字难以准确、高效地表达。例如：一张折线图能直观展示趋势，用文字描述则冗长且不直观。
* 交互闭环断裂：传统对话模式下，用户往往需要经历「先阅读回复 → 理解内容 → 再手动输入下一步指令 → 发送内容继续对话」的流程。
* 工具调用的体验断层：当 LLM 需要调用工具但缺少参数时，需要文字提示用户补充。用户需要理解每个参数的含义、类型和格式，自行组织输入，这种体验生硬且容易出错。
这些问题的症结在于纯文本形式难以跟上用户对 “高效完成复杂任务” 的核心诉求，而生成式 UI 正是解决这一痛点的解决方案。 【第3658期】从终端到工作空间：MCP Apps 如何把 UI 带回 Agent 中心
#### 生成式 UI 简介
生成式 UI（Generative UI） 是一种创新的人机交互范式：在对话过程中，能够动态生成并实时渲染 UI 界面，让 AI 不再局限于纯文字输出，而是能够 "画" 出表单、按钮、图表、卡片等丰富的交互组件。用户可以直接在生成的界面中操作，操作行为即时反馈回对话上下文，驱动模型进行下一轮响应，使交互与对话融为一体。 【第3593期】OpenTiny NEXT 内核新生：生成式UI × MCP，重塑前端交互新范式！
GenUI SDK 是 OpenTiny 团队基于生成式 UI 理念打造的解决方案，提供完整的前后端一体化集成能力。它遵循 OpenAI 接口规范，可无缝对接主流大模型服务；内置 Vue 与 Angular 双框架渲染器，支持自定义的组件库、交互行为与主题样式。无论是从零搭建一个 AI 对话应用，还是在现有业务系统中嵌入生成式界面能力，GenUI SDK 都能让开发者开箱即用、灵活扩展。
#### 核心亮点
##### 交互范式的三大突破:
1、以界面重构文字：打破文字表达壁垒，用可视化界面释放信息价值。表格、卡片、列表、图表等组件让数据与流程一目了然，用户无需再在文字中 "挖矿"。
2、打破两步交互：实现从界面到对话的一站式流转。用户在生成的表单中填写、在按钮上点击，这些操作会即时反馈到对话上下文中，驱动模型的下一轮回复。无需看完再手动输入然后发送，交互与对话融为一体。
3、让 AI 更懂业务：在工具调用缺少参数时，模型可以自动生成交互式 UI 收集所需信息。用户只需在生成好的表单中填写并提交，参数即被正确传递给工具，无需理解参数格式、无需自行翻译需求。结合 MCP 等生态，GenUI 让 AI 真正具备了落地业务场景的交互能力。
##### SDK 工程能力:
1、现有 AI 生态兼容：遵循 OpenAI 格式，可无缝对接主流 LLM 服务；原生支持 MCP 服务接入，轻松连接丰富的工具生态。 【早阅】OpenAI工程师：沟通是编程的核心价值
2、定制主题：支持亮色、暗黑等主题切换，也可以完全自定义主题样式，适配不同产品的视觉风格与使用场景。
3、自定义组件：支持传入自定义组件与描述，扩展生成式 UI 的组件库，让生成的界面更贴合自身业务需求。
4、自定义交互：支持配置自定义交互行为，如跳转新页面、下载附件等，满足业务侧的各类个性化需求。
5、多技术栈支持：内置 Vue 与 Angular 渲染器，同时开放自定义渲染扩展接口，便于融入现有项目的技术栈。
6、示例与片段：支持配置自定义示例与片段，帮助模型理解业务最佳实践，进一步提升生成界面的质量。 【早阅】一周重写 Next.js：AI 如何造出更快更小的 vinext？
#### GenUI SDK 效果展示
以下是车票查询场景的录屏，能够让您更加深刻地了解 GenUI SDK :
##### 演练场体验
您还通过演练场亲自体验车票查询场景：GenUI SDK 演练场（https://playground.opentiny.design/genui-sdk?input-message = 查询车票）
注意： 在体验前需先配置 12306 MCP 工具，此处可以使用 WebAgent 中 MCP 市场提供的 12306 工具：https://chat.opentiny.design/api/v1/mcp-server/12306/mcp
#### 快速上手：3 步集成 GenUI SDK
##### 1. 后台服务准备
下载 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_URL=https://your-llm-server.com/api && npx genui-sdk-server
若控制台出现 genui-sdk-server is running on http://localhost:3100 则说明启动成功
##### 2. 创建工程 初始化
首先，创建一个新的 Vue 项目，执行以下命令，按默认配置初始化工程：
npm create vue@latest genui-chat
安装依赖
进入项目目录并安装 GenUI SDK：
cd genui-chat npm install @opentiny/genui-sdk-vue
删除样式
初始化引入的样式会污染组件样式，因此需要删除
修改 src/main.js 或 src/main.ts
// import './assets/main.css'; 删除 Vue 初始化工程引入的样式 import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
##### 3. 使用并配置 GenuiChat
结合配置和主题的完整示例如下：
<script setup lang="ts"> import { ref } from 'vue'; import { GenuiChat, GenuiConfigProvider } from '@opentiny/genui-sdk-vue'; const url = 'http://localhost:3100/chat/completions'; // 步骤1启动的服务 const model = ref('deepseek-v3.2'); // 对应模型服务提供商的模型ID const temperature = ref(0.5); const theme = ref<'dark' | 'lite' | 'light' | 'auto'>('dark'); </script> <template> <GenuiConfigProvider :theme="theme"> <GenuiChat :url="url" :model="model" :temperature="temperature"> <template #empty> <div class="empty-text">欢迎使用生成式UI</div> </template> </GenuiChat> </GenuiConfigProvider> </template> <style> body, 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 开发文档查看。
* GenUI SDK 官网：https://opentiny.design/genui-sdk
* OpenTiny 代码仓库：https://github.com/opentiny
关于本文
作者：@岑灌铭