deepseek-harness-intelligent-ui

<div align="center">

<img src="https://raw.githubusercontent.com/dreamfarer-space/deepseek-harness-intelligent-ui/main/docs/assets/readme/hero.zh.svg" alt="DeepSeek Harness Intelligent UI：为 DeepSeek Harness 带来生成式、可交互的界面" width="100%">

[English](README.md) · 中文








[演示](#-演示) · [快速开始](#-快速开始) · [如何选择](#-agent-如何选择呈现方式) · [组件](#-组件目录ui_render) · [沙箱组件](#-沙箱组件ui_render_widget) · [扩展](#-扩展) · [安全](#-安全模型) · [配置](#%EF%B8%8F-配置) · [质量](#-真实模型质量基线) · [开发](#-开发与验证)

</div>

为 DeepSeek Harness（DSH）提供生成式、可交互的 UI。用户用自然语言提问，Agent 自行决定怎样作答：

• 普通文本：用文字最清楚的时候；
• 原生组件：看板、数据表格、图表、散点图与热力图、时间线、带滑块的函数图像、KaTeX 公式、Mermaid 流程图、代码差异、文件树、JSON 树、表单和选择题卡片；
• 完全自定义的沙箱实时组件：Three.js 三维场景、Canvas 模拟、小应用。

界面随回答流式、渐进地出现。排序、筛选、滑块、旋转、缩放、切换标签页都在浏览器内即时响应，只有显式操作（按钮、表单、选择题、Bridge.sendPrompt）才会回到 Agent，可以在当前会话中继续，也可以新开会话。

本插件把 CopilotKit OpenIntelligentUI 的思路（Open Generative UI + A2UI 风格声明式组件）移植到 DSH 自带的扩展点上，不依赖 CopilotKit、LangGraph 或外部路由服务。

✨ 亮点

<table>

<tr>

<td width="33%" valign="top">

🧠 自主决策

无需任何命令。每一轮由 Agent 依据系统提示，自行选择文本、原生组件或实时组件。

</td>

<td width="33%" valign="top">

⚡ 流式渐进

JSON 还在生成，组件就已出现。实时组件在同一个 iframe 中 morph 并原地定稿，不重建、不闪烁。

</td>

<td width="33%" valign="top">

🖱️ 本地优先

排序、搜索、筛选、分页、导出、悬停、滑块、旋转、标签页都在浏览器内完成，不调用模型。

</td>

</tr>

<tr>

<td valign="top">

🧩 26 种组件

从卡片、标签页到数据表格、Scatter、Heatmap、Plot、Math、Mermaid、CodeDiff 和 Choice，渲染前先校验。

</td>

<td valign="top">

🔒 默认沙箱隔离

不透明源 iframe、严格 CSP、带 token 的消息校验、限流的 Bridge，全部在真实浏览器中实测。

</td>

<td valign="top">

💾 状态不丢失

标签页、排序、筛选、表单值、滑块和 UI.state 在回合折叠、原位修改、页面刷新、中途停止后都能恢复。

</td>

</tr>

</table>

🎬 演示

真实 DeepSeek 模型，端到端

https://github.com/user-attachments/assets/e4eb0adc-659e-4c80-b473-449aa42ca00f

<img align="right" width="110" src="https://raw.githubusercontent.com/dreamfarer-space/deepseek-harness-intelligent-ui/main/scripts/eval/demo/assets/whale/greet.webp" alt="担任演示解说的 DeepSeek 鲸鱼娘">

[质量基线](#-真实模型质量基线)的全部 11 个浏览器用例，由 deepseek-flash 在 DSH Web 0.2.0-rc.1 中现场生成（2026-10-16）：纯文本、图表、数据表、表单回传、Plot、Three.js 与「让模型修复」、停止 → 重新生成、两轮原位修改、Fast 3G、CDN 不可达、手机宽度。失败原样保留并标为 ✗。由 DeepSeek 鲸鱼娘解说（见[致谢](#致谢)）。完整视频：[docs/assets/real-model/demo.mp4](docs/assets/real-model/demo.mp4)（2 分 27 秒）。

<details>

<summary><b>🖼️ 结果一览</b>（各用例截图）</summary>

<br>

多系列柱状图：✗（调用中途被截断） · ui_patch 两轮原位修改：✓

!图表 · !原位修改

图表内容正确，但卡片显示「生成已中断」 · 「改成折线图」→「加上小程序 30/45/60/80」：同一张卡片，第 3 版

提交表单 → 模型使用提交的值：✓ · 阻尼振动 Plot，滑块实时重绘：✓

!表单回传 · !Plot

Three.js：✗，再由「让模型修复」修好 · 中途停止 → 重新生成：✓

!Three.js 修复后 · !重新生成

Fast 3G、禁用缓存：✓ · CDN 不可达：✓（按设计降级）

!弱网络 · !无网络

手机宽度（390 px）：✓ · 可排序数据表：✗（Agent 去查资料了）

!移动端 · !数据表

无法播放视频的页面（如 npm）可以看 GIF 版：demo.gif。

</details>

功能一览

以下视频都是在 DeepSeek Harness 桌面版中通过 magpie 调用真实 DeepSeek 模型现场录制的，没有脚本化回答。镜头跟随鼠标，放大到正在操作的区域；等待模型回答的部分做了快进（右上角显示倍速）。

Choice：选一个方案，在当前会话中继续或新开会话 · DeepSeek-V4.1-Flash

https://github.com/user-attachments/assets/1317993c-17b1-4fca-9356-c365afcc6101

Table 数据表格：按类型排序、搜索、按列筛选、分页、导出 CSV · DeepSeek-V4.1-Flash

https://github.com/user-attachments/assets/be9c74e4-2ed3-402c-bd08-d57ea8516eec

Scatter 与 Heatmap：悬停、点按、键盘查看；缺失值用斜线标出，不显示为 0 · DeepSeek-Flash

https://github.com/user-attachments/assets/cb575946-bab5-4551-9621-489dee55df07

CodeDiff、FileTree 与 JsonView：代码按文本显示、上下文可折叠、复制 JSONPath · DeepSeek-Flash

https://github.com/user-attachments/assets/75900041-3880-4e21-97f8-21bfd41872ad

🚀 快速开始

需要 DeepSeek Harness 0.1.7 – 0.2.x（`>=

…(truncated)