背景：傳統(tǒng) AI 對話的局限

隨著大語言模型(LLM)的不斷發(fā)展，模型選擇越來越多，能力也越來越強。但傳統(tǒng)大模型對話，主要依賴純文本輸入和輸出，一旦涉及復雜交互、結構化展示或多輪協(xié)作，就會暴露出明顯的體驗瓶頸：

• ? 可讀性差、表達形式局限 ：純文本呈現(xiàn)方式帶來了較高的閱讀成本，復雜的業(yè)務邏輯、多步驟流程、圖表和可視化信息，用純文字難以準確、高效地表達。例如：一張折線圖能直觀展示趨勢，用文字描述則冗長且不直觀。

• ? 交互閉環(huán)斷裂 ：傳統(tǒng)對話模式下，用戶往往需要經(jīng)歷「先閱讀回復 → 理解內(nèi)容 → 再手動輸入下一步指令 → 發(fā)送內(nèi)容繼續(xù)對話」的流程。

• ? 工具調(diào)用的體驗斷層 ：當LLM需要調(diào)用工具但缺少參數(shù)時，需要文字提示用戶補充。用戶需要理解每個參數(shù)的含義、類型和格式，自行組織輸入，這種體驗生硬且容易出錯。

這些問題的癥結在于純文本形式難以跟上用戶對 “高效完成復雜任務” 的核心訴求，而生成式UI正是解決這一痛點的解決方案。

生成式 UI 簡介

生成式 UI（Generative UI） 是一種創(chuàng)新的人機交互范式：在對話過程中，能夠動態(tài)生成并實時渲染 UI 界面，讓 AI 不再局限于純文字輸出，而是能夠"畫"出表單、按鈕、圖表、卡片等豐富的交互組件。用戶可以直接在生成的界面中操作，操作行為即時反饋回對話上下文，驅動模型進行下一輪響應，使交互與對話融為一體。

GenUI SDK 是 OpenTiny 團隊基于生成式 UI 理念打造的解決方案，提供完整的前后端一體化集成能力。它遵循 OpenAI 接口規(guī)范，可無縫對接主流大模型服務；內(nèi)置 Vue 與 Angular 雙框架渲染器，支持自定義的組件庫、交互行為與主題樣式。無論是從零搭建一個 AI 對話應用，還是在現(xiàn)有業(yè)務系統(tǒng)中嵌入生成式界面能力，GenUI SDK 都能讓開發(fā)者開箱即用、靈活擴展。

核心亮點 交互范式的三大突破:

1、以界面重構文字：打破文字表達壁壘，用可視化界面釋放信息價值。表格、卡片、列表、圖表等組件讓數(shù)據(jù)與流程一目了然，用戶無需再在文字中"挖礦"。

2、打破兩步交互：實現(xiàn)從界面到對話的一站式流轉。用戶在生成的表單中填寫、在按鈕上點擊，這些操作會即時反饋到對話上下文中，驅動模型的下一輪回復。無需看完再手動輸入然后發(fā)送，交互與對話融為一體。

3、讓 AI 更懂業(yè)務：在工具調(diào)用缺少參數(shù)時，模型可以自動生成交互式 UI 收集所需信息。用戶只需在生成好的表單中填寫并提交，參數(shù)即被正確傳遞給工具，無需理解參數(shù)格式、無需自行翻譯需求。結合 MCP 等生態(tài)，GenUI 讓 AI 真正具備了落地業(yè)務場景的交互能力。

SDK 工程能力:

1、現(xiàn)有 AI 生態(tài)兼容：遵循 OpenAI 格式，可無縫對接主流 LLM 服務；原生支持 MCP 服務接入，輕松連接豐富的工具生態(tài)。

2、定制主題：支持亮色、暗黑等主題切換，也可以完全自定義主題樣式，適配不同產(chǎn)品的視覺風格與使用場景。

3、自定義組件：支持傳入自定義組件與描述，擴展生成式 UI 的組件庫，讓生成的界面更貼合自身業(yè)務需求。

4、自定義交互：支持配置自定義交互行為，如跳轉新頁面、下載附件等，滿足業(yè)務側的各類個性化需求。

5、多技術棧支持：內(nèi)置 Vue 與 Angular 渲染器，同時開放自定義渲染擴展接口，便于融入現(xiàn)有項目的技術棧。

6、示例與片段：支持配置自定義示例與片段，幫助模型理解業(yè)務最佳實踐，進一步提升生成界面的質(zhì)量。

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

若控制臺出現(xiàn) genui-sdk-server is running on http://localhost:3100 則說明啟動成功

2.創(chuàng)建工程 初始化

首先，創(chuàng)建一個新的 Vue 項目，執(zhí)行以下命令，按默認配置初始化工程：

                                                           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>