ui-component-judgment-mcp

MCPサーバーは、recommend_component という1つのツールを公開しており、UIコンポーネントのニーズを既存のshadcn/uiまたは21st.devコンポーネントで満たすべきか、それともMobbinの実アプリ参照に基づくカスタムビルドが必要かを判定します。検索結果のリストではなく、構造化された判定結果を返します。人間が閲覧するためではなく、エージェントがビルド中に消費するために作られています。

これは製品ブリーフで検証された判定レイヤーを実装しています。フィールド/要件のカバレッジを実際のコンポーネント証拠に対してスコアリングし、use_existing / custom_build に閾値で分類します。no_candidates_found バケットは低カバレッジとは別に保持され、単純なプリミティブ用の静的スキップリスト、およびカバレッジがスナップショットであり永続的な事実ではないため computed_at タイムスタンプが含まれます。

仕組み

サーバーはshadcn/21st.dev/Mobbinを自らスクレイピングしません。各ツール呼び出しは、サーバー側の web_search ツールを有効にしたAnthropic Messages API（claude-sonnet-4-6）に1回リクエストを行い、システムプロンプトには完全なプロセスがエンコードされています。スキップリストチェック、要件抽出、候補検索、実証ベースのカバレッジスコアリング、閾値、そして custom_build の場合のMobbin参照ルックアップです。モデルは構造化JSONを返し、サーバーはそれを呼び出し元エージェントにそのまま渡します。

単純なプリミティブ（button、input、checkbox、label、badge、spinner、tooltip、avatar、icon）はAPI呼び出しの前にローカルで捕捉されるため、リクエストを消費しません。

Related MCP server: shadcn MCP Server

セットアップ

npm install
npm run build

サーバーが実行される環境に ANTHROPIC_API_KEY が設定されている必要があります。

実行

ANTHROPIC_API_KEY=sk-ant-... npm start

これにより、stdio上でMCPサーバーが起動します。MCPクライアント（Claude Code、Cursor、Claude Desktopなど）をこのサーバーに向けてください。正確な設定はクライアントによって異なりますが、一般的には次のようになります。

{
  "mcpServers": {
    "ui-component-judgment": {
      "command": "node",
      "args": ["/path/to/ui-component-mcp/dist/index.js"],
      "env": { "ANTHROPIC_API_KEY": "sk-ant-..." }
    }
  }
}

ツール: recommend_component

入力:

{
  "component_need": "price breakdown with fees and taxes",
  "domain": "Airbnb-style rental marketplace",
  "framework": "React + Tailwind",
  "existing_stack": "already using shadcn/ui"
}

component_need はカテゴリではなく具体的に指定してください。「pricing」ではなく「fees and taxesを含む価格内訳」。曖昧なカテゴリ名は、検証中に誤検出マッチを引き起こしました（一般的なSaaS価格帯コンポーネントが予約チェックアウトのマッチとしてスコアリングされるなど）。

出力: 次のJSONに一致:

{
  "verdict": "use_existing | custom_build",
  "confidence": "high | medium | low",
  "reason": "scored | no_candidates_found | skip_list",
  "computed_at": "2026-08-23",
  "requirements_checked": [ { "requirement": "...", "met": true, "evidence": "..." } ],
  "coverage": "5/7 (71%)",
  "recommendation": {
    "source": "21st.dev | shadcn | null",
    "install_command": "string | null",
    "reference": { "source": "Mobbin", "url": "...", "flow_name": "..." }
  }
}

コスト

自明でない各呼び出しは、短いマルチターンツールループ（検索→スコアリング→応答）を実行し、現在の価格（入力$2/M、出力$10/M、web_search呼び出しあたり$0.01）でSonnet 5を使用した場合、およそ$0.06〜$0.10かかります。スキップリストに含まれるプリミティブはAPIに到達しないため、コストは$0です。品質に触れずにこれを抑える3つの要素があります。

• システムブロックのプロンプトキャッシング（cache_control: ephemeral）— 指示は毎回同一であるため、繰り返しのターンや繰り返しの呼び出しはキャッシュから読み取られ、全額が再請求されることはありません。

• 候補発見のための2回の検索予算（custom_build がMobbinルックアップをトリガーする場合はさらに1回）。shadcnと21st.devは順番ではなく同じターンで検索されるため、成長する会話が呼び出しごとに再送信される回数が少なくなります。

• UI_JUDGMENT_MODEL 環境変数（デフォルトは claude-sonnet-5）— コード変更なしでより安価なモデル（例: Haiku 4.5）に切り替えられます。本番で安価なモデルを信頼する前に、製品ブリーフの5つの検証済みテストケース（価格内訳、キャンセルポリシー、収益ダッシュボード、ギャラリー、メッセージング）を再実行し、判定結果をSonnetのものと差分比較してください。これはテストされておらず、推論のみです。

既知の制限（検証から引き継ぎ）

• キャッシングなし、設計による。 すべての呼び出しはゼロから再検索および再スコアリングします。custom_build の判定は、ライブラリが新しいコンポーネントをリリースするにつれて古くなる可能性があります（検証済み: shadcnの2026年6月のチャットプリミティブにより、おそらくカスタムビルドのメッセージングコンポーネントがほぼ完璧なマッチに変わりました）。呼び出し元エージェント層にキャッシュを追加する場合は、セッションスコープのみにしてください。セッションやビルドをまたいで判定を永続化しないでください。

• スキップリストは出発点であり、実際の使用に対してまだ検証されていません。 すべての呼び出しと、それがスキップリストにヒットしたかどうかをログに記録してください。スキップリストに含まれる項目に対してエージェントがツールを呼び出す（リストが狭すぎる）か、スキップされるべきものに対して汎用UIを出荷する（リストにエントリがない）かを監視してください。

• 完全にサンドボックス化された環境でエンドツーエンドでテストできません。 このサーバーは、api.anthropic.com へのアウトバウンドネットワークアクセスと、モデルのweb_searchツールが到達するものへのアクセスが必要です。一般的なインターネットアクセスをブロックする場所では実行できません。

• 要件抽出とカバレッジスコアリングは、モデルが1回のパスで行う判断であり、決定論的なルックアップではありません。 手動検証中と同様に、パイプラインを無人で信頼する前に、初期出力を実際のコンポーネントと照合してスポットチェックしてください。