Introduction

In DeepSeek Harness use cases, after a model generates SVG or HTML source code, it is often difficult to preview and interact with it directly in the conversation flow. The dsh-visualizer-widget plugin solves this problem by decoupling the rendering process from the model context and directly generating interactive cards in the session flow. The plugin implements secure isolation through an iframe sandbox, ensuring that the source code is displayed only inside the card and does not affect the model context.

Core Features

The plugin registers two tools and one session command:

  1. render_visual: Renders SVG/HTML source code into inline cards in the session flow. Supported features include toggling between preview and source code, adjustable height presets, light/dark background switching, popup full-screen view, re-rendering, downloading source code, saving as an image, and copying source code.
  2. get_visualizer_spec: Returns the full text of the unified rendering specification. The content includes a 680 viewBox baseline, font size and font weight constraints, a 9×7 color palette, light and dark color schemes, routing rules for chart types, and notes on export pitfalls. Calling this tool before generating visual content helps maintain visual consistency.
  3. Secure isolation: Cards are rendered in an iframe sandbox and only allow scripts, popups, and forms permissions, without allow-same-origin. This means scripts inside the card cannot access the main page DOM or storage, preventing security risks.
  4. Prompt injection control: By default, the plugin does not inject content into the system prompt. If you want to force the model to prioritize inline rendering every turn, you need to manually enable this option on the plugin settings page.

Installation and Enabling

Before installing, please make sure the environment meets the dependency requirements: @deepseek-ai/cordis, dsh-llm, and dsh-tools are required, with versions 0.2.0-rc.1 or 0.1.7-alpha.1.

Use the official install command:

dsh plugin --profile web add github:lovezi0/dsh-visualizer-widget

Typical Usage

  1. On-demand trigger: In the input box, type /visual followed by a requirement description, for example /visual draw a three-column architecture diagram. The model will immediately call render_visual to render it.
  2. Prioritized rendering every turn: On the plugin settings page (path: Settings → Plugins → dsh-visualizer-widget), enable “Prompt injection”. Once enabled, the model will prioritize inline card rendering instead of directly outputting code or writing files.

Notes

  1. Source code and context decoupling: render_visual returns only a one-line summary (format, character count, height) to the model context. The complete source code is retained only in the tool result and the card, and does not enter the model context.
  2. Secure isolation mechanism: Because the iframe does not include allow-same-origin, scripts inside the card cannot manipulate the main page DOM or read storage.
  3. Source code retrieval: The complete source code exists only in the tool result and the card, and is not output through any other channel.

Summary

dsh-visualizer-widget standardizes visualization capabilities in session flows. Through tool calls and command triggers, it enables model-generated content to be rendered and viewed immediately. Combined with get_visualizer_spec, developers can control the visual style of generated content.

  • GitHub: https://github.com/lovezi0/dsh-visualizer-widget
  • Directory page: https://www.skillhub.cn/plugins/lovezi0/dsh-visualizer-widget