@kyoukisu/dsh-rich-ui

dsh plugin --profile web add @kyoukisu/dsh-rich-ui

<div align="center">

DSH Rich UI

ChatGPT-style rich answers inside DeepSeek Harness.

Entity collections with detail panels, KPI cards, multi-series charts, sortable tables, flow and layered architecture diagrams, calculators that recompute as you drag — rendered natively inside DeepSeek Harness.





Live demo · [Install](#install) · [Quick start](#quick-start) · [Contract](prompt-rich-ui/prompt.md) · [Design notes](docs/PARITY.md) · [Safety](#safety)

</div>

<p align="center">

<picture>

<source media="(prefers-color-scheme: dark)" srcset="docs/images/listing-desktop-dark.png">

<img alt="A product listing rendered by the plugin: summary strip, real photos, prices and a green highlight badge" src="docs/images/listing-desktop.png" width="860">

</picture>

</p>

What this is, and why

A model can describe a comparison, but a wall of Markdown makes the reader do the layout work. This plugin gives the model a small declarative language for the cases where structure carries the answer: side-by-side options, an object you want to inspect, a number the reader will change.

The renderer is a real React tree behind a strict schema. There is no generated HTML, no eval, no shell access, and no page-level JavaScript from the model. Local controls recompute in the browser; the model is only called again when the reader explicitly asks.

<p align="center">

<img alt="Film collection reflowed beside an open detail panel with two posters, facts, cast and sources" src="docs/images/films-desktop.png" width="860">

<br>

<em>In the lab the answer reflows beside the open panel. In Harness the same entity opens as a native right-column tab, so the conversation narrows instead of being covered — see <a href="docs/DSH-INTEGRATION.md">the integration notes</a>.</em>

</p>

<p align="center">

<picture>

<source media="(prefers-color-scheme: dark)" srcset="docs/images/apps-desktop-dark.png">

<img alt="Software shortlist with wide screenshots on the left, full descriptions and source links on the right, followed by a captioned screenshot gallery" src="docs/images/apps-desktop.png" width="820">

</picture>

<br>

<em><code>entity-list layout:"feature"</code> gives a software shortlist a wide preview, the whole description and its sources. Below it, a captioned gallery shows one screenshot at a time.</em>

</p>

<p align="center">

<picture>

<source media="(prefers-color-scheme: dark)" srcset="docs/images/dashboard-desktop-dark.png">

<img alt="Dashboard answer with three KPI cards, a two-series line chart, a sortable, filterable table with status pills and a vertical flow" src="docs/images/dashboard-desktop.png" width="820">

</picture>

<br>

<em>Metrics, a two-series chart with units and hover, a filterable table with status pills and an ordered flow — one document.</em>

</p>

<p align="center">

<img alt="Layered architecture: HTTP handlers containing a connection pool with three connections, an arrow to PostgreSQL, and a Go code block with syntax colour" src="docs/images/layers-desktop.png" width="820">

<br>

<em>Boxes inside boxes: the pool holds connections, the arrow shows what it talks to. The code block keeps language label, syntax colour and copy.</em>

</p>

<p align="center">

<img alt="A calculator with sliders that recompute the result locally" src="docs/images/calculator-dark.png" width="700">

<br>

<em>Sliders recompute the number in the browser; the model is not called again.</em>

</p>

<p align="center">

<img alt="The same dashboard on a 390 pixel phone: two-column KPI cards, all six chart month labels and a four-column table that fits" src="docs/images/dashboard-mobile.png" width="300">

<br>

<em>390 px: KPI cards in two columns, every chart label, and a table that still fits.</em>

</p>

Live demo

rich-ui.beako.best — the real renderer in laboratory conditions, no install. Scenarios: dashboard, films, listing, calculator, configurator, technical breakdown and the rejected-block diagnostic; add &theme=dark for the dark theme. Demo data is illustrative.

Install

Requires DeepSeek Harness 0.2.x and Node 22.19+. No NixOS change, no patched Harness.

dsh plugin --profile web add @kyoukisu/dsh-rich-ui
systemctl --user restart deepseek-harness   # or restart however your Harness runs

From a checkout — this is the loop the author uses:

git clone https://github.com/kyoukisu/dsh-rich-ui && cd dsh-rich-ui
npm ci && npm run build:plugin
dsh plugin --profile web add link:$PWD

Unreleased commits: dsh plugin --profile web add github:kyoukisu/dsh-rich-ui.

The plugin registers itself as a bundle; the fence language is rich-ui.

Quick start

Ask for something that benefits from structure, in a new session:

Compare three electric kettles by price, volume and features. Make it clickable.

The reply arrives as an interface: a summary strip, rows with photos, and a green highlight on the cheapest option. Opening a row shows facts, sources and related items without leaving the conversation.

Things worth trying: "build a budget calculator with three sliders", "show this quarter as a chart and a table", "make a configurator with tabs and conditional warnings".

##

…(truncated)