Search Tools Studio (日本語)

概要

Search Tools Studio は、/dashboard/search-tools を基本的な検索プレイグラウンドから、 Web 検索、Web スクレイピング、プロバイダーの並列比較を統合した 3 タブ構成の Studio へと進化させます。

┌ Search Tools ──────────────────────────────────────────────────────────┐
│ [🔍 検索] [📄 スクレイプ] [⚖ 比較]             142ms · $0.001  </>    │
│ ⓘ [モダリティガイド]                                                  │
├──────────────────────────────────────────┬─────────────────────────────┤
│  {アクティブなタブのコンテンツ}          │ ─ 設定                      │
│                                          │ プロバイダー [自動 ∨]       │
│                                          │   🟢 Serper  $0.001         │
│                                          │   🟢 Tavily  $0.008         │
│                                          │   🔥 Firecrawl (取得)       │
│                                          │ タイプ [web | news]         │
│                                          │ ページ全体 [ ] (スクレイプ) │
│                                          │ 形式 [md|text|html]         │
│                                          │ リランクモデル [∨]          │
└──────────────────────────────────────────┴─────────────────────────────┘

---

タブ

検索タブ

既存の SearchForm + ResultsPanel + RerankPanel を 1 つのタブへと進化させます。

• クエリ → 結果（タイトル、URL、スニペット、関連度スコア）。
• 設定ペインにプロバイダーのメタデータ（コスト、クォータ、ステータス）を表示。
• リランクセクション: リランクモデルを選択し、結果を並べ替え、positionDelta を表示。
• 検索プロバイダーが設定されていない場合は、CTA 付きの空状態を表示。
• SearchHistory.tsx による検索履歴。
• POST /v1/search を呼び出します（既存のエンドポイント、変更なし）。

スクレイプタブ

POST /v1/web/fetch（プラン 05 で作成）を使用して URL からコンテンツを抽出する新しいタブです。

• 入力: URL + ページ全体トグル + 形式セレクター（Markdown / テキスト / HTML）。
• 送信 → 取得 → ScrapeResult.tsx でレンダリング。
• ScrapeResult は Markdown プレビューと RAW 表示切り替えをレンダリング。
• 上限: レスポンス本文が 256 KB を超える場合、UI に (切り詰められました。RAW を表示) と表示し、RAW コンテンツを Monaco モーダルで開きます（D21）。
• メタデータパネル: プロバイダー（firecrawl/jina-reader/tavily-search/tinyfish/nimble-search/anysearch-search）、レイテンシー、コスト、レスポンスサイズ、リンク数。
• useScrapeFetch.ts フックを使用。

比較タブ

最大 4 つのプロバイダーで、同じクエリまたは URL を並列実行します（D22）。

• プロバイダーごとの列を横並びで表示。
• メトリクス: レイテンシー、コスト、結果数、レスポンスサイズ。
• 検索時の URL 重複率を計算（初期結果に対する共有 URL 数）。
• プロバイダーごとに POST /v1/search（検索）または POST /v1/web/fetch（スクレイプ）を呼び出します。

---

設定ペイン（共通）

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

フィールド	注記
プロバイダー	ステータスバッジ（設定済み / 未設定 / レート制限中）付きのドロップダウン
タイプ	web または news（検索のみ）
ページ全体	スクレイプ用トグル — ページ全体または最初に表示されるコンテンツを取得
形式	markdown、text、または html（スクレイプのみ）
リランクモデル	検索後のリランキングに使用する任意のモデル
履歴	折りたたみ可能な検索履歴セクション

---

SearchConceptCard

SearchConceptCard.tsx — 常に表示される折りたたみ可能なアコーディオン。以下について説明します。

概念	概要
検索	Web検索結果の一覧（タイトル、URL、スニペット、関連性スコア）を取得します
スクレイピング	URLの全コンテンツ（Markdown、テキスト、またはHTML）を抽出します
比較	N個のプロバイダーで同じクエリを並列実行します
再ランキング	クエリとの関連性を向上させるため、LLMを使用して結果を並べ替えます
自動（最安）	利用可能な最も安価なプロバイダーを自動的に選択します

---

プロバイダーカタログ

ProviderCatalog.tsx は、GET /api/search/providers から取得した完全なプロバイダー一覧を公開します （F4で取得プロバイダーを含むよう拡張）。

| kind | "search"（20プロバイダー）または "fetch"（firecrawl、jina-reader、tavily-search、tinyfish、nimble-search、anysearch-search） |

ステータスは、認証情報が存在するか、および すべてのキーが現在クールダウン中かを確認することで、リクエスト時に導出されます。

---

コードのエクスポート

ExportCodeModal（Playground Studioからインポート）と codeExport.ts は、 /v1/search および /v1/web/fetch 呼び出し用のcurl / Python / TypeScriptスニペットを生成します。 APIキープレースホルダーは常に $OMNIROUTE_API_KEY です（D11、Playground Studioと共通）。

---

バックエンドの変更

この機能に必要だったバックエンドの変更は1つだけです。

拡張された GET /api/search/providers

src/app/api/search/providers/route.ts は、以下のように拡張されました。

• 6つの取得プロバイダー（firecrawl、jina-reader、tavily-search、tinyfish、nimble-search、anysearch-search）をすべて配列に追加。
• すべての項目に kind: "search" | "fetch" を追加。
• リアルタイムの認証情報の状態から導出される status: "configured" | "missing" | "rate_limited" を追加。
• 後方互換性を維持 — 既存のフィールド（id、name など）は変更なし。

---

主要ファイル

パス	用途
src/app/(dashboard)/dashboard/search-tools/SearchToolsClient.tsx	Studioシェル、タブオーケストレーター
src/app/(dashboard)/dashboard/search-tools/components/SearchToolsTopBar.tsx	タブ + メトリクス + エクスポートボタン
src/app/(dashboard)/dashboard/search-tools/components/SearchToolsConfigPane.tsx	共通設定パネル
src/app/(dashboard)/dashboard/search-tools/components/SearchConceptCard.tsx	説明カード（常に表示）
src/app/(dashboard)/dashboard/search-tools/components/ProviderCatalog.tsx	メタデータ付きプロバイダー一覧
src/app/(dashboard)/dashboard/search-tools/components/ScrapeResult.tsx	Markdownプレビュー + raw切り替え
src/app/(dashboard)/dashboard/search-tools/components/tabs/SearchTab.tsx	検索 + 再ランキングタブ
src/app/(dashboard)/dashboard/search-tools/components/tabs/ScrapeTab.tsx	スクレイピングタブ
src/app/(dashboard)/dashboard/search-tools/components/tabs/CompareTab.tsx	複数プロバイダー比較タブ
src/app/(dashboard)/dashboard/search-tools/hooks/useScrapeFetch.ts	スクレイピング取得フック
src/app/api/search/providers/route.ts	kind + status + 取得プロバイダーを追加して拡張
open-sse/config/searchRegistry.ts	検索プロバイダーのメタデータに関する信頼できる情報源

---

トラブルシューティング

症状	原因	解決方法
スクレイプタブに「endpoint not available」と表示される	/v1/web/fetch が接続されていない	plan 05 がマージ済みであることを確認し、src/app/api/v1/web/fetch/route.ts が存在することを確認する
プロバイダーカタログですべて「missing」と表示される	認証情報が設定されていない	/dashboard/providers で認証情報を追加する
スクレイプしたコンテンツが切り詰められる	レスポンスが 256 KB の上限を超えている	想定された動作（D21）。完全なコンテンツを表示するには「view raw」ボタンを使用する
比較タブにプロバイダーが 2 つしか表示されない	レート制限が有効になっている	2 つ以上のプロバイダーがクールダウン中の可能性があるため、Config ペインでプロバイダーのステータスを確認する
表で「Size」が未変換のキーとして表示される	i18n キーが不足している	ロケールファイルに search.size が存在することを確認し、i18n を再ビルドする

---

参考資料

• マスタープラン: _tasks/features-v3.8.6/refactorpages/_orchestration/master-plan-group-C.md
• 機能プラン: _tasks/features-v3.8.6/refactorpages/18-search-tools-studio-redesign.plan.md
• 検索プロバイダーレジストリ: open-sse/config/searchRegistry.ts
• Playground Studio（共有の ExportCodeModal + codeExport.ts）: docs/frameworks/PLAYGROUND_STUDIO.md
• Web fetch バックエンド: src/app/api/v1/web/fetch/route.ts

---

OmniRoute ソースコード (a58000c7685f)