GenUI 正式发布：界面重构文字新标杆

2026-06-11阅读 0热度 0

前端

大语言模型在过去两年迅速演进，模型种类激增，能力也在显著提升。然而，传统对话模式仍高度依赖纯文本输入输出，一旦涉及复杂交互、结构化展示或多轮协作，体验短板便暴露无遗。以下三个层面的问题尤为突出：

可读性差、表达形式单一：纯文本呈现大幅提高了信息获取成本。复杂的业务逻辑、多步骤流程、图表及可视化数据，若仅靠文字描述，不仅冗余，还极易失真。例如，一张折线图即可直观展示的趋势，转化为文字描述往往费力且难以清晰传达。
交互闭环断裂：传统对话中，用户必须读完回复、理解内容，再手动输入下一步指令并发送才能推进对话。这一过程割裂感明显，打断了自然交互的连贯性。
工具调用体验脱节：当大模型调用工具时若缺少必要参数，通常仅弹出文字提示要求用户补充。用户需自行解析每个参数的含义、类型及格式，再手动组织输入——这种交互生硬且极易出错。

这些问题的根源在于：纯文本形式难以满足用户“高效完成复杂任务”的核心诉求。而生成式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>

完成以上3步后，打开浏览器即可立即体验。若需进一步了解GenUI SDK的用法，可查阅GenUI SDK开发文档。