dsh-intelligent-ui

Interactive cards in DeepSeek Harness chats. The model writes a small interface program, the chat draws it as a native card, and every control recomputes in your browser without another model call. A button sends its text as your next message.

中文

Requires	DeepSeek Harness >= 0.2.1-alpha.1 (below 0.3.0)
Platforms	Web UI, macOS desktop app, and Windows desktop app — one bundle, because both desktop apps load the same web client
Verified	Web UI 0.2.1-alpha.4; macOS and Windows desktop apps 0.2.1-rc.2
Install	Settings → Plugins → Add plugin → https://github.com/StarsHarryZhu/dsh-intelligent-UI (needs git on PATH), then restart the harness and reload the page

The 27 components

One card per component, drawn by this plugin in the host's light theme. The program behind each card is in docs/SAMPLES.md.

Component	Group	What it shows	Screenshot
card	Layout	The framed root: optional title, padding, and gap.
col	Layout	A vertical stack in reading order.
row	Layout	Equal-width cells side by side; they wrap on a narrow screen.
grid	Layout	An even grid of one to four columns.
title	Text	A headline line in five sizes.
text	Text	A sentence, with {…} live values.
badge	Text	A one-word status label in five tones.
callout	Text	One emphasized remark: an assumption, a caveat, a next step.
divider	Text	A hairline separator.
link	Text	A citation link, opened only when clicked.
image	Text	An inline data: image with alt text and a caption.
metric	Data	One prominent number that recomputes as controls move.
progress	Data	A proportion bar.
table	Data	A comparison table; current= highlights a row.
keys	Data	Label and value pairs for exact figures.
list	Data	A bulleted list; current= highlights an item.
steps	Data	A numbered procedure; with mono=true and current=, a code listing with the running line highlighted.
chart	Data	A bar or line chart.
plot	Math	Curves of y = f(x) with a marked point, its tangent, and a shaded integral.
formula	Math	A typeset expression with its live value.
slider	Controls	A range slider bound to a number.
numberInput	Controls	Exact number entry.
textInput	Controls	A one-line text field.
select	Controls	A dropdown choice.
checkbox	Controls	An on/off switch.
button	Action	Sends its text as your next message, then locks the card.
player	Animation	A control bar at the bottom of the card: plays, pauses, steps, and scrubs a number at 0.5× to 2×; everything that reads it follows.

How it works

• The plugin registers one tool, ui_render, and one skill, dsh-intelligent-ui, which teaches the model when a card beats prose. The model never writes HTML or JavaScript: its program is checked against the 27-component catalog and stored with the tool result.
• A card draws in the tool row while the reply streams, and under the reply once it finishes. Moving a control recomputes every figure locally.
• A player animates a card: code traced line by line, an algorithm's passes, a point moving along a curve. Playback runs in the browser and sends nothing to the model.
• Cards compute integrals (including infinite bounds), derivatives, limits, sums and products, roots, and Taylor polynomials. A value that cannot be computed reliably shows "—", never a guess.
• Uninstalling leaves every session opening as before; earlier calls show as ordinary tool rows.

Development

node scripts/link-dev.mjs   # link the toolchain from the sibling harness checkout
node build.js               # type-check, build, and self-check the bundle
node node_modules/vitest/vitest.mjs run

AGENTS.md holds the rules of the tree; docs/VERIFY.md is the live checklist.

License

MIT License © 2026 Starfield.