dsh genui 実録：AI の出力がクリックできるインターフェースになる瞬間
OpenTiny コミュニティの 295 秒ウォークスルーから検証済みフレームを 10 枚。チャット 1 文でエージェント自身にプラグインを入れさせ、列車照会フォーム・並べ替えできる運賃テーブル・時間帯別グラフ・ポモドーロ・電卓が次々に生まれ、最後はその全部をオフにするスイッチまで。
最終更新: 2026-10-15
アシスタントに「北京までの電車賃は？」と聞くと、返ってくるのは文章です。数字を自分で読み、比較を自分で組み立てる。このページのプラグインは、モデルが本物のコンポーネントで答えられるようにするもの——上のヒーロー画像は、DeepSeek Harness のセッション内でクリックされている途中の運賃テーブルです。全体を貫くのは OpenTiny コミュニティが公開した 295 秒の録画で、あなたが見るパネルはすべて、ごく普通のチャットメッセージ 1 つから生まれています。
このページは「インタラクティブな出力」の深掘りです——クリックも入力も、そのままセッションへ戻る。モデルの出力した HTML を単に表示させる軸については dsh raw-html レンダリング:回答を見える化(図解)
TL;DR
- ▸dsh-genui（lhuans/dsh-genui、2026-10-15 時点で ★12。旧名 OpenTiny/dsh-genui はここへリダイレクト）はモデルの返信を本物のコンポーネント——グラフ・フォーム・テーブル・ミニアプリ——として描画し、クリックや送信がそのまま会話に戻ります。
- ▸インストールは 1 行、dsh plugin --profile web add dsh-genui。録画ではエージェントが実行します。PowerShell の実行ポリシーに阻まれると、CLI を直接呼ぶ方式へ自力で切り替え。インストール後は再起動が必須です。
- ▸デモは列車照会 1 回：返信には深セン→北京の照会フォーム（出発・到着・日付ピッカー・検索ボタン）、5 行の並べ替え可能な運賃テーブル、時間帯別の運賃グラフが含まれ、その後ポモドーロと電卓もその場で生成されます。
- ▸入力欄ツールバーの星アイコンが GenUI authoring プロンプトを切り替えます（フレーム上の表示は「GenUI prompt on」）。オフにすればモデルは通常のテキストに戻る。取り外しは dsh plugin --profile web remove dsh-genui——録画の最後で、削除後の返信が文章に戻る様子も見せます。
フレーム検証済み 9 ステップ
パート 1 · テキストの壁とインストール
- 1
出発点：調査がテキストの壁になる
プラグインが登場する前、録画は反例から始まります。普通の DeepSeek チャットが「DSH プラグインはいくつあるのか」という質問に、統計エッセイで答える場面です——数え方によって「300 強から 16,000 超まで」散らばり、awesome リストと集約マーケットの Markdown 表（厳選 353+、あるマーケットは 2,825 件）が続く。内容に問題はない。読む側が疲れるだけ。これが dsh-genui の比較基準です。（注意：このフレームは普通の DeepSeek チャットで、Harness の Web UI ではありません。）
$三百多个到一万六千多个不等$awesome-dsh-plugins 353+ · @ace-zone/dsh-market 2,825
基準線はこれ：同じ答えが Markdown の壁に。0:28 に視聴 - 2
インストールは、エージェントに頼む一言
まだターミナルは出ません。録画は「帮我把 npm 上的 dsh-genui 插件装到 web profile，执行 dsh plugin --profile web add dsh-genui」という文を、真新しい Harness のセッションに打ち込んで送信します。README の「AI にインストールさせる」セクションにあるコマンドを、一字そのままエージェントに渡した形です。前提条件（Node、pnpm）は通常どおりで、再起動するまで何も変わりません——停止、再起動、更新、新しいセッション。
$帮我把 npm 上的 dsh-genui 插件装到 web profile，执行 dsh plugin --profile web add dsh-genui
インストールの全体が、チャットメッセージ 1 つ。2:15 に視聴 - 3
エージェントは本当に実行する——妨げられれば適応する
セッション名は「安装 dsh-genui 到 web profile」に変わり、作業が始まります。「I'll run that plugin install command for you… The PowerShell dsh plugin is blocked by execution policy, let me call the CLI directly.」——本物のインストールが Windows の本物の防御に当たり、その場で迂回を選ぶ。台本のスライドではありません。同じ区間で動画は手動の代替（ターミナルに同じ add コマンド）も示し、最後には対になる remove コマンドもデモします。
$安装 dsh-genui 到 web profile$blocked by execution policy → call the CLI directly
本物のインストールが、その場で迂回する。2:22 に視聴
パート 2 · 照会 1 回、コンポーネント 3 つ
- 4
要求：ふだんの言葉での列車照会
新しいセッションでユーザーは「统计一下今天深圳到北京的火车票」と入力します。返信の冒頭に生成されたカード「深圳 → 北京 火车票查询」：出発都市は深セン、到着は北京、日付ピッカー（フレーム上は 2025-06-18）、黒い「查询」ボタン。フォームです——モデルが、この答えに最もふさわしい形はフォームだと判断したからです。
$深圳 → 北京 火车票查询$出发城市 深圳 · 到达城市 北京 · 出发日期 2025-06-18
モデルがこの返信の入り口に選んだのは、フォームだった。1:26 に視聴 - 5
回答：並べ替えできる 5 行の運賃テーブル
フォームの下に、結果は本物のテーブルとして描画されます——番号、便名、出発・到着の駅と時刻、所要、座席クラス、運賃、残席：G80 07:14→15:38 二等座 1068 有票、G82 一等座 1712、低速の Z108 は寝台 497 で 32 枚、G96 は完売。「票价(元)」列のヘッダーには並べ替え矢印があり、ヒーロー画像はそのクリックの瞬間を捉えています。1 つのデータに 3 つの顔：フォームで尋ね、テーブルで読み、ソートで比べる。
$G80 07:14→15:38 二等座 1068 有票$G82 一等座 1712 · Z108 硬卧 497 · 32张
5 本の列車、全列ソート可——スクリーンショットに頼らない。1:30 に視聴 - 6
パターンを可視化する：運賃の棒グラフ
同じ返信は続き、「不同时段票价对比」——実軸の棒グラフで、午前/昼/午後/夜間の 4 本、昼が 1,700 近くまで跳ね上がり、夜便は 500 弱にとどまる。メッセージのフッターは「用量 27.2K tok · 用时 6秒」。リポジトリ README のチャート種類（棒・線・円・レーダー・ゲージほか）は一般的な能力で、このフレームはその具体例です。
$不同时段票价对比$上午 · 中午 · 下午 · 夜间
同じ返信の 2 つ目のコンポーネント：ひと目で分かる推移。1:22 に視聴
パート 3 · ミニアプリとスイッチ
- 7
「ポモドーロを生成して」——動くミニアプリ
新しいセッション「生成精美番茄钟」：返信はポモドーロを組み立てます——0 から 1,500 のダイヤル、「开始专注」（集中開始）、「重置」（リセット）、「跳过本段」（この区間をスキップ）のボタン、「完成产品方案初稿」が入ったタスク欄と専用の保存ボタン、そして統計テーブル（今日のポモドーロ数、集中時間、現在モード）。このループで人間が書いたコードはありません。モデルがインターフェースを書き、ボタンは本当に反応します。
$开始专注 · 重置 · 跳过本段$本次专注任务：完成产品方案初稿
返信の中に書かれた、動くミニアプリ。3:26 に視聴 - 8
「電卓を生成して」——そして実際に押す
「生成计算器」セッションは電卓カードを描画します——AC、±、数字、演算子、イコール——そして録画は実際に使います。ディスプレイは 450-93 を示し、カーソルは「=」を押しているところ（README の看板例の、生きた再現です）。キーはモデルの JSON 記述からストリーミングで描かれた本物のコンポーネントで、スクリーンショットではありません。
$450-93$AC ± 7 8 9 × 4 5 6 + 1 2 3 = 0 . 00
どのキーも動く——謳い文句ではなく、押した瞬間。3:46 に視聴 - 9
スイッチ：「GenUI prompt on」
入力欄のツールバーには星形アイコンがあり、ホバーすると「GenUI prompt on」のツールチップが出ます。これは GenUI authoring ガイダンス——モデルにいつインターフェースを出力すべきか指示する追加プロンプト部分——を制御します（アップローダーのコメント欄での呼び方は「提示词注入」）。デフォルトでオン、再起動をまたいで記憶。オフにすればモデルは再び普通の文章で答えます。録画の最後ではプラグインを取り除き（dsh plugin --profile web remove dsh-genui）、同じ種類の質問が文章で返される様子まで見せます。
$GenUI prompt on$DeepSeek-V4-Pro Low
ひとつのスイッチが、返信がインターフェースを持つかを決める。3:52 に視聴
FAQ
このページに寄せられる質問への回答。録画とコメント欄、プラグインのリポジトリに基づきます。
dsh genui とは何ですか？
モデルの返信をインタラクティブなインターフェース——グラフ、フォーム、テーブル、ピッカー、ミニアプリ——に変え、クリックや送信をセッションへ送り返す DeepSeek Harness プラグインです。リポジトリは lhuans/dsh-genui（2026-10-15 の GitHub 確認で ★12、MIT。旧 URL の OpenTiny/dsh-genui はここへリダイレクトし、アップローダー自身の固定コメントもここを指しています）。npm には dsh-genui として公開され、dsh plugin --profile web add dsh-genui で入ります。このウォークスルーを公開したのは OpenTiny コミュニティのアカウントで、描画コンポーネントは OpenTiny の genui-sdk 製です。
「HTML を描画する」プラグインとどう違うのですか？
モデルが何を書くか、そしてその結果を操作できるか、の 2 点です。raw-html 系プラグインはモデルが書いた HTML をチャットに表示させます——グラフもアニメーションも見るもの。dsh-genui はモデルにインターフェースの構造化 JSON 記述（README では schemaJson ブロック）を出力させ、レンダラーがそれをホワイトリストのコンポーネントに変え、クリックや送信がセッションに流れ戻ってモデルが続きから進めます。表示か、往復か。このページのフレームが示すのは往復の半分——フォーム送信、テーブル並べ替え、キー入力——です。
どのような操作やコンポーネントに対応していますか？
リポジトリの README によれば：チャート（棒・線・円・リング・レーダー・ゲージ・ファネル・散布・ウォーターフォール）、フォーム部品（テキスト・ドロップダウン・ラジオ・チェックボックス・トグル・ステッパー・日付ピッカー・検索ボックス・トランスファーリスト、送信値は自動で会話に戻る）、ページングと検索つきテーブル、ツリーやタイムライン・タブ・カード、ウィザードや採点つきクイズのような多ターンの流れ、そしてフレームのような自由発想の「ミニアプリ」（電卓、ポモドーロ）。返信ごとにモデルが判断し、「インターフェースで答えて」と言えばそれでも動きます。描画できるのはホワイトリストのコンポーネントのみ——任意の HTML やスクリプトは注入できません。
インストールは？ 入れても何も起きないのはなぜ？
1 行です：dsh plugin --profile web add dsh-genui（npm から。アカウントもクローンも不要）。録画ではエージェントに実行させます。PowerShell の実行ポリシーがラッパースクリプトを阻むと、エージェントは CLI を直接呼ぶ方式へ切り替え。そして一番 skip されがちな手順が再起動——Ctrl+C でハーネスを止め、起動し直し、ブラウザを更新し、新しいセッションを開く。DSH は起動時にプラグイン構成を固定するので、再起動するまで返信は普通のテキストのままです。取り外しは対になるコマンド：dsh plugin --profile web remove dsh-genui。
どちらのリポジトリ？ GitHub には dsh-genui が 2 つあります。
動画にあるのは lhuans/dsh-genui です——アップローダーの固定コメントと OpenTiny/dsh-genui のリダイレクトの二重確認（いずれも 2026-10-15 時点。★12、pushed 2026-10-09）。同名の omdsh-dev/dsh-genui（★588、pushed 2026-10-14）は別プロジェクト・別アーキテクチャ（dsh-ui フェンスのレンダラー）で、検索では混同しやすく、動画のコメント欄でも視聴者が同じ混乱に当たっています。このページのリンクはすべて lhuans のリポジトリとサイトへ向けています。
すべての返信が UI になりますか？ コストは？
いいえ——モデルはインターフェースが似合うときだけ生成し、普通の質問には普通の文章が返ります（README も明言で、フレームにも文章の回答があります）。入力欄の星トグルで GenUI authoring ガイダンスを切れば、カード描画を残したまま全テキストの返信に戻る。操作はトークンを消します。生成されるインターフェースはすべてモデル出力で、フレームのフッターは 1 ターン数万トークン——録画内の 2 ターンは 27.2K と 29.1K tok でした。
関連ガイド
隣の軸たち——それぞれ何を変えるのか、なぜこれではないのか。
dsh raw-html レンダリング:回答を見える化(図解)
raw-html プラグインが平文の回答を HTML カード・チャート・アニメーション・スタイルシステムに変換。信頼モードの安全性も解説
ガイドを読むdsh のスキン変更：client ui テーマ導入とカスタマイズ
dsh Web UI スキン導入の画像付きガイド。Firefly テーマをワンクリックで導入するか、dsh-client-ui-custom で壁紙・すりガラス・6種のプリセットを自在に設定。即時反映、元に戻すコマンド付き。
ガイドを読むAI で dsh を着せ替える
wallpaper-plugin 図解ガイド：外観の 3 状態スイッチ、プリセットスタジオのレイヤー合成壁紙、そしてひとことで AI に明暗両対応のテーマを作ってもらうまで。
ガイドを読む出典とクレジット
すべてのフレームは、Bilibili の「OpenTiny社区」アカウントが 2026-10-12 に公開した 1 本の録画（295 秒、字幕なし。2026-10-15 の API 確認で 9,072 再生——検索ページは同じ数字を約 10 倍に水増しするため、API 値のみを引用）から取っています。リポジトリの同一性はアップローダー自身の固定コメントと GitHub API のリダイレクト確認（2026-10-15）で解決し、スター数は同日の API 値です。アカウント本体以外のアップローダー情報は画面の表示どおりに述べ、独立検証はしていません。上の各フレームは元のタイムスタンプへ戻れます。