生成式界面 MindLab-Research/dsh-generative-ui

dsh-generative-ui

为 DeepSeek Harness 打造的生成式 UI：智能体不再用文字作答，而是直接给出一个能跑的 React 界面。它是流式的——模型还在打字，组件就已经渲染出来了。

它出现在两个地方：

- 内联 —— 围栏代码块 - 画布 —— ui4a/canvases/<id>.ui4a.tsx 文件会在对话旁边的面板里打开，跨轮次一直留在那儿。适合用户会反复回来用的工具。

生成的代码可以 import npm 上的任何东西（渲染时从 esm.sh 解析），与宿主共用同一个 React 实例，颜色取自应用自己的设计 token，所以能跟着浅色/深色主题走。

围栏里的 ui4a 就是本插件实现的 harness —— UI for Agent，来自 Mind Lab：与其哄着智能体去填一套固定的 UI schema，不如让它写普通的前端代码，由运行时来守住边界。背后的推理和基准测试见 UI4A: A Component-Native Harness for Generative UI。本包就是把这套 harness 接进了 dsh 的 web 客户端。

安装

sh
dsh plugin --profile web add dsh-generative-ui

npm 上发布的版本带 provenance。仓库转移后预览发布暂时不可用，想试某个未发布的 commit，就把配置档指向本地 checkout —— lib/ 由 prepare 构建，所以配置档并不关心本包用 bun、dsh 用 pnpm：
sh
dsh plugin --profile web add link:/path/to/dsh-generative-ui

dsh plugin 会把命令转给配置档的包管理器，所以上面任意一条都能装上这个包，并把它加进 ~/.dsh/profiles/web/package.json 的 dsh.profile.bundles —— 那才是 dsh 真正启动时加载的列表。在干净机器上验证过，bundle 列表长这样：
json
{
"dsh": {
"profile": {
"bundles": [
"@deepseek-ai/dsh-base",
"@deepseek-ai/dsh-web-app",
"dsh-generative-ui"
]
}
}
}

旁边的 dependencies 条目取决于你安装时用的形式 —— 从 registry 装是 caret，而在 0.0.x 版本上 caret 是精确锁定：^0.0.1 只匹配 0.0.1，不匹配更新的版本。想要补丁版本就改成 ~0.0.1。

启动 dsh web 它就在了 —— 如果本来已经跑着，就重启一下，因为插件在启动时挂载，加插件没有热重载。

如果什么都没发生，先看看会话用的是哪个智能体预设。 在 minimal（极简模式）下，persona 声明为 complete: true，所以任何东西都无法往系统提示词里追加内容， skill 工具不在预设里——模型根本不知道有这种格式。实测：系统提示词只有 45 个字符，对比 27524，而且一次都没提到围栏。渲染那一半还能用，所以你手动粘贴的卡片能渲染出来；只是模型不会自己写。改用 standard，或者复制预设，把 tool-skill 加回去。

工作原理

这个包是一个插件，分两半，dsh 插件就是这样触达浏览器的：

| lib/index.js（node） | 注入系统提示词段落，注册 generative-ui 技能，通过自己的 webServer 路由提供编译器 wasm 和 canvas 文件读取 |
| lib/client.js（web） | 在会话记录里认领 ui4a/tsx 代码块，在浏览器里编译 TSX，挂载 canvas 面板 |

模型分两层学习，按各自的开销来拆：

- src/prompt.ts 每次请求都带上，所以只放触发器、围栏语法、canvas 路径和颜色 token。
- skill/SKILL.md 通过 ctx.skills.register() 注册，只在模型主动去取时才加载。它承载 UI 与 inline/canvas 的取舍，再指向 skill/references/ 里按主题拆分的文件，讲具体的编写细节。

这个拆分是实测出来的，不是拍脑袋——背后的 40 条提示词评测见 CLAUDE.md §4.5。

开发

sh
bun install
bun run check # lint + typecheck + build + smoke

bun run build 用 Bun.build 打包两半。CLAUDE.md 是设计文档——它记录了开发这个插件时面对的宿主约束，每一条都是踩坑踩出来的。

许可证

Apache-2.0