用 dsh-genui 在 DeepSeek Harness 回答里内联渲染交互界面

前言

DeepSeek Harness(命令是 dsh)是 DeepSeek 开源的智能体运行时,目前仍是开发者预览版。官方仓库把设计概括成一句话:Everything is a Plugin——模型、工具、技能、会话、沙箱、存储、循环、调度,一直到界面,都可以用插件增删,不必改框架源码。启动 Web 界面的官方入口是:

npx @deepseek-ai/dsh web

真正对着网页会话提问时,另一个缺口很快出现:回答多半还是一段文字、一张 Markdown 表格,或者一块静态代码。问「这个月订单怎么样」,模型会给出收入、环比、转化率,但趋势图、统计卡、刷新按钮都不会出现在回复里。想再看一眼,只能再打一段字。

dsh-genui 就是冲着这件事来的。模型把界面描述写成 JSON,放进 dsh-ui 围栏;浏览器端渲染器把它画成卡片、图表、表单、测验,组件就嵌在回答中间。点刷新、拖滑块、交卷,有的交互本地立刻完成,需要模型参与的会回传,再更新同一块界面。

本文按社区目录详情页、GitHub 仓库 README / SKILL.md / package.json / CHANGELOG.md,以及 DeepSeek Harness 官方仓库 交叉核对后整理。需要先说明一点:下文提到的插件目录站点 deepseek-harness-plugin.com 是独立的社区目录,与 DeepSeek / 幻方没有官方从属关系,不能当成官方应用商店。

这是什么

dsh-genui 是一款面向 DeepSeek Harness Web 界面的界面增强插件,由 GitHub 组织 omdsh-dev 维护,仓库地址:https://github.com/omdsh-dev/dsh-genui 。npm 包名为 @omdsh-dev/dsh-genui,许可证 MIT,主要语言 TypeScript。仓库挂了 dshdsh-plugin 两个 topic。社区目录把它归在「界面增强」,收录日期 2026-08-15。

截至 2026-08-17,GitHub 仓库约 147 星;目录页当时显示 88 星。星标以仓库一手数据为准。当前 package.json 版本为 0.8.6(CHANGELOG 标注日期 2026-08-16)。package.json 里的 dsh.client.platformweb,也就是说它挂在网页会话上,不是终端 TUI。

它解决的问题很具体:让助手回复不只是文字。模型输出一份白名单 JSON,渲染器在围栏所在位置画出真实组件;不装插件时,这段围栏只是普通代码块,不报错,也不污染会话。仓库同时带三样东西:教模型写围栏的宿主插件、浏览器端渲染器,以及一份可复制到技能目录的 SKILL.md

核心功能

回答即界面

组件嵌在回复里,不是单独一张工具卡片。README 的对比很直接:普通回答是「本月收入 ¥128,430,环比 +12.4%,建议关注转化率」;装上插件后,同一段分析旁边会渲染统计卡、趋势图、进度条。围栏一闭合就开始渲染,不必等整段回复写完。

模型输出的围栏长这样(写给浏览器看的,日常使用不必手写):

{"title":"订单概览","items":[
  {"type":"stat","label":"总收入","value":"¥128,430","delta":"+12.4%"},
  {"type":"stat","label":"订单数","value":"1,024","delta":"-3.1%"}
]}

渲染结果是两张统计卡片。delta- 开头显示为红色,以 + 开头显示为绿色。

双通道渲染

插件自带两套渲染通道,启动时自动选择,不绑定某一个 dsh 构建:

  • Registry 通道:宿主提供 fence-registry 扩展点时,围栏走宿主流式渲染管线。
  • DOM 通道:宿主没有该扩展点时(包括原版 DSH 与部分旧构建),插件观察会话 DOM,自行挂载渲染树。自 0.7.2 起 DOM 通道支持流式渲染:模型写到哪,组件就出现到哪。自 0.8.3 起围栏发现是多表面的,同时匹配标准 md-code-block、部分宿主使用的 .code-block / .code-block-small,并以 banner 标注 dsh-ui 的结构做兜底。

两条通道上,组件、交互、面板和持久化行为一致。CHANGELOG 0.8.6 还修了原版 DSH 0.1.0-rc.6 上因硬注入 inputTriggers 导致围栏静默不渲染的问题:该项改为可选订阅,缺服务时只是不注册 /panel,渲染本身不受影响。

三十多种组件

SKILL.md 把允许的 type 列成一张白名单,模型不能另起炉灶。按用途大致是:

  • 布局textrowcolgridcarddividerspacer
  • 展示statbadgeprogresslisttablekeyvaluetimelinefile-treediffjsoncodecalloutsteps
  • 图表chart(柱状 / 折线 / 环形)、plot(数学函数图,参数滑块可实时重绘,可选自动动画)
  • 交互buttoninputselectcheckboxradioswitchtextareatabsaccordioncopysubmit
  • 高级mermaid(流程图、时序、甘特等)、scene3d(少量 mesh 的 3D 场景)、quiz(点选判题、解析、重试)

表格表头点击可本地排序;文件树目录可本地折叠。这些都不走模型。

本地优先,再回传模型

文档把交互分成两层。UI 自己能做的事——判卷、判题、重置、展开、选中——一律本地即时完成。action 只留给必须模型参与的步骤:生成新内容、执行工具、给下一步建议。

具体约束来自 README 和 SKILL.md

  • 交互组件必须带 action。不带的按钮渲染为禁用态,避免「看着能点、点了没反应」。
  • action 的按钮点击后立刻显示「已触发」。这只证明本地事件已经发出,不代表模型已经收到。
  • 按钮、开关、输入、下拉、复选、单选、文本域、测验带 action 时,点击或失焦会回传模型,模型再更新界面。同名 action 做 300ms 尾沿防抖,连点合并为一次,最后一次的值生效。
  • 多道选择题可以做成卷子:每题一个带 groupanswerexplanationradio,最后放一个 submit。用户全部选完再点一次,分数、对错和解析当场出现,零模型往返;题目随后锁定。「重新作答」在本地重置,可选 resetAction 通知模型。
  • 答案、交卷锁定、输入值按「会话 + 内容指纹」保存,上限 200 块 LRU。刷新或重开会话,同一块 UI 的状态会恢复;内容变了则从头开始。
  • GenUI 不得索取密码、API Key、访问令牌、恢复码等秘密。即使出现密码输入,也保持打码,不持久化,不进入表单收集。

工具通道和会话面板

围栏适合「回答里的界面」。交付物型 UI 可以走 render_ui 工具,把同一份 spec 画成工具行卡片。

会话面板是输入框上方的常驻区域:render_uipanel: true 的围栏会原地更新同一块表面。客户端命令:

  • /panel:打开面板
  • /panel <指令>:把定制需求转给模型
  • /panel clear:清空

顶边框可拖拽调高。append: true 做增量合并:同名标签页追加内容,新标签页新增。整面板默认最多 200 个节点、200 条追加,到上限后模型应发送 replace 重建。0.8.6 在面板头部加了关闭按钮,效果与 /panel clear 相同。

规格守卫和体积

每个围栏会过一遍规格守卫:坏节点静默丢弃,数值钳位,字符串截断。整棵组件树上限是 200 个节点、8 层嵌套。SKILL.md 还要求 JSON 必须严格合法:插件只修字符串内半角引号、尾随逗号这类标点级小错;缺括号、错括号等结构错误不修,直接退化成带红横幅的代码块。

mermaid 渲染失败会先自动修复再试(剥反引号、给含中文或空格的标签加引号),仍失败才降级显示源码。组件是白名单,模型塞不进 HTML 或脚本;函数表达式走独立解析器,不用 eval

主渲染包约 110 KB(minify)/ 28 KB(gzip)。mermaid 和 three.js 单独打成按需资产,首次用到时经插件自注册的 HTTP 路由加载,启动时只下载渲染核心。

安装与启用

社区目录页给出的安装命令是:

dsh plugin add github:omdsh-dev/dsh-genui

如需可复现安装,目录页建议固定 commit 哈希:

dsh plugin add github:omdsh-dev/dsh-genui#<commit>

<commit> 换成仓库里实际的提交哈希。插件以当前 dsh 进程的权限运行,安装时可能执行代码,安装前应检查源代码仓库和许可证。

维护者 README 写的是 Web profile 上的 git URL 安装(公开仓库,不需要 npm 账号)。当前 package.json 标明 npm 包尚未作为安装主路径,FAQ 也写明 @omdsh-dev/dsh-genui 在 npm 上会 404。若目录页那条命令没有把插件装进网页会话,按 README 使用下面这条:

dsh plugin --profile web add git+https://github.com/omdsh-dev/dsh-genui.git

前置条件有两条,缺一不可:

  1. 已经安装 dsh。开源版任意构建都可以,插件启动时会自己选渲染通道。
  2. pnpmPATH 上,dsh plugin 依赖它。没有就执行 corepack enablenpm i -g pnpm,然后新开一个终端,确认 pnpm -v 有输出。

package.json 还声明了运行环境:Node.js ^22.19.0 || >=24.0.0,pnpm >=11.7.0 <12;一组 @deepseek-ai/dsh-* peer 依赖对齐 ^0.1.0-rc.6,Cordis 为 @deepseek-ai/cordis@^4.0.1

不要对刚 clone 下来、还没装依赖的目录使用 link:。README 写明 link: 不会安装 mermaid / three / react,装完渲染器会坏。本地开发迭代才用:

cd dsh-genui
pnpm install
dsh plugin --profile web add link:$PWD

clone 后也可以跑仓库里的一键脚本,它会检查 dshpnpm 和仓库可达性,再按 git URL 安装,并把 SKILL.md 同步到技能目录:

git clone https://github.com/omdsh-dev/dsh-genui.git
cd dsh-genui
./scripts/install.sh

默认装进 web profile;./scripts/install.sh tui 可以指定别的 profile 名。装完后重启 dsh web,浏览器硬刷新(macOS 上是 Cmd+Shift+R),在新会话里说「用 dsh-ui 画个统计看板」做验证。也可用 dsh plugin --profile web list 确认列表里有本插件。

典型用法

让模型主动出围栏

新会话在重启后才会带上插件教给模型的围栏词汇。如果模型仍只回文字,直接说「用 dsh-ui 输出」即可。SKILL.md 也可以复制到 ~/.dsh/skills/genui/(安装脚本还会同步到 ~/.agents/skills/genui/),用来增强模型对组件语法的遵循。

仓库的 demo-prompts.md 提供了四幕演示脚本,用来展示布局与数据、交互组件、函数图 / 测验 / mermaid / 3D,以及点击按钮后模型更新面板的事件循环。日常使用不必按脚本走,它更适合对照 README 里的演示视频看能力边界。

事件循环怎么转起来

第四幕的官方示例是一块「服务器监控面板」:四个统计卡、自动刷新开关、刷新按钮、环境选择。按钮和选择器都带 action。用户点「刷新数据」或切换环境后,模型收到 [genui-action],再用新的 dsh-ui 围栏更新数值。这是文档里写明的双向互动,不是额外装的工作流插件。

常见故障

README 的 FAQ 把几类现象写死了,安装后可以对着查:

  • 显示成代码块:确认当前 dsh 构建能走 fence-registry 或 DOM 通道兜底;dsh plugin --profile web list 里有本插件;已经重启并硬刷新。
  • 渲染围栏时聊天界面白屏:dsh 版本过旧,先更新 dsh 再重装插件。
  • dsh: pnpm not found on PATH:装好 pnpm 后新开终端再试。
  • 安装卡在 git 凭据或 404:仓库是公开的,git URL 不需要登录;对 @omdsh-dev/dsh-genui 的 404 表示 npm 包尚未发布,应改用 git URL。
  • scene3d / mermaid 不渲染:这两个引擎按需加载(/plugins/@omdsh-dev/dsh-genui/assets/*.js)。先重启并硬刷新;仍不行就卸掉重装:
dsh plugin --profile web remove @omdsh-dev/dsh-genui
dsh plugin --profile web add git+https://github.com/omdsh-dev/dsh-genui.git

旧版宿主缺少资产路由时会降级显示源码或加载失败提示,更新 dsh 即可。

适用场景与注意事项

适合已经在用 DeepSeek Harness Web UI、希望回答里直接出现结构化界面的人。比较对口的内容包括:指标看板、方案对比表、流程 / 步骤、测验与本地判卷、函数曲线演示、少量 3D 几何说明。SKILL.md 的判断口诀是:换成结构化组件会不会比纯文字更好扫、更好懂、更好操作;会就用,不必等用户开口要 UI。一句话能说清的事、纯闲聊、用户明确不要 UI,以及跟内容无关的 3D 炫技,文档要求别用。

使用前注意这几条:

  1. 权限与来源。目录页写明:插件以当前 dsh 进程的权限运行,安装时可能执行代码。安装前检查 GitHub 源码和 MIT 许可证;生产环境建议固定 commit。该目录不是 DeepSeek 官方商店,收录不等于背书。
  2. 只覆盖 Webpackage.json 声明 platform: web。终端 TUI、无界面的 headless 运行不是它的目标。
  3. 依赖 pnpm 和较新的 dsh。缺 pnpm 装不上;过旧的宿主可能白屏,或缺少 mermaid / three 的资产路由。
  4. 规格上限。整树不超过 200 节点、8 层嵌套,超出会被裁掉。复杂 spec 可先走 validate_dsh_ui 工具(SKILL.md 要求:不少于 3 个组件或含长表格时先验后发)。
  5. 不要收集秘密。插件规范禁止在 GenUI 里要密码和密钥;即便界面里出现了密码框,也不会持久化、不会进表单收集。
  6. 不要用 link: 走捷径。刚 clone 的目录没有依赖,渲染器会坏。公开安装用 git URL;本地开发先 pnpm install 再 link。

小结

dsh-genui 把「回答」从纯文本扩成可交互界面:模型写 dsh-ui 围栏,浏览器按白名单把 JSON 画成组件。双通道渲染让原版 DSH 和新构建都能用;本地优先的交互避免无意义的模型往返;事件循环则把刷新、筛选这类操作接回智能体。它是社区 MIT 项目,不是官方内置功能。

目录页:https://deepseek-harness-plugin.com/zh-CN/plugins/dsh-genui/

GitHub:https://github.com/omdsh-dev/dsh-genui

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜