前言¶

在 DSH 里让智能体回答图表、表格或布局对比时，常见做法是把结果写成 Markdown、贴代码块，或让用户自己去打开本地 HTML 文件。视觉信息一旦复杂，读者要在文本和想象之间来回对照，智能体也无法在交付前确认「你看到的」是否合格。

dsh-html-render 面向这一类需求：智能体可以先在 headless Chrome 里预览页面，修正布局问题后再把同一页嵌进对话。下面介绍插件定位、能力、安装方式与使用上的约束。

这是什么¶

dsh-html-render 由维护者 aur3l14no 发布，在 SkillHub 插件目录 中归类为客户端插件。官方简介是：让 DSH 里的智能体用 HTML 页面作答——先在无头 Chrome 中检查，再在聊天里展示。

运行环境要求 DSH 0.2.x（README 写明需 0.2.2-alpha.2 或更新）；预览依赖本机安装的 Google Chrome 或 Chromium。许可证为 MIT；当前发布包版本为 v0.1.0（见 GitHub Releases 安装地址）。

核心功能¶

插件向智能体注册两个工具，契约在仓库 index.js 的工具描述与 schema 中定义。

典型流程是：智能体反复调用 html_preview 看图、改页、再预览，满意后再调用 html_render 给用户看。可传绝对路径的 .html 文件，或直接传页面字符串；用 path 时智能体先用文件工具写盘，预览与渲染只传路径。html_render 在调用时读文件一次，之后对文件的修改不会更新已展示的页面，换新版本需再次 html_render。

用户在客户端侧可以看到：

• 页面出现在智能体调用 html_render 的位置，其后文字在下方；折叠工具调用后页面仍保留。
• 跟随 DSH 明暗主题并随主题切换。
• 框架高度适配页面（最高约 20,000px）；悬停可全屏；链接在新标签页打开。
• 每个工具调用有一行摘要，展开预览行可看智能体得到的截图、结果与页面源码。

实现上预览使用 playwright-core 驱动浏览器；页面在 srcdoc iframe 中带 sandbox="allow-scripts allow-forms"（无 allow-same-origin），与 DSH 主页面隔离，详情见 README「Security」一节。

安装与启用¶

插件在 DSH 生态中按「一切皆插件」方式安装；SkillHub 为社区目录站点，与 DeepSeek / 幻方无官方从属关系。安装前建议查看 GitHub 仓库 源码与 MIT 许可证；插件随当前 DSH 进程权限运行，能读会话文件系统允许的路径。

DSH Web 或 Desktop：侧栏打开 Plugins → Add plugin，粘贴发布包地址并安装：

https://github.com/aur3l14no/dsh-html-render/releases/download/v0.1.0/dsh-html-render-0.1.0.tgz

终端（CLI Web profile）：

dsh plugin --profile web add https://github.com/aur3l14no/dsh-html-render/releases/download/v0.1.0/dsh-html-render-0.1.0.tgz
dsh web

交给编码智能体安装：在 DSH Creator 模式或其它 coding agent 中可粘贴：

Install the DSH plugin dsh-html-render by following
https://raw.githubusercontent.com/aur3l14no/dsh-html-render/HEAD/docs/install.md

package.json 中 engines 要求 Node >=24，dsh 为 >=0.2.2-alpha.2 <0.3.0。

可选配置写在 profile 的 cordis.patch.yml 里 html-render 条目下：

- id: html-render
  config:
    browserPath: /usr/bin/chromium

browserPath 默认为空字符串，表示使用已安装的 Google Chrome；用于 html_preview。浏览器在首次预览时启动，一分钟内无预览则关闭。无浏览器时预览失败并说明原因，渲染仍可进行。

典型用法¶

安装完成后，用自然语言向智能体要可视化结果即可。README 举例：「chart this CSV」 或 「show the two layouts side by side」。

智能体侧会生成自包含 HTML（内联 <style> / <script>，远程 CDN 资源按原样加载），按规则使用 DSH 主题 CSS 变量（如 --background、--foreground、--chart-1 至 --chart-6 等），避免在 html / body 上撑满视口导致框架拒绝的布局。本地图片可通过绝对路径或 file://，由插件在限制内（单图最多 1 MB、整页最多 2 MB）内联为 data URI。

README 中的会话示例：用户要一张在手机上也易读的 benchmark 图表，智能体在桌面与手机宽度下预览，发现手机预览中徽章不可读后改页再渲染——说明预览工具的价值在于交付前由智能体自己看到与用户相近的效果。

适用场景与注意¶

适合：需要在同一会话里交付图表、表格、示意图、双栏布局对比等，且希望智能体在 headless 浏览器里自检后再展示的场景；页面编写规则与 T3 Code 中同名工具对齐，为 T3 写的页在两边可复用。

需注意：

• 通过 run_code（PTC 模式）渲染的页面不会出现在聊天里。
• 预览使用录制的 DSH 主题副本，DSH 升级后颜色可能与聊天区短暂不一致，直到插件重新录制主题。
• 沙箱隔离 DSH 本身，不阻断页面访问网络。
• 每轮对话为智能体增加约 3,100 字符（约 750 tokens）的工具定义；每次预览增加短文与一张截图（若模型支持），每次渲染增加一行文本。
• 以文件传入的 HTML 最多 512,000 字符，与内联 html 相同上限。

结尾¶

dsh-html-render 把「写 HTML → 无头预览 → 对话内嵌展示」收成两条稳定工具，补上 DSH 智能体在视觉交付上的最后一环。目录与源码如下：

• 插件目录：https://www.skillhub.cn/plugins/aur3l14no/dsh-html-render
• GitHub：https://github.com/aur3l14no/dsh-html-render