以界面重构文字，GenUI 正式发布！

背景：传统 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演练场（https://playground.opentiny.design/genui-sdk?input-message=%E6%9F%A5%E8%AF%A2%E8%BD%A6%E7%A5%A8）

注意： 在体验前需先配置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('');

结合配置和主题的完整示例如下：

                                                           

 
        
        欢迎使用生成式UI 
 div>
      
 template>
    
 GenuiChat>
  
 GenuiConfigProvider>
 
 template>