omdsh-dev/dsh-genui

GenUI for DeepSeek Harness: interactive UI components rendered inline in assistant replies via the dsh-ui fence — layout, charts, plots, forms, quizzes, mermaid, 3D scenes, and an action event loop back to the model. Ships the fence-teaching host plugin, the browser renderer (client half), and the genui skill.

dsh-genui とは？

dsh-genui は DeepSeek Harness (DSH) 用のプラグインです。DSH は DeepSeek の大規模言語モデルを実行するチャット UI です。このプラグインは、モデルの出力を監視し、dsh-ui とマークされた特別なフェンスブロックを探します。見つけると、内部の JSON を解析し、プレーンテキストやコードブロックを表示する代わりに、会話内でリッチなインタラクティブ UI コンポーネントを即座にレンダリングします。

仕組みは？

モデルが dsh-ui フェンスを出力 – UI コンポーネント（例：テーブル、チャート、プロット、クイズ、メディアプレーヤー）の JSON 記述。モデルはこの JSON をトークン単位でストリーミングできます。
GenUI クライアントがフェンスを検出 ブラウザの DOM 内で、JSON をホワイトリストに対して検証し、React コンポーネントツリーをマウントします。
アセットは遅延ロード – ECharts、Mermaid、Three.js などの重いライブラリは、対応するコンポーネントが表示されたときにのみ取得されます。
ローカルファーストの操作（テーブルの並べ替え、スライダーのドラッグ、クイズへの回答）はすべてブラウザ内で処理され、LLM への往復なしでサブミリ秒のフィードバックを提供します。
双方向アクションループ – UI 要素は action ペイロードを保持できます。ユーザーがボタンをクリックすると、ペイロードは LLM に送り返され、LLM は推論を続けて新しい UI フェンスを送信できます。
グレースフルフォールバック – プラグインがインストールされていない場合や JSON が不正な場合、フェンスは通常の Markdown コードブロックとして表示されるだけなので、チャットが壊れることはありません。

主な機能（「機能マトリックス」）

領域	提供される機能
ストリーミングとリアルタイムマウント	モデルのストリーミングに合わせて UI が段階的に表示され、応答全体を待つ必要はありません。
30 以上のコンポーネントエコシステム	統計カード、並べ替え可能なテーブル、タイムライン、コード差分、ファイルツリーエクスプローラー、ECharts チャート、ライブスライダー付き関数プロット、Mermaid ダイアグラム、3D モデル、オーディオ/ビデオプレーヤー、KaTeX 数式、クイズなど。
ローカルファーストの応答性	並べ替え、フィルタリング、スライダードラッグ、タブ切り替え、クイズ採点がブラウザ内で即座に実行されます。
双方向アクションイベントループ	ボタンは構造化イベントをモデルに送信でき、クローズドループの会話を可能にします。
永続ワークスペースとテンプレート	ページのリロードをまたいで保持されるドックパネル。組み込みのシナリオテンプレートと達成バッジ付き。
サンドボックスと自己修復	厳格な JSON ホワイトリスト、`eval` なし、不正なノードの自動修復、修正のためのモデルへの同一ターンフィードバック。

ユーザー向けクイックスタート

# プラグインをインストール（pnpm が必要）
dsh plugin --profile web add @changfenhuang/dsh-genui

DSH Web サービスを再起動し、ブラウザをハードリフレッシュします。

新しいチャットで、次のようなことを尋ねます：

dsh-ui を使用して、並べ替え可能なサービス表付きの統計ダッシュボードを描画してください。

応答は、プレーンなコードスニペットではなく、並べ替え可能な列、フィルターボックス、プログレスリングなどを備えたインタラクティブなダッシュボードとして表示されます。

サンプル UI 仕様

{
  "title": "Q3 2026 エグゼクティブ概要",
  "items": [
    {
      "type": "row",
      "items": [
        {"type": "stat", "label": "総収益", "value": "¥128,430", "delta": "+12.4%", "spark": [40,55,60,85,120]},
        {"type": "stat", "label": "完了した注文", "value": "1,024", "delta": "-3.1%", "spark": [90,85,80,75,70]},
        {"type": "progress", "label": "四半期目標", "value": 82, "variant": "ring"}
      ]
    }
  ]
}

モデルがこのブロックをストリーミングすると、GenUI は 3 つの統計カード、プログレスリング、行レイアウトをレンダリングします。すべてクリック可能で、テーマに対応しています。

誰が使うべきか？

プロダクトマネージャー / アナリスト：自然言語クエリから即座にビジュアルダッシュボードを取得したい方。
DSH ベースのアシスタントを構築する開発者：プレーンテキストよりもリッチな UI が必要な方。
教育者：チャットベースの学習フローにクイズ、プロット、メディアを直接埋め込むことができます。

開発と貢献

リポジトリをクローンし、pnpm install を実行してから、dsh plugin --profile web add link:$PWD でプラグインをローカルの DSH プロファイルにリンクします。
プロジェクトには完全なテストスイート（pnpm run test）と、Chrome をヘッドレスで実行するビジュアルエンドツーエンドチェックが含まれています。
エクスポートされた型（GenuiBlock、processGenuiSpec）を使用すると、任意の React アプリにレンダラーを埋め込むことができます。

ライセンス

MIT – 自由に使用、変更、再配布できます。