Layro MCP Server認証済み注目

Layro MCP Server とは？

Layro MCP Server は、Layro コンポーネントライブラリのためのリモート MCP サーバーです。このライブラリには、TypeScript で書かれ Tailwind CSS でスタイリングされた本番向けの React UI コンポーネントが 112 個あります。AI コーディングツールはライブラリを検索し、コンポーネントの props や使い方を読み、自分で書く代わりにテスト済みのコンポーネントをインストールできます。

Layro MCP 自体は AI モデルを動かしません。Layro コンポーネントについての正確な情報をツールに渡し、実際の構築はツールが行います。Claude Code、Cursor、VS Code、Codex、Windsurf、Gemini CLI、Antigravity、Claude アプリなどの MCP クライアントで使えます。62 個のコンポーネントは無料の Layro アカウントで使え、Pro コンポーネントには買い切りのライフタイムアクセスが必要です。

Layro MCP Server の使い方

サーバーのアドレスは https://layropro.com/api/mcp（Streamable HTTP）です。検索とコンポーネント詳細はアカウントなしで使えます。コンポーネントのコードを取得するには、https://layropro.com/account の CLI トークンをヘッダーに追加します：Authorization: Bearer <token>、または Authorization をクライアント自身が使う場合は X-API-Key: <token>。これは shadcn CLI 用の LAYRO_KEY と同じトークンなので、コミットするファイルには含めないでください。

Claude Code

claude mcp add --transport http layro https://layropro.com/api/mcp \
  --header "Authorization: Bearer $LAYRO_KEY"

検索と詳細だけでよければヘッダーの行は省略できます。その後 Claude Code 内で /mcp を実行し、layro が接続済みと表示されるか確認します。

Claude Desktop と claude.ai

URL https://layropro.com/api/mcp でカスタムコネクタを追加します。Layro によると、ヘッダーを送れないクライアントでも無料コンポーネントは使えます。

Cursor と VS Code

~/.cursor/mcp.json（またはプロジェクトの .cursor/mcp.json）や VS Code の MCP 設定に url エントリを追加します。

{
  "mcpServers": {
    "layro": {
      "url": "https://layropro.com/api/mcp",
      "headers": { "Authorization": "Bearer YOUR_LAYRO_TOKEN" }
    }
  }
}

shadcn MCP サーバー経由で使う

Layro は shadcn レジストリでもあります。components.json に追加します。

{
  "registries": {
    "@layro": {
      "url": "https://layropro.com/r/{name}",
      "headers": { "Authorization": "Bearer ${LAYRO_KEY}" }
    }
  }
}

.env.local に LAYRO_KEY=<your Layro token> を書き、npx shadcn@latest mcp init --client claude を実行します（claude は cursor、vscode、codex、opencode に置き換え可能）。用途による検索、props、使用例、アクセス確認、テンプレートが加わるため、Layro はできるだけ自社の MCP サーバーを使うよう勧めています。

Layro MCP Server の主な機能

• ライト／ダークモード内蔵の React + TypeScript + Tailwind CSS v4 コンポーネント 112 個。新しいコンポーネントはリリース当日から使えます。
• 正確な名前を知らなくても、コンポーネントの役割で検索できます。
• props、バリアント、npm 依存関係、インストールされるファイル、使用例、アクセシビリティ、レスポンシブ挙動まで含む詳細情報。
• shadcn CLI のコマンドと、プロジェクトに不足しているパッケージだけを返すインストール支援。
• shadcn CLI を実行できないクライアント向けに、完全なソースと読み込まれるすべてのファイルを返します。
• ライブプレビューとライセンス情報付きのテンプレート検索。
• アクセス権はリクエストごとにサーバー側で確認され、漏れたトークンは再発行するとすぐに無効になります。

Layro MCP Server のツール

サーバーは読み取り専用のツールを 8 個公開しています。想定される流れは search_components → get_component → get_installation で、shadcn CLI を実行できない場合は get_component_code を使います。

• コンポーネント：search_components（自然文での検索、カテゴリ指定可、最大 20 件）、get_component、get_component_code（無料コンポーネントには無料トークン、Pro にはライフタイムアクセスが必要）、list_categories。
• インストール：get_installation は最大 10 個のスラッグ、パッケージマネージャー（npm、pnpm、yarn、bun）、導入済みのパッケージを受け取ります。
• テンプレートとアクセス：search_templates、get_template（テンプレートのファイルは返しません）、check_access（コンポーネントやテンプレートを取得できるか、その理由を説明）。

Layro MCP Server のユースケース

• 「Layro から SaaS の料金表やプラン選択のコンポーネントを探して」
• 「Layro のコンポーネントでダッシュボードを作って」
• 「Layro の data table のインストール手順を見せて」
• 「分析ダッシュボードに使える Layro のコンポーネントは？」
• 「Layro のコンポーネントでダークな SaaS ダッシュボードを作って」

Layro MCP Server のトラブルシューティング

• Pro コンポーネントで "No source code was returned" と出る：接続にトークンがないか、そのアカウントにライフタイムアクセスがありません。CLI トークンでヘッダーを追加してください。
• "The credential sent with this connection was not accepted"：トークンの入力ミスか、再発行済みです。アカウントページからコピーし直してください。
• "Free with a Layro account"：無料コンポーネントにも、無料アカウントのトークンを接続に付ける必要があります。
• ツールが表示されない：URL が /api/mcp で終わっているか、クライアントがリモート HTTP サーバーに対応しているかを確認し、クライアントを再起動してください。
• 保存後に import が失敗する：ツールが示すパス（components/ui/…）にファイルを置き、グローバル CSS で Tailwind の後に styles/layro.css を読み込んでください。