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

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

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

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

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

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

生成式 UI 簡(jiǎn)介

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

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

核心亮點(diǎn) 交互范式的三大突破:

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

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

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

SDK 工程能力:

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

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

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

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

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

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

GenUI SDK效果展示

以下是車票查詢場(chǎng)景的錄屏，能夠讓您更加深刻地了解 GenUI SDK :

演練場(chǎng)體驗(yàn)

您還通過演練場(chǎng)親自體驗(yàn)車票查詢場(chǎng)景：GenUI SDK演練場(chǎng)（https://playground.opentiny.design/genui-sdk?input-message=%E6%9F%A5%E8%AF%A2%E8%BD%A6%E7%A5%A8）

注意： 在體驗(yàn)前需先配置12306 MCP工具，此處可以使用 WebAgent 中 MCP 市場(chǎng)提供的12306工具：https://chat.opentiny.design/api/v1/mcp-server/12306/mcp

快速上手：3 步集成 GenUI SDK 1. 后臺(tái)服務(wù)準(zhǔn)備 下載server包

                                                           pnpm add @opentiny/genui-sdk-server
# 或 npm install @opentiny/genui-sdk-server
# 或 yarn add @opentiny/genui-sdk-server

使用 OpenAI 兼容的 LLM 服務(wù)，將下面的API_KEY和BASE_URL替換為您的 LLM 服務(wù)配置

                                                           export API_KEY=********* BASE_URL=https://your-llm-server.com/api && npx genui-sdk-server

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

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

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

                                                           npm create vue@latest genui-chat

進(jìn)入項(xiàng)目目錄并安裝 GenUI SDK：

                                                           cd genui-chat
npm install @opentiny/genui-sdk-vue

初始化引入的樣式會(huì)污染組件樣式，因此需要?jiǎng)h除

修改 src/main.js 或 src/main.ts

                                                           // import './assets/main.css'; 刪除 Vue 初始化工程引入的樣式

 import { createApp } from 'vue';
import App from './App.vue';

 createApp(App).mount('');

結(jié)合配置和主題的完整示例如下：

                                                           

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