npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

dsh-generative-ui

v0.2.0

Published

Generative UI for DeepSeek Harness — the agent writes TSX, dsh web renders it live, inline in chat and in a canvas panel

Readme

dsh-generative-ui

npm Apache-2.0

Generative UI for DeepSeek Harness: the agent answers with a live React interface instead of prose. It streams — the component renders while the model is still typing it.

Two places it shows up:

  • Inline — a fenced ```ui4a/tsx block renders in place, between the paragraphs of the reply. Right for a chart, a form, a set of options to click, a calculation the reader will want to change a number in.
  • Canvas — a file at ui4a/canvases/<id>.ui4a.tsx opens in a panel beside the conversation and stays there across turns. Right for a tool the user will come back to.

Generated code imports anything on npm (resolved from esm.sh at render time), shares the host's single React instance, and takes its colours from the app's own design tokens, so it follows the light/dark theme.

The ui4a in that fence is the harness this implements — UI for Agent, from Mind Lab: rather than coaxing an agent into a fixed UI schema, let it write ordinary frontend code and have the runtime enforce the boundaries. The reasoning, and the benchmarks behind it, are in UI4A: A Component-Native Harness for Generative UI. This package is that harness wired into dsh's web client.

Install

dsh plugin --profile web add dsh-generative-ui

Published npm releases carry provenance. To try an unreleased commit while preview publishing is unavailable for the transferred repository, point the profile at a local checkout — lib/ is built by prepare, so the profile does not care that this package uses bun and dsh uses pnpm:

dsh plugin --profile web add link:/path/to/dsh-generative-ui

dsh plugin forwards to the profile's package manager, so any of these installs the package — and adds it to ~/.dsh/profiles/web/package.json's dsh.profile.bundles, which is the list dsh actually boots. Verified on a clean machine, the bundle list reads:

{
  "dsh": {
    "profile": {
      "bundles": [
        "@deepseek-ai/dsh-base",
        "@deepseek-ai/dsh-web-app",
        "dsh-generative-ui"
      ]
    }
  }
}

The dependencies entry beside it is whatever form you installed — and from the registry that is a caret, which on a 0.0.x version pins exactly: ^0.0.1 matches 0.0.1 and nothing later. Edit it to ~0.0.1 if you want patches.

Start dsh web and it is there — or restart it if it was already running, since plugins are mounted at boot and adding one has no hot-reload.

If nothing happens, check which agent preset the session is on first. Under minimal (极简模式) the persona is declared complete: true, so nothing can append to the system prompt and the skill tool is not in the preset — the model is never told this format exists. Measured: 45 characters of system prompt against 27524, and zero mentions of the fence. The rendering half still works, so a card you paste by hand renders; the model just will not write one. Use standard, or copy the preset and add tool-skill back.

How it works

The package is one plugin with two halves, which is how dsh plugins reach the browser:

| | | | --- | --- | | lib/index.js (node) | injects the system-prompt section, registers the generative-ui skill, serves the compiler wasm and canvas file reads over its own webServer routes | | lib/client.js (web) | claims ui4a/tsx code blocks in the transcript, compiles TSX in-browser, mounts the canvas panel |

The model is taught in two layers, split by what each costs:

  • src/prompt.ts rides in every request, so it carries only the trigger, the fence syntax, the canvas path, and the colour tokens.
  • skill/SKILL.md is registered through ctx.skills.register() and loads only when the model reaches for it. It carries the UI and inline/canvas decisions, then points to topic-specific files in skill/references/ for the authoring details.

That split is measured, not assumed — see CLAUDE.md §4.5 for the 40-prompt evaluation behind it.

Development

bun install
bun run check     # lint + typecheck + build + smoke

bun run build bundles both halves with Bun.build. CLAUDE.md is the design document — it records the host constraints this plugin was built against, all of them found the hard way.

License

Apache-2.0