dsh-intelligent-ui:在 DSH 对话里把模型回复渲染成可交互界面

前言

在 DeepSeek Harness(DSH)里和模型对话时,复杂估算、方案对比、流程说明往往仍是一长段 Markdown 或静态表格。读者要自己在脑子里改参数、对照列项,或把 Mermaid 代码块复制到别处预览。ChatGPT Intelligent UI、Claude Artifacts 一类做法,是在回复流式输出时就把控件、图表和图直接嵌在对话里。dsh-intelligent-ui(npm 包名 @rakutek/dsh-intelligent-ui)是 rakutek 维护的 DSH 插件,目标类似:模型在 Markdown 里写组件标签与响应式表达式,客户端在浏览器内实时渲染成可操作的迷你应用和主题化 Mermaid 图。

下面介绍它的定位、能力、安装方式与典型问法。事实以 GitHub 仓库 README 为准;社区目录页见 skillhub.cn(独立站点,与 DeepSeek / 幻方无官方从属关系)。

这是什么

Intelligent UI for DeepSeek Harness 通过向系统提示注入简短说明,引导模型在合适场景下输出「标准 Markdown + JSX 风格组件标签 + 响应式状态」,而不是纯文本墙。插件在 Desktop 与 Web UI 的对话界面中就地解析并渲染;简单问答仍可保持 plain text。项目采用 MIT 许可证,当前 npm 版本为 0.1.0。

核心功能

实时交互迷你应用

滑块、数字输入、下拉、开关等控件可在浏览器内即时重算公式、统计与图表,README 说明无需再请求后端。

内置组件库

文档列出的能力包括:布局(box、row、grid 等)、排版与数据展示(stat、table、badge 等)、图表(chart 类型 bar/line/pie/area)、进度条、分段控件,以及 20 种以上内置元素的整体描述。

主题化 Mermaid

fenced mermaid 代码块会被转成带圆角节点、明暗主题协调、层级 typography 的图(README 截图含自主金丝雀部署流程图示例)。

双向交互

动作按钮可通过 GenUI.issueNewTurn(...) 把当前配置作为下一轮用户输入发回智能体,一次点击即可续聊。

触发与安全

模型在计算、对比、工作流等场景才倾向生成 UI;表达式在沙箱 AST 解释器中执行,不使用 eval、不访问 DOM、无网络权限;表单状态留在本地浏览器,直到用户点击动作按钮才会把值送回模型。

安装与启用

环境要求:DeepSeek Harness 0.2.x 及以上(README 兼容表写明 v0.2.0-rc.1 或更新;Desktop 或 dsh web)。Node 引擎要求 >=22.13.0(见 package.json)。

图形界面(推荐)

  1. 打开 DeepSeek Harness。
  2. 进入 Plugins → Add plugin。
  3. 填写包名或仓库 URL 之一:
@rakutek/dsh-intelligent-ui

或

https://github.com/rakutek/dsh-intelligent-ui
  1. 点击 Install;README 说明安装后无需重启即可使用。

命令行

Desktop 使用前请先退出 Desktop 应用;Web 侧使用 web profile:

# Desktop profile:
dsh plugin --profile desktop add @rakutek/dsh-intelligent-ui

# Web server profile:
dsh plugin --profile web add @rakutek/dsh-intelligent-ui

临时关闭交互 UI、恢复纯文本回复:在 Plugins 里关闭该插件即可。

典型用法

安装后用自然语言提问即可;README 给出的示例方向包括:

  1. 模拟与估算:例如要求做一个 SaaS 定价模拟器,可调团队席位数与月付/年付并看折扣影响。
  2. 产品对比:例如对比多款笔记本的续航、重量、价格与开发体验,并带交互筛选。
  3. 流程与架构图:例如画出 GitHub PR 经 CI、Review 到部署的流程图。
  4. 金融与规划:例如房贷计算器(贷款额、利率滑块、摊还图表)。

模型侧输出形态示例(摘自 README):用 {@body ...} 声明 useState,再用 <box>、<slider>、<stat>、<button> 等标签组合界面;完整组件与语法表见仓库 Supported Components & Syntax 一节。

适用场景与注意

适合谁:需要在 DSH 工作流里做现场算账、对比表、可视化流程,且希望少复制粘贴、少开第二个工具的智能体使用者;社区分类为「工作流」类插件。

兼容与模型:README 称已在 Claude 3.5/3.7 Sonnet、GPT-4o / GPT-6.1、DeepSeek-V3 / R1 等上测试;实际表现仍取决于当前会话模型是否按插件提示书写组件 Markdown。

安全与权限:插件以当前 DSH 进程权限运行;安装前建议阅读 源码 与 MIT 许可证。外部链接经 DSH 原生安全 URL 处理;外部图片仅加载模型指定的 HTTPS URL。

结尾

dsh-intelligent-ui 把「生成式 UI」收进 DSH 对话流:流式回复即可出现可点可调界面与主题 Mermaid,并在用户确认时通过 GenUI.issueNewTurn 把状态交回下一轮。目录与详情:

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

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

Xiaoye