Preface¶

DeepSeek Harness (dsh) is an open-source agent framework developed by DeepSeek, whose official positioning is “Everything is a Plugin”: models, tools, skills, conversations, sandboxes, and even interfaces can all be added or removed via plugins without modifying the framework’s source code. When chatting with models in the daily Web UI, the results are mostly just text, a Markdown table, or a static Mermaid diagram. For content like sorting processes, parameter simulations, and solution comparisons, plain text often requires repeated explanations and is not convenient for hands-on adjustments.

That is exactly what dsh-visualize was built for. After the model calls visualize, an interactive card will directly appear in the web conversation, which can be used as a simulator, chart, comparison panel, or UI mockup. It is maintained by Nagi-ovo and categorized under “Interface Enhancements” in the community directory. This article was written after cross-verifying the plugin directory page and the GitHub repository. It should be noted that the DeepSeek Harness plugin library (deepseek-harness-plugin.com) is an independent community directory and has no official affiliation with DeepSeek / Huanfan, and should not be treated as an official app store.

What is it¶

dsh-visualize is an interface enhancement plugin for DeepSeek Harness. Its npm package name is @dsh-external/dsh-visualize, licensed under BSD-3-Clause, and its main language is TypeScript. Verified on GitHub on 2026-08-17, the repository has approximately 160 stars; the directory page shows 90 stars at the time of inclusion, so star counts shall prevail based on the repository’s primary data. The current package.json version is 0.1.2.

The problem it solves is very specific: allowing the model to not only output a piece of text but also render an HTML fragment into a sandboxed card in the conversation. Users usually do not need to write tool calls themselves, just tell the model what they want to see; the plugin will register the visualize tool along with a同名 skill, agreeing on how the fragment should be written, how theme variables are used, and which external resources can be loaded.

Core Features¶

In-conversation interactive cards. After the model writes an HTML fragment and calls visualize, the Web UI will insert an interactive card into the conversation flow. The repository README states that applicable directions include simulators, charts, comparison panels, and UI mockups. The bundled skill further defines the applicable boundaries: cards are only worth outputting when there are adjustable parameters, animations, or interactions; if a static node diagram can clearly explain the content, Mermaid should be used instead; when the user wants a real website, page component, or independent file, it should be saved to project files rather than placed in a conversation card.
visualize tool and bundled skill. The tool is registered to ctx.tools on the node side, and the visualize skill is registered to ctx.skills. The browser side then mounts the sandboxed card using the same tool name. In the current source code, the default action is create, which directly passes the markup as the fragment parameter, with optional title and mode; to correct a rendered card, use action: "update" to perform a precise old_str / new_str replacement based on the card’s path. The repository README previously wrote visualize(path, title?, mode?), which is inconsistent with the current tool implementation. After installation, refer to the repository source code and bundled skill as the standard. Side-by-side comparisons can use mode: "wide", while single charts or full-page mockups retain the default inline mode.
Streaming preview and session replay. The card will start appearing while the model is still generating the fragment. The completed fragment will be written to the viz/ directory of the conversation workspace, and the meta information of the tool result will also include the complete fragment. When replaying a session, it recovers from the persisted tool results without relying on whether the original fragment file still exists on disk.
Theme following and sandbox isolation. The card follows DSH’s light/dark theme and whale blue color scheme. Rendering takes place in a sandboxed iframe with an opaque source and cannot access the host page. The CSP will block network requests, nested pages, and form submissions, only allowing static resources to be loaded from fixed CDNs: cdnjs.cloudflare.com, esm.sh, cdn.jsdelivr.net, unpkg.com, fonts.googleapis.com, fonts.gstatic.com, fonts.bunny.net. The default limit for a single fragment is 1000000 bytes, which can be adjusted via the configuration item maxFragmentBytes.
Degradation for non-Web clients. package.json marks the client platform as web. Currently, interactive cards are only rendered in the Web UI; TUI and headless clients will display normal tool results instead. Buttons inside the card currently cannot send follow-up messages to the main conversation. The repository README states that the inspiration comes from the /visualize feature of the Codex desktop client; the layered reference of the skill and the priority roadmap for Chart.js were borrowed from generative-ui in himself65/finance-skills.

Installation and Activation¶

The installation command provided on the community directory page can be run in the DeepSeek Harness terminal:

dsh plugin add github:Nagi-ovo/dsh-visualize

The repository README recommends installing it to the web profile, since interactive cards are only rendered in the Web UI:

dsh plugin --profile web add github:Nagi-ovo/dsh-visualize
# If dsh web is running, restart it and refresh the page

The directory page reminds users: for reproducible installations, pin the commit hash, replace the commit below with the actual commit from the repository:

dsh plugin add github:Nagi-ovo/dsh-visualize#commit

After installation, you can use the following command to confirm that the plugin has been added to the final configuration:

dsh --profile web --dump-config

When you need to modify the source code, clone the repository and run dsh plugin --profile web add . in the repository directory. The README states that the build artifacts have been committed, so no additional build steps are required. Users who use the community plugin-registry (https://github.com/dsh-external/plugin-registry) can also install it from “Settings → Plugins”.

The plugin runs with the permissions of the current dsh process, and may execute code during installation. Please check the source code repository and license before installing.

Typical Usage¶

After installation, simply tell the model what you want to see in natural language. The example given in the repository README is:

Make a sort algorithm visualization with adjustable parameters

The model will first load the bundled visualize skill, write an HTML fragment, and then call visualize. Users usually cannot see the tool parameters; if you want to understand the calling method against the source code, the current implementation is roughly as follows:
- create (default): pass in fragment (literal HTML, do not include <html> / <head> / <body> / <!doctype> document skeleton), with optional title and mode.
- update: pass in the path of an existing card, title, and a precise old_str → new_str replacement. The skill agrees that patch updates (fewer than 20 lines, fewer than 5 changes, up to 4 times per round) are suitable for small corrections, while larger changes should use create again.
- mode: "wide": reserved for multi-panel layouts that require side-by-side comparisons.

The skill also agrees on several fragment rules, which are useful when developing plugins or troubleshooting rendering failures:
1. Only submit the fragment; the card is responsible for the document skeleton, stylesheets, themes, and CSP.
2. The root element must have a unique ID, and scripts should use document.getElementById(...) to locate elements, do not rely on document.currentScript.
3. Inline <style> and <script> are available; fetch, XHR, WebSocket, and form submissions will be blocked by the policy, and no error prompt will appear when they fail.
4. External static resources must include fixed versions and can only be loaded from the CDNs listed earlier.
5. Use theme variables or light-dark() for colors, do not declare color-scheme yourself.

Applicable Scenarios and Notes¶

It is suitable for scenarios where: algorithms or simulations require dragging sliders to view changes; multiple sets of data need side-by-side comparisons; a clickable mockup of a product interface is needed instead of exporting an independent HTML file. It is not suitable for: just needing a static structure diagram, pages that need to be delivered to a code repository, and workflows that mainly work in TUI / headless mode.

There are several boundaries to remember when using it:
1. Interactive cards are currently only rendered in the Web UI. TUI and headless clients will only see normal tool results, do not expect the same cards to appear in the terminal.
2. Buttons inside the card currently cannot send messages back to the main conversation. When you need the model to continue based on your operations in the card, you still need to type another message in the input box.
3. Each patch will reload the card, and the user’s input, drag, scroll, or other states inside the card will be lost, so corrections should be merged as much as possible instead of making changes one by one.
4. A single fragment defaults to no more than 1 MB. For large inline data, sample it first, reduce precision, and remove unused fields.
5. The plugin runs with the permissions of the current dsh process. Before installation, you should read the source code and the BSD-3-Clause license, only install sources you trust; pin the commit when you need a reproducible environment.

Summary¶

dsh-visualize turns “the model generates an HTML fragment and the Web UI renders a sandboxed card in the conversation” into an installable DSH plugin. For people who often need to view simulations, charts, and comparison panels, it complements the interactive layer that text explanations cannot reach, rather than building another independent front-end project.

Directory page: https://deepseek-harness-plugin.com/zh-CN/plugins/dsh-visualize/

GitHub: https://github.com/Nagi-ovo/dsh-visualize

Render Interactive Visualization Cards in DeepSeek Harness Conversations with dsh-visualize