UI Registry

ui-registry-mcp

コーディングエージェントはロジックに優れていますが、デザインのセンスはあまり得意ではありません。料金ページを作るよう頼むと、優れた UI/UX の専門家が作った美しいオープンソースコンポーネントが何千もすぐに取得できるのに、記憶を頼りに平凡で汎用的なカードを一から作ってしまいます。

これは、そのギャップを埋めるMCPサーバーです。Claude Code、Cursor、Windsurf、その他あらゆる MCP クライアントに接続でき、エージェントが実際の 12 のコンポーネントライブラリを参照して、検索し、実際のソースコードを取得し、選択肢を比較し、すべてが一貫した見た目になっているか確認できるようにします。作業中も、エディターを離れる必要はありません。

考え方はシンプルです。何を使うか、どう組み合わせるか、何を調整するかという判断はエージェントが担い、技術と品質はライブラリが担います。このサーバーは、その橋渡しをするだけです。

クイックスタート

クローンもビルドも不要です。公開パッケージを MCP クライアントに指定してください。

{
  "mcpServers": {
    "ui-registry": {
      "command": "npx",
      "args": ["-y", "ui-registry-mcp"]
    }
  }
}

（Claude Code では、claude mcp add ui-registry -- npx -y ui-registry-mcpを実行するだけでも設定できます。）

次のように UI の作成を依頼してください。

「かっこいい料金セクションを作ってください。ライブラリを調べ、最適なコンポーネントを選ぶか、コンポーネントを調整して、すばらしい料金ページにしてください。」

「データテーブルを追加して、上のカードとデザインが一致するようにしてください。」

裏側では、エージェントが検索、比較を行い、実際のコードをプロジェクトに取り込んだ後、仕上げにデザインの一貫性を簡単に確認します。また、各パーツがどのライブラリに由来するかも知らせてくれるので、クレジットを表示したり、元のコードを確認したりできます。

内容

12 のライブラリに、およそ3,700 個のコンポーネントが含まれており、すべて最新のものを取得します。そのため、常に最新バージョンを使え、古いコピーを使うことはありません。

ライブラリ	コンポーネント数	備考
ReUI	約1,534	幅広い種類があります。一部のブロックは有料のため、サーバーが除外します
Watermelon UI	約1,066	大規模なセットで、web3／DeFi に重点を置いています
Aceternity UI	無料で約116	アニメーション、3D、ベントー形式が特徴です。カタログの大半は Pro です
Tailark	約210	ヒーロー、料金、利用者の声など、マーケティング向けのセクション
Cult UI	約157	モーションを取り入れた、デザインエンジニア向けコンポーネント
SmoothUI	約107	マイクロインタラクション
Optics	約79	アクセシブルで、Base UI をベースにしています
AI Elements	約77	Vercel のチャット／AI ネイティブなコンポーネント（Apache-2.0）
beUI	約64	モーションツールキット
Kibo UI	約41	テーブル、カンバン、ガントチャートなど、データ量の多い UI
Kokonut UI	約40	目を引く単体のカード
useLayouts	約26	アニメーション付きレイアウト

サーバーが提供するものはすべて、オープンなライセンスのもとで公開され、商用利用も無料です。Vercel の AI Elements（Apache-2.0）を除き、すべて MIT ライセンスです（製品をリリースするときは、ライセンス表示を残してください）。一部のライブラリ（ReUI、Aceternity）では、カタログにプレミアムコンポーネントも掲載されていますが、これらはインストール時にエラーになります。気にする必要はありません。verifiedの結果をリクエストすれば、実際に使用できるものだけがサーバーから返されます。それでも、リリース前に各ライブラリのライセンスを確認してください。

標準的な shadcn レジストリを公開しているライブラリであれば、src/registries.tsにエントリーを 1 つ追加するだけです。他に変更は必要ありません。

ツール

6つのツールがあり、おおむね次の順序で使います。

• list_registries — 利用できるライブラリと、そのライセンス、および「注意：有料コンポーネントがあります」といった注記を確認します。
• search_components — 欲しいものを普通の言葉で説明します。同義語にも対応しており（「modal」と尋ねると「dialog」を検索します）、名前と1行の説明だけを返すため、会話に大量のコードが流れ込むことはありません。実際にインストールできるコンポーネントだけを探す場合は、verifiedを追加します。
• compare_components — （「pricing table」のように）同じアイデアをすべてのライブラリから一度に取得し、横並びで比較できるようにします。これにより、エージェントは最初に見つかったものではなく、最適なものを選べます。
• get_component — 1つのコンポーネントの実際のソースを取得します。すべてのファイル、依存関係、正確なnpx shadcn addコマンド、入手元が含まれます。
• check_consistency — 複数のコンポーネントを組み合わせても、デザインを統一するためのツールです。実際のコードを読み、細かな不一致を指摘します。たとえば、あるコンポーネントの角が別のものより丸みを帯びている、ほかはテーマを使っているのに1つだけzinc-900をハードコードしている、ダークモードへの対応が漏れている、といった点を指摘し、それぞれの修正方法を提案します。
• list_components — すべてのコンポーネントと直接のURLを含む完全なディレクトリを取得します。閲覧したり、ソースへのリンクを貼ったりする場合に便利です。

---

内部の仕組み

使うだけなら、上記の内容で十分です。以下では、仕組みとその理由について、興味がある方や貢献を検討している方に向けて説明します。

設計上の判断

デモと、実際にインストールしたまま使い続けられるものを分ける、説明しておく価値のある選択がいくつかあります。

• ミラーではなく、最新のデータを取得します。 これらのライブラリは絶えず更新されています。キャッシュしたコピーはすぐに古くなるため、各レジストリのエンドポイントから直接取得することで、常に最新バージョンを利用できます。セッション中の応答を速くするため、短時間だけメモリ内にキャッシュします。
• 有料コンポーネントについて明確にします。 インストール時に401エラーになるものをエージェントが自信たっぷりに選ぶことがないよう、有料アイテムは事前に明示し、絞り込みもできるようにしています。実際には提供できないものを勧めるエージェントほど困るものはありません。
• 本当の価値は、取得だけでなく一貫性にあります。 レジストリをラップすることは誰にでもできます。エージェントが構築したUIを洗練された見た目にするには、異なるソースを組み合わせたときに生じるトークン、余白、角丸のずれを検出することが重要です。そのため、これは後回しにする機能ではなく、主要なツールとして用意しています。
• クレジットを明記します。 すべてのコンポーネントにはソースURLと、そのまま提示できるクレジット表記が付属し、エージェントにはそれを引き継ぐよう指示しています。誰の成果を土台にしているのか、常に把握できるようにするべきです。
• 1つのライブラリの停止で検索全体が失敗することはありません。 問題が起きた場合はリクエストを再試行し、レジストリが停止している場合は検索全体を失敗させるのではなく、そのレジストリを結果から除外します。

ローカル開発

npm install
npm run build
npm test          # spins up the server and exercises every tool end-to-end
npm run smoke      # quick check that all the registries are reachable
npm run catalog    # dump the whole directory to catalog.json

ロードマップ — 今後の課題について

現時点でも十分に役立ちますが、さらに改善するには2つの課題があり、どちらもすぐにできる小さな変更ではなく、本格的なプロジェクトです。

• ビジュアルプレビュー。 UIは目で見て選ぶものですが、現状ではエージェントがテキストから選んでいます。問題は、これらのライブラリがプレビュー画像を一貫した形で提供していないことです。きちんと実現するには、コンポーネントのレンダリングとスクリーンショット撮影が必要です。これはインフラの整備であり、設定フラグを追加するだけではありません。
• 意味に基づく検索。 現在の検索は同義語に対応していますが、「オンボーディング画面向けの親しみやすいもの」といった意図までは理解できません。実際の埋め込み表現を使えば、この問題を解決できます。

---

フィードバックとコントリビューション

これは、エージェントの UI がほかのエージェントの UI と同じように見えないようにするためのものです。実際に使って、何がうまくいかなかったか、何が不足していたかを教えてもらうたびに、さらに良くなっていきます。使いにくい点に気づいたときや、機能のアイデアがあるとき、またはここに加えるべきライブラリをご存じの場合は、 イシューを作成してください。ぜひご意見をお聞かせください。

プルリクエストも大歓迎です。特に、新しいレジストリ（通常は src/registries.ts に数行追加するだけです）や、より優れた整合性チェックを歓迎します。セットアップ方法はCONTRIBUTING.mdを、変更内容はCHANGELOG.mdをご覧ください。時間の節約に役立ったら、リポジトリに ⭐ を付けていただけると、とても励みになりますし、ほかの人にも見つけてもらいやすくなります。

このプロジェクトを支えるライブラリを開発しているチームの皆さん、ReUI、Aceternity、Tailark、Cult UI、SmoothUI、Optics、beUI、Kibo、Kokonut、useLayouts、Watermelonに、心から感謝します。また、これらすべてを連携させているshadcnレジストリエコシステムにも感謝します。これは皆さんの技術をつなぐ架け橋です。皆さんなしには成り立ちません。

MITライセンスです。