前言¶
在 DeepSeek Harness(DSH)里做智能体对话时,模型往往用长段落给出行程、对比、表单或数据结论。用户需要自己扫读、复制选项、在脑子里拼成结构。社区插件生态按「一切皆插件」拆分能力;目录站 SkillHub 插件页 与 GitHub 仓库独立维护,与 DeepSeek / 幻方无官方从属关系。
下面介绍维护者 simmon-clap 的客户端插件 dsh-intelligent-ui(界面中显示为「生成式界面」):模型通过 render_ui 把回复画成对话内的卡片,可点、可填、可折叠,并留在当前回合尾部。
这是什么¶
DSH Intelligent UI 是 DeepSeek Harness 插件,定位是 Answers as interfaces——把聊天回答变成可读的 Paper Glass 界面,而不是「一段文字 + 附件链接」。
- 仓库:simmon-clap/dsh-intelligent-ui
- 分类:客户端(Host 注册工具 + Client 渲染)
- 许可证:MIT
- 当前包版本:0.2.1;要求 DSH ≥ 0.2.1-rc.2 的
0.2.x,Node.js 20+ - 组件:24 个白名单组件;支持流式三阶段(
preparing / start / result)与turnTail持久回合卡片
视觉采用工作区自有的 Paper Glass v1.0(非 OpenUI 复刻):结构色跟随宿主 --dsw-alias-* 主题,玻璃用于控制层,渐变用于材质与强调。
核心功能¶
模型侧:render_ui¶
Host 半注册 render_ui 工具与系统提示。模型每次回答最多调用 1 次 render_ui,默认约束为 200 个组件 / 32,000 字符。模型输出的是声明式界面源码(一行一条),入口必须叫 root,不写 HTML / JS / JSON / Markdown。
交互动作仅两类:
send:把文本作为用户消息发回会话open:新窗口打开http(s)链接
用户侧:在对话里操作界面¶
| 能力 | 说明 |
|---|---|
| 看得见的结构 | 表格、图表、时间线、步骤条、进度条、地图、画廊、统计卡等 |
| 点得动的下一步 | 按钮、快捷建议、页签、折叠面板、表单提交;无下一步时不造假按钮 |
| 活在对话里 | turnTail:回合结束后卡片仍留在对话尾部,不折叠进「工具过程组」 |
| 边生成边出现 | 工具流式三阶段,结构先出、数据后填 |
| 可复现 | Session 日志中的 ui 参数为唯一事实源,重放 / fork 用同一份源码重建 |
安全与边界¶
插件只解析、不执行代码;白名单组件;URL 仅允许 http(s)。不写业务数据、不调模型、不读本机文件。无 eval、远程脚本或 iframe。界面动作不能改业务对象、不能调用其他工具、不能主动发网络请求(除用户点击外链)。PC 桌面 Web GUI 为当前验收目标。
安装与启用¶
环境与 DSH profile 使用同一套 pnpm。下面命令来自仓库 README。
git clone https://github.com/simmon-clap/dsh-intelligent-ui.git
cd dsh-intelligent-ui
# 可选:先跑一遍构建与测试
npm test
# 安装到 desktop profile(不执行安装脚本)
pnpm --dir ~/.dsh/profiles/desktop add --ignore-scripts "file:$PWD"
若不想直接引用工作目录,可先打包再安装:
npm pack
pnpm --dir ~/.dsh/profiles/desktop add --ignore-scripts "file:$PWD/dsh-intelligent-ui-0.2.0.tgz"
经过上面的步骤后,在 DSH 打开 插件 → 已安装插件,找到「生成式界面」并打开开关,新开会话即可。
插件以当前 DSH 进程权限运行;安装前请自行查看仓库源码与 MIT 许可证,确认符合你的环境策略。
典型用法¶
30 秒体验¶
安装并启用后,新开对话可直接输入:
帮我规划旧金山一日游:上午渔人码头,中午金门大桥,下午艺术宫。
不必额外要求 Markdown;模型会优先用 render_ui 出卡片。也可明确说「用界面给我看」「做成可点的卡片」「用表单收集」。
声明式 UI 示例(节选)¶
README 中的写法示意模型如何组织一张行程卡:
root = Stack([标题, 关键数字, 时间线, 建议])
标题 = Heading({text: '旧金山一日游', level: 1})
关键数字 = Row([
景点数量,
在途时间
])
景点数量 = Stat({label: '主要景点', value: '3 处', hint: '都在北岸'})
在途时间 = Stat({label: '在途', value: '约 30 分钟', hint: '打车为主'})
时间线 = Timeline({title: '怎么走', items: [
{time: '09:00', title: '渔人码头', detail: 'Pier 39 看海狮'},
{time: '12:45', title: '金门大桥', detail: '桥面走一小段'}
]})
建议 = Chips({title: '要不要调整?', items: [
{label: '更轻松', prompt: '把行程改轻松一点'},
{label: '换公共交通', prompt: '改成公共交通版本'}
]})
引用可前向引用;完整组件签名见仓库 docs/COMPONENTS.md。
组件一览¶
当前 24 个白名单组件,未知组件会显示「未渲染:未知组件」。
| 组 | 组件 |
|---|---|
| 布局 | Stack Row Card Divider |
| 文本 | Heading Text Callout Badge Code |
| 数据 | Stat Table Chart Timeline List Steps Progress |
| 媒体 | Image Gallery Map |
| 交互 | Tabs Accordion Form Buttons Chips |
Chart 支持 bar / line / area / pie;Form 支持 text / textarea / number / date / select / radio / checkbox / switch / slider。
架构简述¶
Agent → render_ui(ui) → Host 工具 → Session log + Client toolview
↓
turnTail 持久卡片 + DSL 解析(白名单)→ Paper Glass 渲染器 → 聊天界面
Host 负责解析、白名单与规模限制;Client 把 tool.call.toolview 的 render_ui 流式渲染,并通过 conversation.chat.turnTail 固定在回合尾部。更完整的契约见 docs/ARCHITECTURE.md。
仓库验收包括 48 / 48 项 Node 测试、10 个真实对话场景,以及 Paper Glass 视觉门禁;本地可执行 npm test 或 node build.mjs 后 node --test test/*.test.mjs。
适用场景与注意¶
适合希望在 DSH 桌面对话里直接呈现行程、方案对比、表单收集、指标与趋势、清单与多步计划等结构化内容的开发者与用户。不适合需要执行任意前端代码、全量 OpenUI 组件对齐,或依赖手机端完整体验的场景(README 标明手机端暂不纳入本轮验收)。
DeepSeek Harness 仍为 developer preview;升级宿主前建议先跑本插件测试与真实实例验收。
结尾¶
DSH Intelligent UI 用 render_ui 和 Paper Glass 把「读长文」换成「看卡片、点下一步」,并把界面留在回合里便于回看。目录与源码: