前言¶
DeepSeek Harness (DSH) 的智能體通常通過文本與用戶交互。當需要處理複雜數據、表單或可視化圖表時，純文本描述難以滿足需求。a2ui-render-in-dsh 插件爲 DSH Web UI 提供了在對話流中渲染交互式 UI 卡片的能力，使智能體能夠根據上下文動態生成 quizzes、forms、charts 和 diagrams，並將用戶的操作以自然語言反饋回模型。
插件簡介¶
這是一個由 baihui-ai 維護的 DSH 插件。它基於 A2UI v0.9 協議（由 Ant Design X 的 @ant-design/x-card 實現），將智能體的輸出能力擴展到 UI 層面。核心價值在於讓用戶通過交互式卡片完成任務，而非僅閱讀文本。
核心功能¶
插件提供以下核心能力：
-
交互式卡片渲染
支持多種組件類型，包括測驗、表單、多步驟嚮導、下拉菜單、日期選擇器、產品卡片、可排序/可篩選表格、ECharts 圖表、中國地圖熱力圖、數學函數繪圖、Mermaid 流程圖/思維導圖、KaTeX 公式以及算法分步動畫。 -
流式漸進渲染
卡片會在模型生成輸出時逐步顯示，而非等待全部生成完畢。這通過截斷 JSON 修復機制實現，讓用戶能即時看到內容呈現。 -
原地更新
支持通過a2ui_update工具針對已渲染的卡片進行局部更新。這對於進度條、長任務狀態或實時儀表盤至關重要。 -
組件目錄服務
插件提供a2ui_catalog工具，返回完整的組件目錄和創作規則。模型在首次渲染卡片前會調用此工具，後續對話複用該目錄，避免在提示詞中硬編碼大量規則。 -
零外部依賴與離線能力
所有依賴（ECharts、Mermaid、KaTeX 字體、中國 GeoJSON 數據）均打包在本地。插件運行時不發送任何外部請求，斷網環境下也能正常工作。 -
自然語言提交
用戶通過點擊卡片按鈕或填寫表單提交時，系統將操作轉化爲自然語言消息（如 “Submit signup”），而非原始 JSON。這便於模型理解用戶意圖。 -
狀態持久化與會話導航
草稿自動保存至localStorage，頁面刷新後可恢復。提交後的表單會鎖定並記錄狀態。即使清除緩存，提交狀態也可從會話記錄中重建。插件右側提供會話導航器，用於定位草稿和歷史消息。
安裝與啓用¶
該插件以 npm 包形式發佈。安裝後，需將包中的文件集成到 DSH 的構建流程中。
- 安裝 npm 包：
npm install a2ui-render-in-dsh
- 集成到 DSH Bundle：
根據package.json中的配置，插件包含lib/index.js（宿主端，提供工具）和lib/client.js（客戶端，提供工具視圖）。在 DSH 的構建配置中引入這些文件，並應用cordis.patch.yml補丁以註冊插件。
典型用法¶
智能體在與用戶交互時，按照以下流程使用工具：
- 獲取組件定義：首次渲染卡片前，調用
a2ui_catalog獲取規則。 - 渲染卡片：調用
a2ui_render生成卡片（如表單或圖表）。 - 用戶交互：用戶填寫表單或點擊按鈕。
- 提交反饋：用戶操作通過
session.prompt以自然語言形式反饋給模型。 - 實時更新：在生成過程中，通過
a2ui_update對卡片進行實時更新（如進度條）。
適用場景與注意事項¶
- 適用場景：需要數據可視化、複雜表單交互、數學公式展示或算法分步演示的場景。
- React 依賴：
@ant-design/x-card需要 React 作爲可選的 peer dependency。 - 語音限制：受限於 dsh prompt channel 的限制，當前版本不支持語音錄製功能。
- 離線環境：由於所有資源已打包，插件完全支持離線使用。
- 許可證：遵循 MIT 協議。
總結¶
a2ui-render-in-dsh 通過引入 A2UI 協議，在 DSH Web UI 中構建了完整的交互閉環。它解決了純文本對話在處理結構化數據和複雜交互時的不足，同時通過流式渲染和狀態管理保持了良好的用戶體驗。
- GitHub: https://github.com/baihui-ai/a2ui-render-in-dsh
- Catalog: https://www.skillhub.cn/plugins/baihui-ai/a2ui-render-in-dsh
