前言¶
在 DeepSeek Harness(DSH)里,模型常见输出是一段 Markdown 或纯文本。用户若要改参数、勾选清单、拖滑块,往往要再发一轮消息,把表单内容「说回去」。这和「回答本身就是一个能干活的工具」之间还有一步摩擦。
下面介绍的 Intelligent UI 插件(仓库 my-dsh/deepseek-intelligent-ui,维护者 my-dsh,社区分类为客户端)参考 thesysdev/open-intelligent-ui 实现:模型通过 intelligent_ui 工具写出声明式 openui-lang 程序,Harness Web GUI 在会话里把它渲染成可操作的界面——清单、滑块、下拉框、表格、图表、SVG 等。控件绑定在 $变量 上,界面改动会触发程序重算,而不是先填表再整段贴回模型。
这是什么¶
一句话定位:DSH 客户端插件,把「工具调用参数里的 openui-lang 程序」变成聊天内的实时交互 UI。
数据流可以概括为:
模型 ──tool call: intelligent_ui({ title, program })──▶ 会话日志 (tool/call)
│
客户端 tool.call.toolview[key=intelligent_ui] ◀─────────┘
读取 block.call.argsRaw → parse → evaluate → React 元素树(自带 $state)
Host 侧只做校验并把诊断返回给模型;渲染完全在浏览器完成,程序来自会话日志,因此刷新、重放、fork 之后界面仍可重建。
npm 包名为 @my-dsh/dsh-intelligent-ui(当前资料中的版本为 1.1.0,MIT 许可证),要求 Harness 引擎 dsh >= 0.2.1-alpha.4。
核心功能¶
工具与语言¶
- 注册工具
intelligent_ui,参数包含title与program(openui-lang 源码)。 - 语言一行一条语句,一条语句不能换行续写;
root为入口;组件按位置传参。 - 状态:
$name = 默认值;输入组件第一个参数绑定对应$变量。 - 动作:
@Set、@Reset、@OpenUrl、@CopyToClipboard、@ToAssistant等,可组合为Action([...])。 - 内置 60+ 个
@函数(如@Sum、@Payment、@Each等)与 48 个 UI 组件(布局、文本、输入、媒体与数据、绘图、互动六组)。完整签名由插件写入系统提示(src/lang/spec.js),模型只看到真实实现过的部分。
客户端渲染¶
- 通过 Cordis 在 Web 侧注入
client.js,在tool.call.toolview中以intelligent_ui为 key 挂载视图。 - 界面使用宿主主题令牌(
--dsw-alias-*),样式由组件以<style>渲染,行卸载即移除。 - 调试时可读
window.__DSH_INTELLIGENT_UI__(版本、构建时间、parseProgram、组件/函数注册数、$state等)。
可配置项¶
在 profile 的 cordis.patch.yml(用户层)可对 bundle id intelligent-ui 覆盖配置(插件不导出 Config schema,不做校验):
- id: intelligent-ui
config:
prompt: true # 是否在系统提示里教这套语言,默认 true
maxProgramBytes: 60000
maxDiagnostics: 24
安装与启用¶
需要带 plugin_manager 的 DeepSeek Harness(Creator 预设默认启用;也可在 Web 侧栏插件页安装外部 bundle)。
方式一:从 npm 安装(推荐)¶
包已发布至 npm。包名必须带 @my-dsh/ scope——裸名 dsh-intelligent-ui 指向另一个占用同名,会装错包。
通过 agent 的 plugin_manager 安装:
plugin_manager(action="install_bundle", target="@my-dsh/dsh-intelligent-ui")
仓库自带构建产物 client.js,安装即用,无需本地构建。国内若已配置 npmmirror 等 registry,pnpm 可直接拉取同步包。
方式二:从插件市场安装¶
在 Web 侧栏插件页启用实验性「自定义插件市场」,添加索引源:
https://my-dsh.github.io/deepseek-intelligent-ui/market/index.json
索引仅含本插件,安装仍解析到 npm 版本。
方式三:从 GitHub 安装¶
同样自带 client.js,无需预先构建。spec 任选其一:
github:my-dsh/deepseek-intelligent-ui
https://github.com/my-dsh/deepseek-intelligent-ui.git
安装命令:
plugin_manager(action="install_bundle", target="github:my-dsh/deepseek-intelligent-ui")
安装后如何生效¶
install_bundle 会把依赖写入 profile,并把 @my-dsh/dsh-intelligent-ui 追加到 package.json 的 dsh.profile.bundles。真正启用插件的一行来自包内 cordis.patch.yml(bundle 层),例如插入 id intelligent-ui、name @my-dsh/dsh-intelligent-ui。用户层 cordis.patch.yml 最后应用,可覆盖同一 id 的 config。
升级或切换来源时,已安装同名 bundle 再装会返回 already-installed,需先移除再装:
plugin_manager(action="remove_bundle", target="@my-dsh/dsh-intelligent-ui")
plugin_manager(action="install_bundle", target="@my-dsh/dsh-intelligent-ui")
典型用法¶
直接向模型描述需要「用界面回答」的任务,模型会自行决定是否调用 intelligent_ui。README 中的示例包括:
- 「我在旧金山有一天时间,帮我排一条观光路线」
- 「帮我做一个 30 年房贷计算器,能拖利率和首付」
- 「把我这份旅行清单做成能勾选、能算总价的表格」
openui-lang 速览示例(须保持单行,与解析器一致):
$budget = 1200
$days = 3
root = Col([Title("旧金山一日路线", "2xl"), Text(["全程 ", Text($days + " 天", "md", "muted"), ",预算 $", Input($budget, "预算", "number")]), Slider($days, 1, 7, 1, "天数", "天"), Chart("bar", @Each(@Range(0, 3), "i", {day: "D" + (i + 1), cost: $budget / $days * (i + 1)}), "day", ["cost"]), Row([Button("重新计算", @Set($budget, 1500)), Button("清空", @Reset())])], 4)
房贷类计算优先使用 @Payment(principal, rate, periods)(rate 为每期利率百分数,期数为月数),避免手推公式与枚举参数静默回退(如 Button 的 variant 仅有 primary | secondary | ghost | outline | danger)。
适用场景与注意¶
适合谁¶
- 已在 DSH Web 端对话、希望行程规划、计算器、可编辑表格/图表等「当场可调」输出的开发者或重度用户。
- 愿意让模型学习插件注入的 openui-lang 说明,并接受工具调用落在会话日志里的工作流。
使用与排障¶
- 界面块渲染在工具调用所在消息位置,不会浮在窗口顶部;聊天较长或界面很高时,用户可能需滚动,或在当前上下文再调用一次
intelligent_ui让新块出现在视口附近。 - 界面在 shadow DOM 内,依赖 a11y 快照的自动化可能「看不见」控件;可用 DOM 查询或
window.__DSH_INTELLIGENT_UI__验证渲染。 - 解析失败时不会部分渲染;诊断随工具结果返回模型,可按行号修改程序。
安全与权限¶
插件作为 DSH profile 的一部分加载,Host 侧 index.js 在进程启动时注册工具与系统提示;客户端 client.js 在浏览器执行模型生成的程序。安装前应阅读仓库源码与 MIT 许可证,确认与当前环境的信任边界一致;插件以当前 DSH 进程及 Web 会话的权限运行,勿在未审阅的情况下安装不可信来源的 bundle。
社区目录页 SkillHub 上的条目 与 GitHub 仓库由社区维护,与 DeepSeek / 幻方无官方从属关系;DSH 生态奉行「一切皆插件」,市场索引仅为便利分发。
结尾¶
deepseek-intelligent-ui 把模型回答从静态文字推进到可执行的 openui-lang 界面:工具校验在 Host,交互在客户端,状态绑定与重算由语言与渲染器完成。若你已在 Harness 里使用 plugin_manager,可按上文 npm、市场或 GitHub 任一方式安装 @my-dsh/dsh-intelligent-ui,再用自然语言让模型生成界面即可。