本文由体验技术团队岑灌铭原创。
背景：传统 AI 对话的局限
随着大语言模型(LLM)的不断发展，模型选择越来越多，能力也越来越强。但传统大模型对话，主要依赖纯文本输入和输出，一旦涉及复杂交互、结构化展示或多轮协作，就会暴露出明显的体验瓶颈：
- 可读性差、表达形式局限：纯文本呈现方式带来了较高的阅读成本，复杂的业务逻辑、多步骤流程、图表和可视化信息，用纯文字难以准确、高效地表达。例如：一张折线图能直观展示趋势，用文字描述则冗长且不直观。
- 交互闭环断裂：传统对话模式下，用户往往需要经历「先阅读回复 → 理解内容 → 再手动输入下一步指令 → 发送内容继续对话」的流程。
- 工具调用的体验断层：当LLM需要调用工具但缺少参数时，需要文字提示用户补充。用户需要理解每个参数的含义、类型和格式，自行组织输入，这种体验生硬且容易出错。
这些问题的症结在于纯文本形式难以跟上用户对 “高效完成复杂任务” 的核心诉求，而生成式UI正是解决这一痛点的解决方案。
![]()
生成式 UI 简介
生成式 UI（Generative 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演练场
注意： 在体验前需先配置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 开发文档查看。
关于OpenTiny
欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
GenUI 官网：https://opentiny.design/genui-sdk
OpenTiny 代码仓库：https://github.com/opentiny
欢迎进入代码仓库 Star🌟TinyVue、TinyEngine、TinyPro、TinyNG、TinyCLI、TinyEditor 如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~
如果你有任何问题，欢迎在评论区留言交流！
