omdsh-dev/dsh-genui

What is dsh‑genui?

dsh‑genui is a plug‑in for DeepSeek Harness (DSH) – the chat UI that runs DeepSeek’s large language models. The plug‑in watches the model’s output for special fenced blocks marked dsh‑ui. When it finds one, it parses the JSON inside and instantly renders a rich, interactive UI component inside the conversation instead of showing plain text or a code block.

---

How does it work?

1. Model emits a dsh‑ui fence – a JSON description of a UI component (e.g. a table, chart, plot, quiz, media player). The model can stream this JSON token‑by‑token.
2. GenUI client detects the fence in the browser DOM, validates the JSON against a whitelist, and mounts a React component tree.
3. Assets are lazy‑loaded – heavy libraries such as ECharts, Mermaid or Three.js are fetched only when the corresponding component appears.
4. Local‑first interactions (sorting a table, dragging a slider, answering a quiz) are handled entirely in the browser, giving sub‑millisecond feedback without another round‑trip to the LLM.
5. Bidirectional action loop – UI elements can carry an action payload. When the user clicks a button, the payload is sent back to the LLM, which can continue the reasoning and send a new UI fence.
6. Graceful fallback – if the plug‑in is not installed or the JSON is malformed, the fence simply appears as a normal Markdown code block, so the chat never breaks.

---

Main features (the “Capability Matrix”)

Area	What you get
Streaming & realtime mounting	UI appears incrementally as the model streams, no waiting for the whole reply.
30+ component ecosystem	Stat cards, sortable tables, timelines, code diffs, file‑tree explorers, ECharts charts, function plots with live sliders, Mermaid diagrams, 3‑D models, audio/video players, KaTeX math, quizzes, and more.
Local‑first responsiveness	Sorting, filtering, slider dragging, tab switching, and quiz grading happen instantly in the browser.
Bidirectional action event loop	Buttons can send structured events back to the model, enabling a closed‑loop conversation.
Persistent workspace & templates	A dock panel that stays across page reloads, with built‑in scenario templates and achievement badges.
Sandboxing & self‑healing	Strict JSON whitelist, no eval, automatic repair of malformed nodes, and same‑turn feedback to the model for correction.

---

Quick start for a user

# Install the plug‑in (requires pnpm)
dsh plugin --profile web add @changfenhuang/dsh-genui

1. Restart the DSH web service and hard‑refresh the browser.

2. In a new chat, ask something like:

   Use dsh‑ui to draw a stats dashboard with a sortable service table.
   

3. The reply will appear as an interactive dashboard – sortable columns, filter box, progress rings, etc., instead of a plain code snippet.

---

Example UI spec

{
  "title": "Q3 2026 Executive Overview",
  "items": [
    {
      "type": "row",
      "items": [
        {"type": "stat", "label": "Total Revenue", "value": "¥128,430", "delta": "+12.4%", "spark": [40,55,60,85,120]},
        {"type": "stat", "label": "Completed Orders", "value": "1,024", "delta": "-3.1%", "spark": [90,85,80,75,70]},
        {"type": "progress", "label": "Quarterly Target", "value": 82, "variant": "ring"}
      ]
    }
  ]
}

When the model streams this block, GenUI renders three stat cards, a progress ring and a row layout, all clickable and theme‑aware.

---

Who should use it?

• Product managers / analysts who want instant visual dashboards from natural‑language queries.
• Developers building DSH‑based assistants who need richer UI than plain text.
• Educators who can embed quizzes, plots, and media directly in a chat‑based learning flow.

---

Development & contribution

• Clone the repo, run pnpm install, then link the plug‑in into a local DSH profile with dsh plugin --profile web add link:$PWD.
• The project includes a full test suite (pnpm run test) and visual end‑to‑end checks that run Chrome headlessly.
• Exported types (GenuiBlock, processGenuiSpec) let you embed the renderer in any React app.

---

License

MIT – free to use, modify, and redistribute.