Preface¶

DeepSeek Harness (DSH) breaks down agent capabilities into plug-and-play plugins, allowing dialogue, tools, and interfaces to be extended as needed. However, in the default experience, model responses are mostly plain text—tables need to be formatted mentally, charts are only visible as ASCII art, and buttons cannot truly trigger the next step.

If you desire a response where “a question yields an answer alongside a sortable table, a draggable function graph, or an interactive form that can be clicked and filled,” the community plugin dsh-genui is designed specifically for this purpose. Maintained by omdsh-dev, it is categorized as a client plugin in the SkillHub Plugin Repository, with approximately 326 stars on GitHub (MIT license). It’s important to note: SkillHub has no official affiliation with DeepSeek or幻方 (High-Flyer); it is simply a community-curated directory for DSH plugins. DSH itself adheres to the “everything is a plugin” extension philosophy.

What Is This¶

dsh-genui is a GenUI (generative UI) solution for DeepSeek Harness. The model outputs dsh-ui fences (fences) in its responses, and a browser-side renderer converts the JSON descriptions within them into inline, interactive UI components—layouts, stat cards, tables, charts, forms, quizzes, Mermaid diagrams, 3D scenes, and more—all embedded directly within the assistant’s reply, without the text disappearing.

This repository delivers three main components:

1. Fence teaching host plugin: Enables the model to learn how to write dsh-ui specifications.
2. Browser renderer (client half): Transforms fences into real components within the web interface.
3. genui skill: Can be copied to ~/.dsh/skills/genui/ to help the model output compliant JSON more stably.

The current npm package name is @changfenhuang/dsh-genui (renamed from the old @omdsh-dev/dsh-genui starting from v0.9.2).

Core Features and Highlights¶

Responses as Interfaces¶

Components are embedded in assistant replies and support streamed rendering—the interface updates in real-time as the model generates content, without waiting for the entire response to complete. Before installing the plugin, you see a code block; after installation, the same JSON becomes a stat card, trend chart, or sortable table.

30+ Whitelisted Components¶

The official documentation lists capabilities covering two main areas: data display and interaction.

• Data: stat (stat card), table (sortable table), chart / echart (ECharts integration, engine ~1 MB lazy-loaded on demand), progress (progress bar).
• Exploration: plot (function graph), with local instant redraw when dragging parameter sliders.
• Feedback: quiz (local grading and explanation), with optional action to send answers back to the model.
• Layout and Structure: cards, tabs, collapsible panels, file trees, timelines, diffs, etc.
• Rich Media: Embedded playback of http(s) audio/video accessible in the browser.
• Graphics: Mermaid diagrams, Three.js 3D scenes (both loaded on demand without slowing startup).

All components are protected by whitelist specifications: the model cannot inject arbitrary HTML or scripts, and function expressions are processed by an independent parser without using eval.

Dual Rendering Channels, No Host Source Code Modification Needed¶

The plugin includes two rendering channels. Once the host activates the browser module, the appropriate one is selected automatically:

• Registry Channel: When a newer version of DSH provides the fence-registry extension point, fences are integrated into the host’s streaming rendering pipeline.
• DOM Channel: When using the original DSH or an older build without this extension point, the plugin observes the session DOM and mounts itself, compatible with various code block surfaces.

Under both channels, component behavior, interaction, and persistence are consistent. Upon successful activation, the browser console will print [genui] client active; fence-channel=registry|dom.

Interaction Event Loop¶

Buttons, switches, input fields, dropdowns, radio buttons, quizzes, and other components can carry an action field. When a user clicks or submits, the event is passed back to the model, which updates the next segment of the UI, forming a closed loop. Debouncing with a 300ms tail edge is applied to actions with the same name to prevent rapid clicks from flooding the screen.

Additionally, there is a session panel (via the /panel command or panel: true): a draggable, height-adjustable persistent dock above the input box, suitable for monitoring dashboards or multi-tab workspaces.

Local-First and Security Boundaries¶

• Operations that can be completed locally, such as grading, expanding/collapsing, and table sorting, are performed instantly without an additional model call.
• User inputs are persisted with a “session + content fingerprint” mechanism, recoverable after refresh (LRU limit of 200 chunks).
• Passwords, API keys, and other secrets are prohibited from being requested; password fields, if they appear, are not persisted or collected by forms.
• Buttons without an action field are rendered as disabled to avoid fake interactions where “it looks clickable but does nothing.”

Installation and Activation¶

Prerequisites¶

1. dsh is installed locally (any build of the open-source version is acceptable).
2. pnpm is in PATH—the dsh plugin command depends on it. If not installed, you can run corepack enable (or npm i -g pnpm), then open a new terminal and confirm pnpm -v outputs a version.

Installation Commands¶

Install and activate within DSH (choose one):

# npm public package (no npm account required)
dsh plugin --profile web add @changfenhuang/dsh-genui

# Install from GitHub public source code
dsh plugin --profile web add git+https://github.com/omdsh-dev/dsh-genui.git

If you previously installed the old package name before v0.9.2, you need to migrate first:

dsh plugin --profile web remove @omdsh-dev/dsh-genui
dsh plugin --profile web add @changfenhuang/dsh-genui

Alternatively, you can clone the repository and run the one-click script:

git clone https://github.com/omdsh-dev/dsh-genui.git
cd dsh-genui
./scripts/install.sh

Note: Do not use link: pointing to a directory that has just been cloned and not yet run pnpm install—link: will not automatically install dependencies like mermaid/three/react, and the renderer will fail. For local development and iteration, run pnpm install first, then dsh plugin --profile web add link:$PWD.

After installation, restart dsh web and perform a hard refresh in the browser to verify in a new session.

Typical Usage Examples¶

60-Second Smoke Test¶

In a new session, enter:

用 dsh-ui 画一个带可排序服务表的统计看板。

If installed successfully, the response should transform into a dashboard in place, rather than remaining as a code block. Open the browser console; you should see [genui] client active; fence-channel=registry|dom.

What a Fence Looks Like in Model Output¶

Here is an example from the official README (you don’t need to write this manually; the model will generate it):

{"title":"订单概览","items":[
  {"type":"stat","label":"总收入","value":"¥128,430","delta":"+12.4%"},
  {"type":"stat","label":"订单数","value":"1,024","delta":"-3.1%"}
]}

The interface will display two stat cards. For a bar chart, you can have the model output a fence with an echart node, e.g., with preset: "bar" and a data array.

Capability Map Quick Reference¶

For the complete component JSON syntax, see SKILL.md in the repository.

Use Cases and Considerations¶

Who Should Use It:

• Developers who frequently perform data analysis, operations monitoring, or teaching demonstrations in the DSH web interface.
• Users who want the model to “draw interfaces while explaining,” instead of repeatedly copying Markdown tables.
• Agent scenarios where buttons and forms need to pass user actions back to the model to drive the next inference round.

Before Using, Please Note:

1. The plugin runs with the permissions of the current dsh process. Before installation, read the GitHub source code and the MIT license to confirm you accept its behavior.
2. If fences still display as code blocks, first check the console for the [genui] client active log. If absent, the client is not truly activated; verify the package name and profile configuration.
3. On first use, mermaid, three, and echarts will load JS assets from the plugin’s built-in asset route on demand. If loading fails, try uninstalling and reinstalling the plugin and updating dsh.
4. Without the plugin installed, dsh-ui fences are just ordinary code blocks—they won’t cause errors or pollute the session—a “zero disruption” design.

Conclusion¶

If you’re tired of “screens full of text, relying on imagination for charts,” dsh-genui offers a pragmatic path: the model continues to describe interfaces in JSON, and DSH transforms them into clickable, draggable, and interactable components within the conversation flow. Community directory page: https://www.skillhub.cn/plugins/omdsh-dev/dsh-genui; source code and demos: https://github.com/omdsh-dev/dsh-genui; online product site: https://omdsh-dev.github.io/dsh-genui/.