dsh-generative-ui: Let DeepSeek Harness respond with live TSX

Preface

In DSH’s intelligent conversation sessions, agents usually answer with plain text. When an answer needs to be presented as an interface, plain text feels insufficiently direct. dsh-generative-ui is a client plugin for DeepSeek Harness: the agent outputs TSX, and dsh web is responsible for real-time rendering.

What is this

The package name for dsh-generative-ui is dsh-generative-ui, the current version in package.json is 0.0.2, the license is MIT, and the maintainer is CNSeniorious000.

It enables agents to use a live React interface instead of plain text answers, rendering in a streaming manner while the model continues to output. The plugin consists of two ends:

  • lib/index.js (Node side): Injects system prompts, registers the generative-ui skill, and provides compiler WASM and canvas file reading routes.
  • lib/client.js (Web side): Takes over ui4a/tsx code blocks, compiles TSX within the browser, and mounts the canvas panel.

Core Features

  • Inline Rendering: ui4a/tsx fenced blocks are rendered in-place between response paragraphs.
  • Canvas Rendering: ui4a/canvases/<id>.ui4a.tsx files open in a panel next to the conversation and persist across turns.
  • Streaming Rendering: Generated components are continuously rendered as the model continues to output.
  • Dependencies and Themes: Generated code can resolve npm imports from esm.sh during rendering, share a single host React instance, and use application design tokens to adapt to light and dark themes.
  • Prompt Layering: src/prompt.ts carries triggers, fence syntax, canvas paths, and color tokens with each request; src/skill.ts loads on demand and handles judgment and layout.

Installation and Enablement

Installation from registry:

dsh plugin --profile web add dsh-generative-ui

To preview an unpublished commit:

dsh plugin --profile web add https://pkg.pr.new/CNSeniorious000/dsh-generative-ui@main

If developing in a local checkout:

dsh plugin --profile web add link:/path/to/dsh-generative-ui

After installation, start dsh web. If dsh web is already running, it needs to be restarted because the plugin is mounted at startup and has no hot reload.

Regarding versioning: Installing from the npm registry uses caret; the README example shows that ^0.0.1 only matches 0.0.1 under version 0.0.x. For patch versions, change to ~0.0.1. This plugin is published via CI over OIDC, and the tarball carries npm provenance.

Typical Usage

  1. Inline Usage: Instruct the agent to output a ui4a/tsx fenced block in the response, and the content will be rendered in-place between response paragraphs.

  2. Canvas Usage: Instruct the agent to generate a ui4a/canvases/<id>.ui4a.tsx file, and the content will open in a panel next to the conversation, persisting across turns.

  3. If the model doesn’t generate UI: First check the agent preset. The minimal preset does not enable the skill tool; you should use standard, or copy the preset and re-add tool-skill.

  4. Local development:

bun install
bun run check
bun run build

Use Cases and Notes

This plugin is suitable for sessions in dsh web where you need the agent to generate a live interface rather than just returning plain text.

The plugin configuration declares the client platform as web and injects:

  • @deepseek-ai/dsh-client-runtime
  • @deepseek-ai/dsh-client-locale
  • @deepseek-ai/dsh-client-ui-conversation

Precautions before use:

  • The plugin runs with the current dsh process permissions; check the source code and license before installing.
  • The license is MIT, and the current package.json version is 0.0.2.
  • Generated code will depend on npm imports and resolve them from esm.sh during rendering.
  • If the session uses the minimal preset, the skill tool will not be enabled and the model will not be informed of the format; switch to standard, or copy the preset and re-add tool-skill.
  • The plugin has no hot reload; a restart of dsh web is required after a new installation.

Conclusion

The value of dsh-generative-ui lies in extending agent responses from plain text to stream-renderable TSX interfaces, providing two presentation locations: inline and canvas.

GitHub: https://github.com/CNSeniorious000/dsh-generative-ui

Directory page given by the plugin link: https://www.skillhub.cn/plugins/CNSeniorious000/dsh-generative-ui (This URL does not appear in the body of the scraped README/package.json).

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye