Introduction¶

In the DSH (deepseek-harness) chat client, model outputs such as SVG, HTML, or chart data typically appear only as code blocks; to see the effect, one must manually copy them to a file and open it. dsh-visualizer solves exactly this problem: it is an external plugin that does not modify the DSH source code, allowing the model to directly render structured charts and SVG/HTML widgets within the chat stream—charts are drawn with echarts, and widgets are displayed as they are generated.

Below is an introduction to its positioning, core features, installation methods, and typical usage.

What is it¶

dsh-visualizer is maintained by Moses14159, current version 0.3.0, MIT license. One-sentence description: it does not modify the DSH source code, allowing the model to instantly generate visual content in the chat stream—streaming SVG/HTML widgets, and structured charts (ChartSpec → echarts).

In terms of implementation, it reuses DSH’s existing assistant/chunk and tool/call + tool/result session events, without modifying the DSH source code. The plugin targets the web platform, with the client injecting @deepseek-ai/dsh-client-runtime.

Core Features¶

Two types of output, three delivery paths¶

Structured Charts: The model calls the visualize tool and passes a spec, supporting bar/line/area/pie/scatter, rendered with echarts, and follows DSH themes (--dsw-alias-* tokens).
Streaming Widgets: The model writes svg/html fences directly in the response. The plugin reuses existing assistant/chunk events, rendering content to a sandboxed iframe token by token, updating frame by frame as it generates.
Full Widgets: The model delivers a complete widget via the widget parameter of visualize, passing validation and persistence, allowing playback on the host.

Bi-directional Validation¶

The host-side execute and the client-side rendering share the same set of pure function parsers (chartspec/widget). If there is a drift in the model’s output, it will not pass validation silently.

Security Isolation¶

Widget code is inserted into a sandbox="" iframe as-is, combined with CSP default-src 'none'. There is no sanitizer that can be bypassed by design; isolation is achieved through the iframe sandbox.

Rendering Experience and Fallback¶

SVG scales according to its intrinsic aspect ratio; cards include fit/1.5×/2× scaling and status badges (generating/truncated/done).
Graceful degradation on validation or rendering failure: falls back to a plain code block or JSON card, without leaving blank lines or throwing errors.

Pure Modules, Independently Testable¶

Core logic is written entirely as pure modules that do not depend on DSH, with 97 unit tests that can run independently in Node.js.

Installation and Activation¶

First, confirm prerequisites: DSH (deepseek-harness) is installed locally and dsh web is available; Node.js 20+ (engines: node >=20); the plugin depends on DSH’s @deepseek-ai/dsh-client-runtime, @deepseek-ai/dsh-llm, @deepseek-ai/dsh-tools (see peerDependencies).

Once the conditions are met, use the official command to install the plugin into the web profile:

dsh plugin --profile web add github:Moses14159/dsh-visualizer

Two notes:

Plugins installed from Git are built via a prepare script during installation. For security reasons, pnpm blocks build scripts by default; if prompted during installation, you need to add the corresponding allowBuilds key to the profile’s pnpm-workspace.yaml and rerun the install command.
The README mentions that once dsh-visualizer is published to npm, it can also be installed by name: dsh plugin --profile web add dsh-visualizer.

After installation, the plugin registers the visualize tool and injects @deepseek-ai/dsh-client-runtime on the client side.

Typical Usage¶

After the steps above, open a conversation in dsh web and simply speak to the model. The examples below are from the README and can be reproduced.

To get a structured chart, say “draw a chart with visualize”. The model will call visualize and pass a spec. The chart payload looks like (kind supports bar | line | area | pie | scatter):

{ "spec": {
    "kind": "bar",
    "title": "Shenzhen · 7-day temperature",
    "xAxis": ["Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri"],
    "yName": "°C",
    "series": [{ "name": "Max", "data": [32, 32, 30, 31, 29, 31, 32] }]
} }

To get a streaming widget, say “write an SVG badge / HTML widget”. The model will write svg/html fences directly in the response (fences contain <svg>…</svg> or HTML), rendering frame by frame as it generates.

To get a full widget card, say “Help me generate a weather card for Shenzhen right now”. The model will call visualize and pass a widget parameter (HTML), rendering it as a sandboxed widget card. The widget payload looks like:

{ "widget": { "kind": "svg", "code": "<svg ...>…</svg>", "title": "Card title" } }

There are two more phrases you can try directly:

“Use visualize to draw a chart of tomorrow’s 24-hour temperature change in Beijing”: The model passes a spec (line) and renders it with echarts.
“Draw a bar chart, a pie chart, and a weather card at the same time”: The model calls visualize multiple times and arranges the charts and cards within the conversation stream.

README Tip: These examples require the model to load the visualize tool (registered after plugin installation). If the model does not call it proactively, simply describe the desired effect clearly, and it will tend to call visualize.

Suitable Scenarios and Notes¶

Suitable audience and scenarios:

Developers who debug models daily in the dsh web client and want to see charts, badges, and cards directly in the conversation instead of copying code blocks.
Scenarios where the model needs to output structured charts (trends, proportions, scatter plots, etc.) or widgets.
Developers who want to understand how to write a DSH external plugin without modifying the source code: the plugin’s core logic is pure modules that do not depend on DSH; the source code and 97 unit tests are in the repository.

Pre-use notes:

The plugin runs with the permissions of the current dsh process. Before installing any third-party plugin, it is recommended to check the source code and license; this project’s license is MIT, and the source code is in the GitHub repository.
Environment requirements: Node.js 20+, DSH installed locally and dsh web available.
If pnpm blocks build scripts when installing from Git, handle it according to the allowBuilds instructions in the Installation section.
Widget code runs by being inserted into a sandbox="" iframe with CSP default-src 'none', without passing through a sanitizer; maintain normal judgment regarding content generated by the model.

Summary¶

The value of dsh-visualizer lies in its short path: by not modifying the DSH source code and reusing existing assistant/chunk and tool/call + tool/result events, the model can render structured charts and SVG/HTML widgets within the conversation stream; bi-directional validation, iframe sandboxing, and failure fallbacks are all clearly designed, and the core logic is independently testable.

GitHub Repository: https://github.com/Moses14159/dsh-visualizer
Community Plugin Directory: https://www.skillhub.cn/plugins/Moses14159/dsh-visualizer (This directory is an independent community site with no official affiliation with DeepSeek or HF)

dsh-visualizer: Directly render charts and widgets in the conversational flow without modifying DSH source code.