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

OpenTiny社区
0 阅读6分钟

本文由体验技术团队岑灌铭原创。

背景：传统 AI 对话的局限

随着大语言模型(LLM)的不断发展，模型选择越来越多，能力也越来越强。但传统大模型对话，主要依赖纯文本输入和输出，一旦涉及复杂交互、结构化展示或多轮协作，就会暴露出明显的体验瓶颈：

  • 可读性差、表达形式局限：纯文本呈现方式带来了较高的阅读成本，复杂的业务逻辑、多步骤流程、图表和可视化信息，用纯文字难以准确、高效地表达。例如：一张折线图能直观展示趋势，用文字描述则冗长且不直观。
  • 交互闭环断裂：传统对话模式下，用户往往需要经历「先阅读回复 → 理解内容 → 再手动输入下一步指令 → 发送内容继续对话」的流程。
  • 工具调用的体验断层：当LLM需要调用工具但缺少参数时，需要文字提示用户补充。用户需要理解每个参数的含义、类型和格式，自行组织输入，这种体验生硬且容易出错。

这些问题的症结在于纯文本形式难以跟上用户对 “高效完成复杂任务” 的核心诉求，而生成式UI正是解决这一痛点的解决方案。

1.png

生成式 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 :

2.gif

演练场体验

您还通过演练场亲自体验车票查询场景：GenUI SDK演练场

注意： 在体验前需先配置12306 MCP工具，此处可以使用 WebAgent 中 MCP 市场提供的12306工具：chat.opentiny.design/api/v1/mcp-…

3.png

快速上手：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 官网：opentiny.design/genui-sdk
OpenTiny 代码仓库：github.com/opentiny

欢迎进入代码仓库 Star🌟TinyVue、TinyEngine、TinyPro、TinyNG、TinyCLI、TinyEditor 如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~

如果你有任何问题，欢迎在评论区留言交流！

avatar
文章
阅读
粉丝