前言¶

在 DeepSeek Harness（DSH）里让模型输出可视化页面时，常见做法是贴一段 ```html 代码块，或把预览放到侧栏。前者只能看源码，后者和当前回复的上下文容易脱节。若希望「模型写 HTML → 对话流里直接看到渲染结果，且回合结束后预览仍留在该条回复下方」，需要插件在 Web 端挂载工具与客户端渲染面。

下面介绍社区插件 dsh-html-live-preview（维护者 Weihong-Liu），它在对话中提供 render_html 工具，并用沙箱 iframe 内联、随内容自动增高，并跟随 DSH 明暗主题。

这是什么¶

dsh-html-live-preview 是 DSH 的客户端类插件：模型调用一个工具，生成的 HTML 在聊天里以卡片形式渲染——不是代码块，也不是独立侧栏面板。npm 包名与仓库名均为 dsh-html-live-preview，当前发布版本 1.0.1，许可证 MIT。

插件声明对 @deepseek-ai/dsh-tools 的 peer 依赖范围为 ^0.1.7-rc.2 || ^0.2.0-rc.1；DSH 运行时不在该范围内时会拒绝加载并提示版本不匹配，而不是在首次调用时才崩溃。

核心功能¶

以下能力均来自项目 README 与实现说明。

流式预览。 模型在写入 render_html 参数的过程中，客户端会从尚未完成的 JSON 里解码部分 HTML，预览随参数流式增长，不必等整次 tool call 结束。

交互与脚本。 调用 settled 后，完整 markup 注入 iframe，<script> 按文档顺序各执行一次；按钮、动画、图表、canvas 等可正常工作（受沙箱与 CSP 约束，见下文）。

回合结束后仍可见。 DSH 会把 tool 行折叠进该回合的过程披露区；插件在 conversation.chat.turnTail 再渲染一次预览，使其留在折叠区之外、对应回复下方。同一时刻每个 call 对应一个 iframe。

主题同步。 iframe 继承宿主 --dsw-* / --dsh-* 设计 token 及可读别名，并随应用明暗切换实时更新。

失败可见。 脚本错误、子资源加载失败会在卡片下方以可关闭条带展示；若录制的 call 落在当前加载的 session 窗口之外，卡片会明确说明而无法重建预览。

宿主侧（index.js）。 校验调用、将 HTML 片段上限设为 256 KiB，返回极短 receipt；HTML 本身保存在录制的 tool/call 参数中，重开会话时可重放预览，不额外占存储或上下文。

浏览器侧（client.js）。 以 DSH client-module 形式注入的经典脚本，无构建步骤。在 tool.call.toolview（回合进行中）与 turnTail（回合结束后）两个挂载点渲染；iframe 使用固定 srcdoc 接收文档，模型 HTML 经 postMessage 注入，流式更新不会整页 reload。流式阶段会剥离 script 与 on* 属性；最终阶段再注入完整 markup 并等待外链脚本加载。沙箱为 sandbox="allow-scripts" 且无 allow-same-origin；帧内 CSP 禁止 fetch/XHR/WebSocket，允许指定 CDN（jsdelivr、unpkg、cdnjs、esm.sh）及 inline script、图片与字体等。默认预览高度上限 620px，卡片可展开至 2400px；ResizeObserver 上报内容高度（60ms 防抖）。

卡片控件（悬停）。 查看 HTML 源码、复制、重新执行脚本、展开高度。

环境与要求¶

• 使用 DSH 的 web profile，即通过 dsh web 启动 Web UI（README 写明在 0.1.7-rc.2 与 0.2.0-rc.1 上验证过）。
• 插件仅面向 Web 客户端（dsh.client.platform: web），需在运行 Web UI 的 profile 上安装。

安装与启用¶

从 npm registry 安装到 web profile：

dsh plugin --profile web add dsh-html-live-preview

也可在 Web UI 的 Plugins 里完成同样操作；安装会选中 bundle，下一次 composition 时挂载（HMR 可热应用）。

若从本地仓库目录链接开发版（需自行准备绝对路径）：

dsh plugin --profile web add link:/absolute/path/to/dsh-html-live-preview

安装后请新开一个 session。 已有 session 仍使用创建时的工具目录，新工具要在下一次 session 里才会出现在 catalog 中。

render_html 注册在工具 registry 的全局层，该 profile 下各 agent 均可调用，无需改 agent preset。

典型用法¶

用自然语言描述可视化需求即可，例如 README 中的示例：

• 「Draw a bar chart of this week’s latency」
• 「Mock up a login page and make the button do something」
• 「Animate how quicksort partitions this array」

模型会调用：

render_html({ html, title?, height? })

其中 html 为要渲染的片段；title、height 为可选。

适用场景与限制¶

适合谁。 需要在 DSH Web 对话里快速查看模型生成的静态或轻交互 HTML（ mock 页面、简单图表、算法动画演示等），且希望预览 inline、随主题、回合结束后仍贴在回复下的开发者。

务必知晓的安全与权限。 插件在当前 DSH 进程中加载；安装前应阅读 GitHub 仓库 源码与 MIT 许可证，确认接受其沙箱策略（帧内无网络请求，数据需内联或从允许的 CDN 拉库）。

文档明确列出的限制：

• DSH 没有自定义 Markdown 代码围栏渲染的扩展点，```html 仍为普通代码块；应通过 tool call 使用本插件。
• iframe 内故意禁止网络（connect-src 'none'），依赖实时 API 的可视化需内联数据或仅用允许 CDN 上的库。
• 会话窗口截断导致 call 不在加载范围内时，无法重建预览。
• 修改插件自身代码后需重启 DSH 进程（client bundle 与 host 模块按进程缓存）；profile manifest 的 HMR 不覆盖这一点。

验证与生态说明¶

维护者在真实 DSH Web 实例与真实模型调用下做过验证（见仓库 screenshots/）；渲染逻辑另有独立页 test/harness.html 可本地演练 client.js 行为。

DSH 生态强调「一切皆插件」；插件目录站点 SkillHub 上的条目 与 GitHub 仓库 为社区维护信息源，与 DeepSeek / 幻方无官方从属关系。若 peer 版本与本地 DSH 不一致，可按 DSH 提示使用 dsh plugin allow-version 等机制处理，或在仓库 issue 中跟进兼容更新。

经过上面的步骤，在 web profile 安装 dsh-html-live-preview 并新开 session 后，即可在对话里通过 render_html 获得内联、沙箱化、可随流式参数增长的 HTML 预览，而不必把可视化挤进代码块或侧栏。