genui

🎨 dsh-genui

English · 简体中文

Open the live product site · Watch the real demo · Install in DSH

Give the model's answers a face — the text is still there, and an interactive UI is already live.

🔌 Ecosystem: the repo carries the #dsh · #dsh-plugin topics — welcome to be listed by @dsh-plugin.

dsh-genui turns a model reply into a safe, interactive DSH surface. Ask “how are this month’s orders doing?” and the answer can include a sortable data panel, a native video, a draggable plot, a local quiz, or a persistent session panel — without replacing the surrounding text.

Start with the evidence

Watch the real interface

No concept mockups. The recording and images in this section are captured from dsh-genui rendering in the DSH interface. Use them to see the actual visual language before installing.

40-second walkthrough

https://github.com/user-attachments/assets/f5db33ec-7471-4d4a-a85b-79c9962ab4ef

The walkthrough moves from an answer-embedded panel through forms, plotting, Mermaid, and 3D-oriented components. The player does not auto-play. If it does not load, use the original MP4; the four-step prompt sequence is documented in demo-prompts.md.

Three real outputs inside a DSH reply

1. A monitoring panel is an answer, not a separate dashboard

2. A function plot redraws locally as its parameters change

3. Layout primitives compose into structured work surfaces

---

⚠️ Read this first: dual-channel rendering (no host source patch required)

The plugin ships two rendering channels and picks one automatically after the host activates its browser module:

• Registry channel: when the host exposes the fence-registry extension point (newer dsh builds), fences register through the host's streaming render pipeline and behave seamlessly with the host;
• DOM channel: when the host lacks that extension point (including supported stock DSH builds), the plugin observes the session DOM and mounts its own render tree. Since 0.7.2 it supports streaming rendering: components appear as the model writes them — the first finished component shows up immediately, no need to wait for the whole reply. Since 0.8.3 fence discovery is multi-surface: it matches the stock md-code-block surface, the deepsuite-style .code-block / .code-block-small surfaces some host builds render instead, and — as a structural backstop — any element whose banner labels it dsh-ui and contains a <pre> body. If your dsh build renders fences with a different class name, they still render (and a one-time console warning tells you the host DOM drifted).
• DSH 0.1.7 generic code banner: when the host's final DOM omits fenced-code language metadata, dsh-genui reads the current assistant's original Markdown from the public ChatSnapshot and only takes over dsh-ui fences. The DOM identifies the mount location. If source data is temporarily unavailable, a settled assistant CodeBlock can use the strict canonical GenUI validation as a final fallback.

Whichever channel is active, components, interactions, panels, and persistence behave identically.

CI's packed host smoke installs the generated npm tarball in a real DSH host and verifies host startup and rendering. Source-backed fence routing is covered by integration tests; the smoke does not claim to validate a real model response. Real-model E2E requires configured model credentials.

The repository ships both renderer channels, the host plugin, and the built browser bundle. The host still owns client activation and must provide the slots and sessions services. A downloaded client.js or a ModuleLoader cache entry proves only that bytes arrived — successful activation always prints [genui] client active; fence-channel=registry|dom. If that line is absent, fix package/profile identity or host activation first; DOM attributes such as data-streaming and data-chat-anchor-key are optional fallbacks, not installation prerequisites.

---

✨ Before vs. after

🚀 Quick start

Prerequisites — all required:

1. dsh ^0.1.2-rc.1 || ^0.1.5-alpha.1 || ^0.1.6-alpha.1 || ^0.1.7-alpha.1 || >=0.2.0-rc.1 <0.3.0-0 (DSH 0.2.1-alpha.1 is currently a prerelease; verified host roles: minimum dsh-v0.1.2-rc.1, current dsh-v0.2.0-rc.2, next dsh-v0.2.1-alpha.1; users on DSH <=0.1.1-rc.x should use dsh-genui 0.9.8)
2. pnpm on your PATH: the dsh plugin command depends on it. If missing: corepack enable (or npm i -g pnpm), then open a new terminal and confirm pnpm -v prints a version

Install and activate in DSH (one command, all dependencies included):

# Public npm package (works without an npm account)
dsh plugin --profile web add @changfenhuang/dsh-genui

To add it only as a Node dependency in an existing project:

npm install @changfenhuang/dsh-genui

npm install only adds the dependency; it does not register the plugin with DSH. Use dsh plugin add above when installing it into DSH.

⚠️ Don't use link: on a freshly cloned directory — link: does not install the plugin's dependencies (mermaid / three / react), so the renderer will break. Use the npm command above for normal installation; reserve link: for local development iteration (see below).

Package name and version matter

• The scope matters: npm also hosts a same-named, unscoped dsh-genui (a Vue/OpenTiny implementation by a different maintainer, unrelated to this repo). If an install listing describes "interactive charts, forms, calculators, dashboards, and mini apps