🎨 角丸ノードとテーマ調和カラーを備えた Mermaid フローチャート
---
## ✨ 主な特徴
- ⚡ **その場で動くミニアプリ**: スライダーや数値入力、ドロップダウンを操作すると、ブラウザ内で即座に計算式やグラフが再計算されます（サーバーとの往復通信は不要です）。
- 📊 **20種類以上の充実したUIコンポーネント**: KPI 表示カード（`stat`）、各種チャート（棒・折れ線・円・エリア `chart`）、レスポンシブ配置（`box`, `row`, `grid`）、プログレスバー、テーブル、バッジ、セグメントコントロールなどを標準搭載。
- 🎨 **美しいテーマ調和の Mermaid 図**: ` ```mermaid ` ブロックを自動的に検出し、ダーク/ライトテーマに調和したカラー、丸みを帯びたカード、階層ラベルで見やすく整形描画します。
- 🔁 **エージェントとの双方向インタラクション**: アクションボタン（`GenUI.issueNewTurn(...)`）を配置でき、ユーザーがUI上で選んだ値をワンクリックで次のプロンプトとしてエージェントに送信できます。
- 🧠 **文脈に応じたスマートな出力**: シミュレーションや比較、フロー図などの「視覚化が役立つ質問」の時だけUIを生成し、単純な質問やコードの相談には通常のプレーンテキストで簡潔に返答します。
- 🔒 **安全なサンドボックス設計**: すべての動的計算式は安全な AST インタープリタ上でステップ制限付きで実行されます。`eval` や DOM へのアクセス権限はなく、入力データもブラウザのローカルストレージ内で完結します。
---
## 🚀 インストール手順
**DeepSeek Harness 0.2.x** 以降（デスクトップアプリまたは `dsh web`）が必要です。
### 方法 1: Web UI / デスクトップアプリから（推奨・簡単）
1. DeepSeek Harness を開きます。
2. 左メニューの **Plugins** を開き、**Add plugin**（プラグインを追加）をクリックします。
3. 以下のパッケージ名または GitHub URL のいずれかを入力します：
```
@rakutek/dsh-intelligent-ui
```
または
```
https://github.com/rakutek/dsh-intelligent-ui
```
4. **Install** をクリックします。アプリの再起動なしですぐに有効化されます！
### 方法 2: CLI からのインストール
ターミナルで以下のコマンドを実行します：
```sh
# デスクトップ版のプロファイルに追加（実行前にデスクトップアプリを終了してください）:
dsh plugin --profile desktop add @rakutek/dsh-intelligent-ui
# Web サーバー版のプロファイルに追加:
dsh plugin --profile web add @rakutek/dsh-intelligent-ui
```
> **Tip**: 一時的にプレーンテキスト返答に戻したい場合は、**Plugins** 画面で本プラグインのトグルをオフにするだけで無効化できます。
---
## 💡 試してみると楽しいプロンプト例
プラグイン有効後、自然言語でインタラクティブな出力や図解をリクエストしてみてください：
- **料金シミュレーター・試算**:
> 「チームの利用人数とプラン契約期間（月払い／年払い）をスライダーで変更できて、割引額や年間総額がリアルタイムに再計算される SaaS 料金シミュレーターを作って」
- **製品やサービスの比較**:
> 「MacBook Pro M3、ThinkPad X1 Carbon、Dell XPS 13 の3機種について、バッテリー持ち・重量・価格・開発適性を比較できるインタラクティブな比較カードを出して」
- **業務フローやシステムの図解**:
> 「GitHub の Pull Request が作成されてから、CI チェック、コードレビューを経てデプロイされるまでの流れを分かりやすいフローチャートで図解して」
- **ローン・返済プラン計算**:
> 「借入金額、金利、返済年数を変更すると毎月の返済額と利息総額が更新される住宅ローン計算カードを作って」
---
## 🛠️ 仕組み（モデルが生成する Markdown）
本プラグインはシステムプロンプトに軽量な記法ガイドを注入します。モデルは通常の Markdown に加え、JSX ライクなコンポーネントタグと状態変数を組み合わせて出力します：
```md
{@body const [seats, setSeats] = useState(25)}
{@body const [price, setPrice] = useState(1200)}
| 
|