丰富的用户界面
chatgpt风格丰富的答案在DeepSeek线束。
带有详细面板、KPI卡、多系列图表、可排序表格、流程和分层架构图的实体集合，以及可在拖动时重新计算的计算器——在内部原生呈现 DeepSeek利用.
这是什么，为什么
模型可以描述比较，但Markdown的墙让读者做布局工作。这个插件为模型提供了一个小的声明性语言，用于结构携带答案的情况：并排选项，您想要检查的对象，阅读器将更改的数字。
渲染器是一个真正的React树，隐藏在一个严格的模式下。没有生成HTML，没有 eval，没有shell访问，也没有来自模型的页面级JavaScript。本地控件在浏览器中重新计算；只有当读者明确要求时，才会再次调用模型。
在实验室里，答案在打开的面板旁回流。在Harness中，相同的实体作为本地右列选项卡打开，因此对话缩小而不是被覆盖-参见 集成说明.
entity-list layout:"feature" 给出了一个软件入围名单的广泛预览，整个描述和它的来源。在它的下方，一个带标题的图库每次显示一个截图。
指标，一个带有单位和悬停的两系列图表，一个带有状态药丸的可过滤表格和一个有序的流程-一个文档。
框中框：池保存连接，箭头显示与之对话的对象。代码块保留语言标签、语法颜色和副本。
滑块在浏览器中重新计算数字；不再调用该模型。
390像素：两列的KPI卡片，每个图表标签和一个仍然适合的表格。
现场演示
rich-ui.beako.best -实验室条件下的真实渲染器，无需安装。场景：仪表板、电影、列表、计算器、配置器、技术故障和拒绝块诊断；添加 &theme=dark 暗黑主题。演示数据是说明性的。
安装
需要DeepSeek挽具 0.2.x 和节点 22.19+． 没有NixOS的改变，没有修补的挽具。
dsh plugin --profile web add @kyoukisu/dsh-rich-ui
systemctl --user restart deepseek-harness # or restart however your Harness runs
从checkout -这是作者使用的循环：
git clone https://github.com/kyoukisu/dsh-rich-ui && cd dsh-rich-ui
npm ci && npm run build:plugin
dsh plugin --profile web add link:$PWD
未释放的提交: dsh plugin --profile web add github:kyoukisu/dsh-rich-ui.
插件将自己注册为一个bundle；委婉的说法是 rich-ui.
快速启动
在新的会话中，要求从结构中受益的东西：
Compare three electric kettles by price, volume and features. Make it clickable.
回复会以一个界面的形式出现：一个摘要条，几行照片，最便宜的选项会以绿色高亮显示。打开一行显示事实，来源和相关项目，而不离开谈话。
值得尝试的事情： “制作一个有三个滑块的预算计算器”， “用图表和表格显示本季度”， “创建一个带有制表符和条件警告的配置器”.
它可以渲染什么
| 集团 | 节点 |
|---|---|
| 布局 | stack， row， grid， card， divider， meta |
| 文本 | text 与内联 code， 大胆的、连结及 [[entityId]] 芯片; callout 带有可选标题； code 具有语法颜色，语言标签，行号和副本 |
| 对象 | entity-ref， entity-list 在紧凑型或 layout:"feature" 行，海报，广场或景观预览；实体详细信息停靠在原生的右列中，或者退回到页面内的抽屉中，带有一个两层的图片库，或者一次一个带字幕的截图，再加上cast |
| 数据 | stat (KPI卡), progress， status， table （可排序，可过滤，状态和进度列，溢出时滚动提示）， chart （条形/线条/区域/甜甜圈/散点，1-6系列，单位，工具提示）， computed |
| 流 | diagram 具有有序的步长、连接器标签和分支深度； layers 用于具有成员芯片的盒中盒架构 |
| 媒体 | image 标题, image-group 具有可选的每帧标题和内联 presentation:"gallery"， video 和 audio 具有本地控件，画廊灯箱，弹出窗口，工具提示 |
| 控制 | input （文字/数字/日期）， select， slider， switch， checkbox， radio， segmented， tabs |
| 逻辑 | 表达式(add， mul， round比较……) conditional，地方行动； send-message |
大约有150个Lucide图标通过名称解析，带有语义音调(success， warning， danger， muted)所以颜色是有意义的。浅色和深色主题遵循主机调色板和字体。
合同共十行
```rich-ui
{"version":1,"title":"Budget","initialState":{"spend":1200},
"nodes":[
{"type":"slider","stateKey":"spend","label":"Monthly spend, €","min":100,"max":5000,"step":100},
{"type":"computed","label":"Per year, €","expr":{"op":"mul","args":[{"state":"spend"},12]}},
{"type":"callout","tone":"info","content":"Recomputed locally — no model call."}
]}
```
实体，表格，图表和操作-一个完整的文档
{"version":1,"title":"Films for tonight",
"entities":[{"id":"a","kind":"Film","title":"Arrival","subtitle":"2016 · science fiction",
"image":"https://example.org/poster.jpg",
"facts":[{"label":"Director","value":"Denis Villeneuve"}],
"sources":[{"title":"TMDB","url":"https://www.themoviedb.org/movie/329865-arrival"}],
"badge":{"label":"Editors' pick","tone":"success"}}],
"nodes":[
{"type":"meta","items":[{"icon":"film","text":"3 films"},{"icon":"clock","text":"2 hours"}]},
{"type":"entity-list","entityIds":["a"]},
{"type":"table","columns":[{"key":"k","label":"What"},{"key":"v","label":"How many"}],
"rows":[{"k":"Screenings","v":3}]},
{"type":"chart","kind":"bar","data":[{"label":"Mon","value":2},{"label":"Tue","value":5}]}]}
权威文本是 prompt-rich-ui / prompt.md;精确的字段、枚举和预算 引用/ schema.md，以及工作文件 引用/ examples.md.
它是如何工作的
flowchart LR
A["Model writes a rich-ui fence"] --> B["Adapter finds the code block"]
B --> C{Strict JSON schema}
C -- invalid --> D["Stays a normal code block"]
C -- valid --> E["React renderer mounts"]
E --> F["Local state, no model call"]
F -- explicit button --> G["rich-ui action message"]
- 节点的一半 注册一个永远打开的系统提示部分，包含整个契约和引用文件的绝对路径，加上
rich_ui_validate工具。该模型可以在发出JSON之前验证它；模式错误作为一个工具结果返回，而不是一个可见的用户消息。 - 浏览器的一半 验证栅栏并安装到插件拥有的根目录中。当模型仍在写入时，封闭节点在惰性预览中呈现，并在块确定时变为交互式。
- 格式错误的文档永远不会打补丁，也不会触发自动消息：它会显示一张诊断卡，上面有确切的错误和被拒绝的JSON，外加一个复制按钮。一个浏览器插件没有工具通道，所以卡片故意没有“询问模型”按钮。未完成的流保持代码状态，直到模型关闭它们。
安全
| 风险 | 缓解 |
|---|---|
| 任意代码执行 | 仅声明式JSON；没有HTML， CSS， JS eval 或者属性路径 |
| Prompt-injected行动 | 本地操作不能调用工具； send-message 需要显式单击，并作为普通用户文本传递 |
| UI中的秘密 | 拒绝密码/秘密状态密钥；不存在秘密输入组件 |
| 恶意网址 | http(s) 仅，拒绝url中的凭据 |
| 资源枯竭 | 有界深度，节点数，字符串大小和表达式预算 |
| 存储的数据 | 持久性是可选的，每个会话，从不存储文本或日期输入 |
与参考资料等值
测量的，未要求的： 19 / 27 参考场景再现， 2部分， 6失踪 -附有逐项偏差表 文档/ PARITY.md． 今天缺少：美人鱼/ER图表，数学，地图，文物，持久面板和小程序。
已知限制：fence标签不被Harness保留，因此只有当其有效负载看起来像规范文档并通过严格解析器时，才声明未标记的块。一个 json- labeled块永远不会被声明。
故障排除
该块保留为代码。 JSON没有传递模式——通常是一个未知字段(title 在没有的节点内，或者 items 从另一个插件的语法)。声明的栅栏显示准确的错误和被拒绝的源，并根据请求复制它们。不会自动执行、重写或发送任何内容。模型应该调用 rich_ui_validate 在发送之前,如果没有，请它修复文档并验证它。
一个被拒绝的块解释它自己并复制精确的错误和源。没有什么是自动发送的。
图像显示占位符。 URL错误，被远程主机阻止，或者没有 http(s)． Ozon/WB cdn拒绝热链接；使用允许的来源或您自己的媒体主机。
老 dsh-ui 消息停止呈现。 这是一个不同的插件语法。这个声称 rich-ui 只有。
开发
npm ci
npm run dev # lab at http://127.0.0.1:4173, HMR, no Harness needed
npm run build # typecheck + lab build
npm run build:plugin # the two real bundle artifacts
npm test # 217 unit, schema and DOM tests
npm run test:browser # 58 Playwright desktop + mobile checks (goldens never auto-update)
# Interaction timings: docs/PERFORMANCE.md
浏览器测试在固定的容器中运行，因此不需要系统库：
docker run --rm --network host --ipc host --user "$(id -u):$(id -g)" \
-e HOME=/tmp -v "$PWD:/work" -w /work \
mcr.microsoft.com/playwright:v1.64.1-noble npx playwright test
实验室场景： ?demo=dashboard， films， listing， apps， calculator， configurator， technical， primitives,再加上 &theme=dark.
本自述文件中的屏幕截图是该实验室的截图，而不是模型。下面的金色图像 tests/ 是回归基线，对另一个产品的保真度只字不提。
许可证
MIT -见 许可证． 演示图片来自维基共享资源，免费许可；价格和元数据可以说明问题。DeepSeek Harness是DeepSeek的一个独立项目；这个插件是独立的。ChatGPT是OpenAI的商标：描述指向丰富答案的风格，而不是任何从属关系，认可或共享代码。