omdsh-dev/dsh-genui

GenUI for DeepSeek Harness: interactive UI components rendered inline in assistant replies via the dsh-ui fence — layout, charts, plots, forms, quizzes, mermaid, 3D scenes, and an action event loop back to the model. Ships the fence-teaching host plugin, the browser renderer (client half), and the genui skill.

什么是 dsh-genui？

dsh-genui 是 DeepSeek Harness (DSH) 的一个插件——即运行 DeepSeek 大语言模型的聊天 UI。该插件监视模型输出中标记为 dsh-ui 的特殊围栏块。当发现此类块时，它会解析其中的 JSON，并立即在对话中渲染一个丰富的交互式 UI 组件，而不是显示纯文本或代码块。

它是如何工作的？

模型发出 dsh-ui 围栏 – 一个 UI 组件的 JSON 描述（例如表格、图表、绘图、测验、媒体播放器）。模型可以逐 token 流式传输此 JSON。
GenUI 客户端检测围栏 在浏览器 DOM 中，根据白名单验证 JSON，并挂载一个 React 组件树。
资源懒加载 – 诸如 ECharts、Mermaid 或 Three.js 等重型库仅在相应组件出现时才被获取。
本地优先交互（排序表格、拖动滑块、回答测验）完全在浏览器中处理，提供亚毫秒级反馈，无需再次往返 LLM。
双向操作循环 – UI 元素可以携带 action 负载。当用户点击按钮时，负载被发送回 LLM，LLM 可以继续推理并发送新的 UI 围栏。
优雅降级 – 如果插件未安装或 JSON 格式错误，围栏仅显示为普通的 Markdown 代码块，因此聊天永远不会中断。

主要功能（“能力矩阵”）

领域	您获得的功能
流式与实时挂载	UI 随模型流式输出逐步出现，无需等待完整回复。
30+ 组件生态	统计卡片、可排序表格、时间线、代码差异、文件树浏览器、ECharts 图表、带实时滑块的函数绘图、Mermaid 图表、3D 模型、音频/视频播放器、KaTeX 数学公式、测验等。
本地优先响应	排序、过滤、滑块拖动、标签切换和测验评分在浏览器中即时完成。
双向操作事件循环	按钮可以向模型发送结构化事件，实现闭环对话。
持久化工作区与模板	一个跨页面刷新保持的停靠面板，内置场景模板和成就徽章。
沙箱与自愈	严格的 JSON 白名单，无 `eval`，自动修复格式错误的节点，并向模型提供同轮反馈以进行修正。

用户快速入门

# 安装插件（需要 pnpm）
dsh plugin --profile web add @changfenhuang/dsh-genui

重启 DSH Web 服务并硬刷新浏览器。

在新聊天中，提出类似以下请求：

使用 dsh-ui 绘制一个带有可排序服务表的统计仪表盘。

回复将显示为交互式仪表盘——可排序列、过滤框、进度环等，而不是纯代码片段。

示例 UI 规范

{
  "title": "Q3 2026 高管概览",
  "items": [
    {
      "type": "row",
      "items": [
        {"type": "stat", "label": "总收入", "value": "¥128,430", "delta": "+12.4%", "spark": [40,55,60,85,120]},
        {"type": "stat", "label": "已完成订单", "value": "1,024", "delta": "-3.1%", "spark": [90,85,80,75,70]},
        {"type": "progress", "label": "季度目标", "value": 82, "variant": "ring"}
      ]
    }
  ]
}

当模型流式输出此块时，GenUI 会渲染三个统计卡片、一个进度环和一个行布局，全部可点击且支持主题感知。

谁应该使用它？

产品经理 / 分析师，希望从自然语言查询中即时获得可视化仪表盘。
构建基于 DSH 的助手的开发者，需要比纯文本更丰富的 UI。
教育工作者，可以在基于聊天的学习流程中直接嵌入测验、绘图和媒体。

开发与贡献

克隆仓库，运行 pnpm install，然后使用 dsh plugin --profile web add link:$PWD 将插件链接到本地 DSH 配置中。
项目包含完整的测试套件（pnpm run test）和无头 Chrome 运行的视觉端到端检查。
导出的类型（GenuiBlock、processGenuiSpec）允许您在任何 React 应用中嵌入渲染器。

许可证

MIT – 可自由使用、修改和再分发。