Two generative-ui cards rendered inline in a DSH chat: a counter and a BMI calculator
English | 简体中文
dsh-generative-ui
Let the AI output interactive HTML components (Generative UI) directly in
the DSH chat flow.
The agent writes a fenced code block in its reply:
```generative-ui
<!-- title: Example: counter -->
<button id="plus">+1</button> <span id="n">0</span>
<script>let n=0;plus.onclick=()=>{n++;n.textContent=n}</script>
```
The plugin extracts every artifact from that turn and renders it as a sandboxed
card below the message: an <iframe sandbox="allow-scripts"> (no same-origin)
— the artifact is fully interactive, but can never touch the host page,
cookies, or local storage.
Design
- Pure client-side: no backend, no storage. Artifacts live in the session
message text — the session is the store; there is no second copy of state
and nothing to sync.
- The host half does one thing: broadcast the fenced-block convention to every
agent via
systemPrompt.section.
- The browser half uses a
uiConversation.events accumulator to extract
artifacts from assistant/message events (the same turn-accumulator pattern
as dsh-taskboard), projects them onto the turn location, and renders the
cards through the conversation.chat.turnTail slot.
- Adaptive height: a bootstrap injected into each artifact reports its height
to the parent via ResizeObserver + postMessage; cards are clamped between
120–600px and scroll internally beyond that.
Install
dsh plugin --profile desktop add link:<this-directory>
# and add @ttmouse/dsh-generative-ui to dsh.profile.bundles in the profile
# package.json; restart the desktop app (the host half registers the prompt
# section; client.js is read from disk per request)
Develop
npm install && npm run build # produces lib/client.js + lib/index.mjs
npm test # unit + e2e (headless Chromium)
npm run screenshot # regenerate screenshot.png from the real client
Client changes take effect on page refresh; host-half changes (the
system-prompt text) need an app restart.
License
MIT
