让 AI 在对话中或侧边栏里插入流式生成的 UI,以 TSX 书写——模型的母语之一,不必再教它一套 JSON schema。流式渲染不闪烁,状态跨帧保留、无硬刷新,对 UI 的点击直接驱动下一轮对话。inline 形态流式最重要,side canvas 形态更 agentic。卡片内部同样具备 agentic 能力——执行 bash、curl、调用模型、读写文件。
安装
# GitHub 源码(首次需按提示配置 allowBuilds 构建授权后重试)
dsh plugin --profile web add github:CNSeniorious000/dsh-generative-ui
装任何插件都等于在你的机器上跑第三方代码,权限和你本人一样大——能读你的文件、用你的凭据、访问网络,工具审批管不到它。GitHub 来源的插件还会在安装时执行构建脚本——pnpm 默认拦截,所以安装可能停在 ERR_PNPM_GIT_DEP_PREPARE_NOT_ALLOWED 或 ERR_PNPM_IGNORED_BUILDS;dsh 会打印出需要添加的确切键名,把它加进该 profile 的 pnpm-workspace.yaml 的 allowBuilds 下,重跑一次即可装上。放行构建本身就是一次信任判断:请只安装可信来源,并尽量锁定 commit(github:owner/repo#sha)。
README
该插件的 README 只有英文版本。
Generative UI for DeepSeek Harness: the agent answers with a live React interface instead of prose. It streams — the component renders while the model is still typing it.
Two places it shows up:
- Inline — a fenced
```ui4a/tsxblock renders in place, between the paragraphs of the reply. Right for a chart, a form, a set of options to click, a calculation the reader will want to change a number in. - Canvas — a file at
ui4a/canvases/<id>.ui4a.tsxopens in a panel beside the conversation and stays there across turns. Right for a tool the user will come back to.
Generated code imports anything on npm (resolved from esm.sh at render time), shares the host's single React instance, and takes its colours from the app's own design tokens, so it follows the light/dark theme.
The ui4a in that fence is the harness this implements — UI for Agent, from Mind Lab: rather than coaxing an agent into a fixed UI schema, let it write ordinary frontend code and have the runtime enforce the boundaries. The reasoning, and the benchmarks behind it, are in UI4A: A Component-Native Harness for Generative UI. This package is that harness wired into dsh's web client.
Install
dsh plugin --profile web add dsh-generative-ui
Published npm releases carry provenance. To try an unreleased commit while preview publishing
is unavailable for the transferred repository, point the profile at a local checkout — lib/ is
built by prepare, so the profile does not care that this package uses bun and dsh uses pnpm:
dsh plugin --profile web add link:/path/to/dsh-generative-ui
dsh plugin forwards to the profile's package manager, so any of these installs the package —
and adds it to ~/.dsh/profiles/web/package.json's dsh.profile.bundles, which is the list dsh
actually boots. Verified on a clean machine, the bundle list reads:
{
"dsh": {
"profile": {
"bundles": [
"@deepseek-ai/dsh-base",
"@deepseek-ai/dsh-web-app",
"dsh-generative-ui"
]
}
}
}
The dependencies entry beside it is whatever form you installed — and from the registry that is
a caret, which on a 0.0.x version pins exactly: ^0.0.1 matches 0.0.1 and nothing later. Edit
it to ~0.0.1 if you want patches.
Start dsh web and it is there — or restart it if it was already running, since plugins are
mounted at boot and adding one has no hot-reload.
If nothing happens, check which agent preset the session is on first. Under minimal
(极简模式) the persona is declared complete: true, so nothing can append to the system prompt and
the skill tool is not in the preset — the model is never told this format exists. Measured: 45
characters of system prompt against 27524, and zero mentions of the fence. The rendering half still
works, so a card you paste by hand renders; the model just will not write one. Use standard, or
copy the preset and add tool-skill back.
How it works
The package is one plugin with two halves, which is how dsh plugins reach the browser:
lib/index.js (node) |
injects the system-prompt section, registers the generative-ui skill, serves the compiler wasm and canvas file reads over its own webServer routes |
lib/client.js (web) |
claims ui4a/tsx code blocks in the transcript, compiles TSX in-browser, mounts the canvas panel |
The model is taught in two layers, split by what each costs:
src/prompt.tsrides in every request, so it carries only the trigger, the fence syntax, the canvas path, and the colour tokens.src/skill.tsis registered throughctx.skills.register()and loads only when the model reaches for it. It carries the judgement: whether the answer wants an interface at all, inline or canvas, how to frame and lay one out.
That split is measured, not assumed — see CLAUDE.md §4.5 for the 40-prompt evaluation behind it.
Development
bun install
bun run check # lint + typecheck + build + smoke
bun run build bundles both halves with Bun.build. CLAUDE.md is the design document — it records the host constraints this plugin was built against, all of them found the hard way.
License
Apache-2.0
链接
同类插件
zhu1090093659/dsh-web#packages/dsh-task-board★ 8670
侧边栏多列任务看板:卡片交给真实 DSH 智能体会话执行,支持 cron 定时(Host 侧到点执行,关浏览器也生效)。
zhu1090093659/dsh-web#packages/dsh-web-all★ 8670
DSH Web UI 插件与皮肤合集:任务看板、git 图、右侧面板、远程移动端 UI、桌宠、实时 token 统计与皮肤中心。
MeteorNOX/DeepSeek-Balance-Whale-Widget★ 4631
右下角常驻的小鲸鱼挂件:余额、今日已用与每轮对话消耗(含峰谷价),余额预警与今日预算的泡泡内容都可编辑;泡泡点击序列模块化自定义,支持并列加权 A/B、随机台词与随机图片;内置 30+ 厂商模板(OpenAI / OpenRouter / Kimi / 硅基流动 / 方舟 / 智谱 / MiniMax 等),按模型查余额与订阅额度;另有任务结束音效、导入音频、自定义角色与资源管理。数据全在本机,无遥测。
ccch1mneyyy/dsh-TUI★ 4484
Claude Code 风格全屏终端 UI:像素鲸鱼顶栏、实时工作状态行、思考流式展开。
omdsh-dev/DSH-better-sidebar★ 4133
侧边栏完整工作台:内置文件渲染编辑、终端、Git 与子代理,支持三方插件注册新 Tab。
Devin-AXIS/deepseek-design#deepseek-idesign★ 1453
可视化设计工作室,支持网站、App 原型、海报、信息卡、报告和杂志的模板创建、元素编辑、选区级 AI 草稿衔接与导出。
社区评论
评论公开保存在 GitHub Discussions。加载评论会连接 GitHub 和 Giscus;发表内容需要 GitHub 账号。