UI Beats

@uibeats/mcp

UI Beats 用の MCP サーバーです。コーディングエージェントがコンポーネントカタログを検索し、コンポーネントのソースコードと props の全内容を読み取り、ウェブサイトを開かずにインストールできます。

インストール

Claude Code：

claude mcp add uibeats -- npx -y @uibeats/mcp

mcpServers ブロックを読み込む Cursor、Windsurf、Claude Desktop など：

{
  "mcpServers": {
    "uibeats": {
      "command": "npx",
      "args": ["-y", "@uibeats/mcp"]
    }
  }
}

ツール

ツール	機能
search_components	自然言語のクエリまたは名前に基づいてカタログをランキング表示します
get_component	1 つのコンポーネントの全ドキュメント：props の表、使用例、完全なソースコード
list_components	利用可能なすべての項目をカテゴリ別に表示します
get_install_command	正確な shadcn コマンドと、インストールされる npm パッケージを表示します

典型的なやり取りでは、エージェントが search_components("card that flips") を呼び出し、次に get_component("flip-card") で JSX を書く前に実際の props を確認し、その後 get_install_command("flip-card") を呼び出して実行します。

仕組み

バックエンドはありません。このサーバーは、サイトがすでに公開している 2 つの静的ファイルをキャッシュするクライアントです。

• /r/components.json：検索インデックス（名前、説明、props、ガイダンス）
• /docs/<category>/<name>.md：各コンポーネントの正式なドキュメント

カタログはメモリ内に 10 分間キャッシュされ、短時間のネットワーク障害によってすべてのツール呼び出しが失敗しないよう、古いコピーもフォールバック用に保持されます。

設定

変数	デフォルト	用途
UIBEATS_URL	https://uibeats.com	作業中にローカルの next dev を指定します

UIBEATS_URL=http://localhost:3000 npx @uibeats/mcp

開発

このパッケージは単独で動作し、サイトの Yarn インストールには含まれません。

cd packages/mcp
npm install
npm run build

ライセンス

MIT