Playground Studio (日本語)

概要

Playground Studioは、/dashboard/playgroundをシンプルなMonacoベースのエディターから、 フル機能のテストワークスペースへと進化させます。従来のpage.tsxを、4つのタブと 共有設定ペインを表示するPlaygroundStudioシェルに置き換えます。

┌ Playground ──────────────────────────────────────────────────────────┐
│ [💬 チャット] [⚖ 比較] [{} API] [🔧 ビルド]  142↑ 38↓ · $0.002 </>│
├──────────────────────────────────────────┬───────────────────────────┤
│  {アクティブなタブの内容}                │ ─ 設定                    │
│                                          │ エンドポイント [chat ∨]  │
│                                          │ モデル    [gpt-5.4 ∨]     │
│                                          │ システム  [テキスト領域]  │
│                                          │ 温度      ▕▕▔▔ 0.7        │
│                                          │ プリセット [▾ 読込][保存]│
│                                          │ [✨ プロンプトを改善]     │
└──────────────────────────────────────────┴───────────────────────────┘

---

タブ

チャットタブ

ChatPlayground.tsxを、複数ターン対応のストリーミングワークベンチへと進化させます。

• MarkdownMessage.tsxによる完全なMarkdownレンダリング（コードブロック、テーブル、リスト、リンク）。
• 共有の設定ペインから取得されるシステムプロンプト。
• メッセージごとのトークン数とコスト（プロンプトトークン + 完了トークン）。
• 最後のレスポンスを再生成。
• SSEストリーミングを使用してPOST /v1/chat/completionsへ送信。

比較タブ

プロキシとしての主要な差別化機能です。1つのプロンプトを最大4つのモデルで並列実行できます。

• 最大4列で、各列が/v1/chat/completionsから独立してストリーミング。
• 列を追加するための+ モデルを追加ボタン（Cmd+Kショートカット）。
• すべて実行 ▶は、Promise.allと列ごとのAbortControllerを使用して、すべてのストリームを同時に開始。
• グローバルなすべてキャンセルにより、実行中のすべてのストリームを中止。
• 列ごとのProviderMetricsに、TTFT、TPS、トークン数、推定コストをリアルタイムで表示。
• メトリクスには**「クライアント側の推定値」**（D12）と表示 — 最初のSSEチャンクから計測。

APIタブ

上級ユーザー向けに、元のMonacoエディターを100%維持します（D14）。

• 10個のエンドポイント: チャット補完、補完、埋め込み、画像、音声、音声合成、文字起こし、モデレーション、リランキング、検索。
• マルチモーダルファイルのアップロード。
• リアルタイム出力を伴うSSEストリーミング。
• ApiTab.tsxとしてラップ（遅延読み込み、ssr: false）。

ビルドタブ

ツール/関数呼び出しと構造化出力のUIです。

• ToolsBuilder.tsx — ツールごとのJSONスキーマエディターを使用して、tools[]の追加、編集、削除を実行。 ToolDefinitionSchema（Zod）を使用してパラメーターを検証。
• StructuredOutputEditor.tsx — JSONモードの切り替え + JSONスキーマエディター。 StructuredOutputSchema（Zod）を使用して、レスポンスがスキーマに準拠しているかを検証。
• tools[]および/またはresponse_formatを含むリクエストを/v1/chat/completionsへ送信。

---

設定ペイン（共通）

StudioConfigPane.tsx — 常に表示され、折りたたみ可能です。

フィールド	コンポーネント	備考
エンドポイント	<select>	PlaygroundEndpoint に対応する10個のオプション
モデル	<input>	自由入力（例: openai/gpt-4o）
システムプロンプト	<textarea>	すべてのタブに渡される
パラメーター	ParamSliders	temperature、max_tokens、top_p、presence/frequency penalty、seed、stop
プリセット	PresetPicker	名前付き設定スナップショットの読み込み／保存（DBに永続化）
プロンプトを改善	ImprovePromptButton	クォータ警告モーダルを開き、/api/playground/improve-prompt を呼び出す

状態は PlaygroundStudio.tsx にリフトアップされ、すべてのタブに渡されます。タブを切り替えても 設定状態は保持されます。

---

トップバー

StudioTopBar.tsx:

• タブ切り替え（role=“tablist”）。
• TokenCostCounter — リアルタイムのトークン数（↑/↓）と推定コストを表示。
• コードのエクスポートボタン（</>）— ExportCodeModal を開く。

---

コードのエクスポートモーダル

ExportCodeModal.tsx は codeExport.ts を使用し、現在の PlaygroundState から curl / Python / TypeScript のスニペットを 生成します。APIキープレースホルダーは常に $OMNIROUTE_API_KEY です（D11）。

---

プロンプト改善機能

ImprovePromptButton.tsx → useImprovePrompt.ts → POST /api/playground/improve-prompt:

1. モーダルに「クォータを消費します」という警告を表示します。
2. 確認後、{ system, prompt, model, tone } をルートに送信します。
3. ルートは内部で promptImprover.META_SYSTEM_PROMPT を使用して /v1/chat/completions を呼び出します。
4. { improvedSystem?, improvedPrompt?, tokensIn, tokensOut } を返します。
5. UIは設定ペインのシステムプロンプトと、チャットタブのユーザープロンプトを更新します。

---

プリセット

PresetPicker.tsx → usePresets.ts → /api/playground/presets/*:

• SQLiteの playground_presets テーブルに保存されます（マイグレーション: 084_playground_presets.sql）。
• 各プリセットには、name、endpoint、model、system、params_json、created_at が保存されます。
• CRUD: GET 一覧取得、POST 作成、GET /:id 取得、PUT /:id 更新、DELETE /:id 削除。

---

ストリームメトリクス

useStreamMetrics.ts + streamMetrics.ts（純粋関数）:

• start() — リクエストの開始時刻を記録します。
• onFirstChunk() — TTFTを記録します。
• onChunk(n) — 補完トークン数を累積します。
• finish(usage?) — 最終メトリクス（ttftMs、totalMs、tps、tokensIn、tokensOut、costUsd）を計算します。
• 料金は src/lib/playground/types.ts の静的テーブルを使用します（「推定」と明記 — D13）。

---

バックエンドルート

メソッド	パス	ハンドラー
POST	/api/playground/improve-prompt	ImprovePromptRequestSchema でZod検証し、メタプロンプトを使用して /v1/chat/completions を呼び出す
GET	/api/playground/presets	{ presets: PlaygroundPresetListItem[] } を返す
POST	/api/playground/presets	プリセットを作成し、PlaygroundPresetCreateSchema で検証する
GET	/api/playground/presets/:id	プリセットを1件返すか、404を返す
PUT	/api/playground/presets/:id	部分更新
DELETE	/api/playground/presets/:id	204

認証: 任意（REQUIRE_API_KEY）。エラーは buildErrorBody() を使用します（ハードルール #12）。

---

主要ファイル

パス	目的
src/app/(dashboard)/dashboard/playground/PlaygroundStudio.tsx	シェルコンポーネント、タブのオーケストレーション
src/app/(dashboard)/dashboard/playground/components/StudioTopBar.tsx	タブ + カウンター + エクスポートボタン
src/app/(dashboard)/dashboard/playground/components/StudioConfigPane.tsx	共通設定パネル
src/app/(dashboard)/dashboard/playground/components/tabs/ChatTab.tsx	チャットワークベンチ
src/app/(dashboard)/dashboard/playground/components/tabs/CompareTab.tsx	複数モデルの比較
src/app/(dashboard)/dashboard/playground/components/tabs/ApiTab.tsx	Monacoエディター（維持）
src/app/(dashboard)/dashboard/playground/components/tabs/BuildTab.tsx	ツール + 構造化出力
src/app/(dashboard)/dashboard/playground/components/ExportCodeModal.tsx	コードエクスポートモーダル
src/app/(dashboard)/dashboard/playground/components/CompareColumn.tsx	単一の比較カラム
src/app/(dashboard)/dashboard/playground/components/ProviderMetrics.tsx	TTFT/TPSの表示
src/app/(dashboard)/dashboard/playground/hooks/useStreamMetrics.ts	クライアント側のメトリクスフック
src/app/(dashboard)/dashboard/playground/hooks/usePresets.ts	プリセットのCRUDフック
src/app/(dashboard)/dashboard/playground/hooks/useImprovePrompt.ts	プロンプト改善フック
src/lib/playground/codeExport.ts	curl/Python/TSジェネレーター（検索ツールと共有）
src/lib/playground/promptImprover.ts	メタプロンプトビルダー
src/lib/playground/streamMetrics.ts	純粋なメトリクス計算
src/lib/db/playgroundPresets.ts	DBモジュール（CRUD）
src/app/api/playground/improve-prompt/route.ts	プロンプト改善用RESTルート
src/app/api/playground/presets/route.ts	プリセットの一覧取得 + 作成
src/app/api/playground/presets/[id]/route.ts	プリセットの取得/更新/削除
src/lib/db/migrations/084_playground_presets.sql	DBマイグレーション

---

トラブルシューティング

症状	原因	解決策
API タブで Monaco エディターが表示されない	SSR で Monaco が読み込まれている	ApiTab が dynamic(..., { ssr: false }) を使用していることを確認する
比較ストリームが順次実行される	Promise.all の使い方が間違っている	すべてのストリーム開始処理を1回の Promise.all 呼び出しでディスパッチする
メトリクスで TTFT が null と表示される	最初のチャンクハンドラーが接続されていない	SSE リーダーループ内で useStreamMetrics.onFirstChunk() が呼び出されていることを確認する
プリセットが永続化されない	DB マイグレーションが実行されていない	npm run db:migrate を実行するか、サーバーを再起動する（起動時にマイグレーションが自動実行される）
プロンプトの改善で 502 が返される	Config でモデルが設定されていない	改善する前に、ユーザーが Config ペインでモデル名を入力する必要がある
エクスポートされたコードに MISSING_API_KEY が表示される	プレースホルダーが挿入されていない	codeExport.ts では常に API_KEY_PLACEHOLDER = "$OMNIROUTE_API_KEY" を使用する

---

参考資料

• マスタープラン: _tasks/features-v3.8.6/refactorpages/_orchestration/master-plan-group-C.md
• 機能プラン: _tasks/features-v3.8.6/refactorpages/17-playground-studio-redesign.plan.md
• コードエクスポート: src/lib/playground/codeExport.ts
• プロンプト改善機能: src/lib/playground/promptImprover.ts
• Search Tools Studio: docs/frameworks/SEARCH_TOOLS_STUDIO.md

---

OmniRoute ソースコード (a58000c7685f)