DeepSeek Harness (DSH) supports plugin-based extensions. The dsh-raw-html plugin aims to solve the problem that HTML code output by an Agent is displayed only as plain text. It uses the VCP (Visual-Synesthesia) protocol specification to render the code into a real UI interface, and supports rendering cards, mathematical formulas, charts, and fonts.

Plugin Positioning

This is a VCP Visual-Synesthesia protocol specification plugin. It is maintained by developer plolpl789 and currently has 65 stars. It converts DeepSeek Harness HTML output into interactive visual components, helping the Agent output content according to a maintainable design specification.

Core Features

The plugin provides the following core capabilities:

  • VCP Visual-Synesthesia protocol support: Establishes a unified visual output specification.
  • HTML/SVG card rendering: Renders HTML/SVG in code blocks as UI components.
  • KaTeX mathematical formula rendering: Supports visual display of mathematical formulas.
  • Mermaid chart rendering: Supports rendering diagrams such as flowcharts and sequence diagrams.
  • Built-in curated fonts: Includes seven open-source fonts (Wenkai / Wenkai Light / Ma Shanzheng Kaiti / Source Han Sans / Source Han Sans Light / Source Han Sans Bold / GreatVibes Script), all OFL-licensed and usable with zero configuration.
  • vcp-fast cache incremental acceleration engine: Substantially improves rendering performance through container-aware block-level caching and incremental appending.
  • Trusted mode and security filtering: Provides a security filtering mechanism that allows only controllable events such as onclick bridges, preventing script injection.

Installation and Activation

The installation process consists of two steps: patching and plugin registration.

  1. Run the One-Click Installer (recommended). This command installs both the rendering capability patch and the trusted-mode patch:
    node "本插件路径\patch\install-all.cjs"
  1. Register the plugin:
    dsh plugin --profile web add "本插件路径"

  1. Restart and refresh. Restart the DSH service and refresh the browser page (recommend using Ctrl+F5 to clear the old cache).

  2. Enable switch. In the browser interface, turn on the 「</>」 switch to enable HTML rendering and aesthetic injection.

Usage

After enabling the plugin, the Agent can receive VCP protocol instructions:

  • Browser switch: Click the 「</>」 button next to the send button, then choose “Render HTML” (rendering only) or “ON” (rendering + aesthetics).
  • Interaction bridging: Click the VCP button, and use the onclick="input('...')" bridge to fill the content into the input box and send it.
  • Protocol output: After receiving the protocol, the Agent automatically outputs a standardized #vcp-root visual container.

Important Notes

  • No empty lines inside vcp-root. This is a characteristic of Markdown HTML blocks. If two consecutive line breaks (\n\n) appear inside <div id="vcp-root">, the card will be parsed as broken, causing style corruption. All child elements must use a single line break or be arranged on a single line.
  • Security notice. The plugin filters scripts and dangerous protocols, but styles and external images remain reachable. Enable it only with trusted models to avoid potential risks.

Maintenance

  • After modifying the code, it is recommended to run node --check lib/client.js and node --check lib/index.js to validate the syntax.
  • After a DSH upgrade overwrites the frontend files, run node patch/install-all.cjs again to reapply the patch.
  • All third-party dependencies must be explicitly declared in package.json to ensure stable module resolution.