Preface¶
When building agents in DeepSeek Harness (DSH), the common practice is for the model to return only Markdown or plain text: tables must be transcribed manually, charts rely on imagination, and slightly more complex visualization or 3D exploration often requires separate scripts or frontend engineering. While there are community solutions connecting “Generative UI” to other orchestration frameworks, DSH users prefer capabilities to be hooked directly into the Harness’s own extension points without introducing CopilotKit, LangGraph, or external routers.
Below is an introduction to the client plugin deepseek-harness-intelligent-ui (npm package name of the same name) maintained by dreamfarer-space. It provides a declarative component catalog and real-time HTML components within a sandbox in the conversation flow. Its approach borrows from CopilotKit’s OpenIntelligentUI, but the implementation is tailored for DSH. The plugin is categorized as “Client” in the SkillHub Directory; source code and documentation are available in the GitHub Repository (MIT License). SkillHub is an independent community site and has no official affiliation with DeepSeek / High-Flyer.
What is this¶
In one sentence: It provides generative, interactive chat UI for DSH—users ask questions in natural language, and the Agent decides whether to answer with plain text, native components, or custom real-time components within a sandbox.
The interface is progressively rendered as the model output streams; interactions such as sorting, filtering, sliders, and tabs are handled locally in the browser. Only explicit actions like buttons, forms, multiple-choice questions, or Bridge.sendPrompt will send content back to the Agent, allowing the conversation to continue in the current session or start a new session based on the component’s design.
Core Features¶
How the Agent Selects the Presentation Method¶
The plugin injects guidance into the system prompt (src/guidance.js), allowing the model to choose one of the following paths in each turn:
- Normal Text: Greetings, brief facts, explanations, copyable code, programming tasks within the workspace.
ui_render: Structured content such as comparisons, data exploration, kanban boards, flows, formulas, function plotting, code reviews, option selection, and form collection.ui_render_widget: 3D scenes, simulations, animations, mini-games, or custom tools that are difficult to express with the component catalog.
If you need to force the UI path, you can use /ui <requirements>.
| Tool | Function |
|---|---|
ui_render |
Streams and renders native React components from a fixed catalog |
ui_patch |
Incrementally modifies the displayed interface by component ID; unchanged components retain their interaction state |
ui_render_widget |
Streams HTML/CSS/JS output in an opaque source sandbox iframe, using a single iframe throughout to avoid rebuild flicker |
Component Catalog and Sandbox Components¶
The README lists 26 types of declarative components. Before rendering, they are validated by the Host (unknown types, broken images, illegal Plot expressions, etc., will return ok:false for the model to correct). Categories include Layout (Card, Tabs, etc.), Data (Table supports sorting, searching, filtering, pagination, and CSV export), Charts (Chart, Scatter, Heatmap), Math & Diagrams (Plot, Math, Mermaid), Code Structure (CodeDiff, FileTree, JsonView), and interactive components like Form and Choice.
ui_render_widget follows the streaming field order of OpenIntelligentUI and provides global UI helpers (such as UI.three, UI.canvas, UI.state). The sandbox defaults to strict CSP, a token-verified message channel, and rate-limited Bridge.sendPrompt.
Streaming, Local-First, and State¶
The highlights are summarized in the official documentation as: autonomous decision-making on presentation methods, components appearing before JSON is finished, table and chart operations completed within the browser without callbacks to the model, and the ability to recover tabs and UI.state after round folding, in-place modification, refresh, or generation stop (specific behaviors are detailed in the “Display Location and State Persistence” section of the README).
Installation and Activation¶
Environment requirements (from the Chinese README):
- DeepSeek Harness 0.1.7 – 0.2.x (
>=0.1.7-rc.1 <0.3.0) - Node.js ≥ 22.13
- Windows, Linux, macOS
The npm package comes with a pre-built browser bundle; installation requires no compilation.
Add the plugin under the Web profile:
dsh plugin --profile web add deepseek-harness-intelligent-ui
Restart DSH Web (dsh web) after installation. For the desktop version, enter the same package name deepseek-harness-intelligent-ui in Plugins → Add plugin.
Optional: Use the guided installer, which checks Node, dsh version, pnpm, and profile before executing the equivalent dsh plugin add:
npx deepseek-harness-intelligent-ui install
npx deepseek-harness-intelligent-ui doctor
Upgrade example:
dsh plugin --profile web add deepseek-harness-intelligent-ui@latest
Uninstall:
dsh plugin --profile web remove deepseek-harness-intelligent-ui
If prompted that pnpm is missing, follow the README instructions to run corepack enable or npm i -g pnpm. If the interface does not appear after installation, confirm that you have restarted and are using the profile specified during installation.
Typical Usage¶
After the installation and restart described above, you can try it out without additional commands: describe the task you need visualized in natural language, and the Agent will choose text or UI tools according to the guidance.
Example questions provided in the README include:
- “Compare Q1–Q4 revenue by channel” (suitable for table or chart-based
ui_render) - “Let me explore x²+y²+z²=2Rz in 3D” (more likely to trigger
ui_render_widget)
If a user says “change the bar chart to a line chart,” the model can use ui_patch to incrementally update the original card. The Choice component supports continuing in the current session or starting a new session with a self-contained prompt.
To change default behavior, an intelligent-ui config line is inserted via bundle patch after installation; you can override this in the profile’s cordis.patch.yml, for example, to allow the sandbox to access CDNs:
- id: intelligent-ui
config:
allowNetwork: true
cdnAllowlist: [https://esm.sh, https://cdn.jsdelivr.net]
For more configuration options (enableCatalog, enableWidget, etc.), see the “Configuration” section of the repository README.
Use Cases and Notes¶
Who it is for: Developers and teams already using real DeepSeek models on DSH Web or Desktop who want sortable tables, charts, formulas, Mermaid, code diffs, or lightweight 3D/Canvas demos to appear directly within the conversation. Extender developers can also refer to the documentation to register third-party components, controlled data, and the portable renderer renderer/renderer.js.
Usage Notes:
- The plugin is loaded with the DSH process and possesses the same permission boundaries as the current Harness; please read the source code and MIT license before installation, and only install the npm package from trusted sources.
- Real model quality varies by task: In the
deepseek-flashquality baseline published in the README, some cases are marked as failures (such as stream interruptions or the Agent not selecting the table component), indicating that routing still depends on model performance and you cannot assume the correct tool will be selected every time. - The DSH version must be within the compatibility range declared in the README; coexistence with the old package name
dsh-intelligent-uiwill cause conflicts. For upgrade paths, see the “Troubleshooting” section of the README.
Conclusion¶
deepseek-harness-intelligent-ui connects declarative generative UI and sandbox real-time components to DSH’s built-in extension points: streaming graphics, local interaction, and returning to the Agent only upon explicit action. If you are doing data comparison, visual exploration, or conversational gadgets in DSH, you can learn about the collection information from the directory page and install it for a trial using the official commands.
- Directory Page: https://www.skillhub.cn/plugins/dreamfarer-space/deepseek-harness-intelligent-ui
- GitHub: https://github.com/dreamfarer-space/deepseek-harness-intelligent-ui