前言¶
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
