The core advantage of DeepSeek Harness (DSH) lies in streaming output and real-time interaction. While developing agents or debugging UI generation, models output textual instructions, while the final artifacts are HTML documents. Seeing rendered results during the model generation process is a common requirement. The dsh-visualizer plugin fills this gap by rendering HTML in real time inside a sandboxed inline iframe.

What Is This

A DeepSeek Harness plugin that provides real-time HTML document streaming and preview.

The plugin was developed by maintainer abiddotdev and follows the MIT license. It streams self-contained HTML documents into the chat and previews them in real time inside a sandboxed inline iframe. This allows the use of external libraries such as Chart.js without touching the workspace. Generated documents can be downloaded as .html or .svg files, and before a turn closes, the Settled card remains active.

Core Features

  1. Streaming and Preview: Streams self-contained HTML documents into the chat and previews them in real time inside a sandboxed inline iframe.
  2. External Library Support: Supports external libraries such as Chart.js without touching the workspace.
  3. Download Capability: Generated documents can be downloaded as .html or .svg files.
  4. Annotation Mode: Supports annotation mode, where elements can be clicked to obtain selectors and markers, enabling precise model editing.
  5. Settled Card Behavior: Remains active before the turn closes and re-publishes the card through the turn-tail extension point.

Installation and Enablement

Before installing, confirm that the environment meets the requirements:
* The Node.js version must be ^22.19 or >=24.
* The DeepSeek Harness version must be 0.1.2-rc.1 or newer.

To install into the default profile, use the following command:

dsh plugin --profile web add 'git+https://github.com/abiddotdev/dsh-visualizer.git'

To install into a custom profile, replace <your-profile>:

dsh plugin --profile <your-profile> add 'git+https://github.com/abiddotdev/dsh-visualizer.git'

First-Run Note:
On first run, you may encounter a pnpm supply-chain security notice saying that allowBuilds must be configured. Follow the prompt to add the corresponding key under allowBuilds in the ~/.dsh/profiles/<your-profile>/pnpm-workspace.yaml file, then re-run the command.

Typical Usage

  • Version Control: Use a ref fragment to install a specific version, for example:
    dsh plugin --profile <your-profile> add 'git+https://github.com/abiddotdev/dsh-visualizer.git#v0.2.0'
  • Legacy Compatibility: If the Harness version is older than 0.1.2-rc.1, use the compatibility branch:
    dsh plugin --profile <your-profile> add 'git+https://github.com/abiddotdev/dsh-visualizer.git#pre-harness-0.1.2-alpha3-compat'
  • Use the Plugin: Start the profile and ask the model to “visualize …”. The HTML generated by the model will be rendered in real time inside the card.

Use Cases and Notes

This plugin is suitable for scenarios that require real-time generation and preview of UI interfaces, charts, or interactive documents.

Configuration Notes:
The plugin’s bundle layer automatically inserts a loader row, so configuration overrides must be made directly in the profile’s patch layer rather than nested under insert. Configuration items (such as maxArtifactBytes, guideTypes, etc.) must be written directly in the profile’s cordis.patch.yml.

Ecosystem Context:
The DeepSeek Harness philosophy is “everything is a plugin.” Community directories (such as SkillHub) are independent sites and have no official affiliation with DeepSeek / Huanfang.

Summary

dsh-visualizer provides a streaming UI generation solution without server-side round trips. By rendering and interacting directly in the client-side sandbox, it lowers the barrier for development and debugging, making the process of model-generated UI more intuitive and controllable.