Shadcn Space MCP

shadcnspace-mcp

Shadcn Space の公式 Model Context Protocol（MCP）サーバーです。

この MCP サーバーを使うと、AI 搭載 IDE やコーディングエージェント（Cursor、Windsurf、Claude Desktop、Cline、Antigravity など）が、コピー＆ペーストすることなく、プロジェクト内から Shadcn Space の UI ブロック、ランディングページ、コンポーネントを直接検出、検索、インストール、設計できます。

クイックインストール

CLI を使用する場合

npx shadcnspace-cli install <client>

対応クライアント

• cursor
• windsurf
• claude
• cline
• antigravity

手動インストール

IDE またはクライアントの MCP 設定（mcpServers）に追加します。

{
  "mcpServers": {
    "shadcnspace-mcp": {
      "command": "npx",
      "args": ["-y", "shadcnspace-mcp@latest"]
    }
  }
}

詳しくは、ドキュメントをご覧ください：MCP サーバーの使用方法

---

利用可能なツール

このサーバーは、MCP 経由で呼び出せる 14 個の専用ツールを提供します。

ツール名	説明
listCategories	14 個のブロックカテゴリ（hero、features、pricing、testimonials、faq、cta、header、footer、stats、forms、content、ecommerce、ai、widgets）について、合計、無料、PRO のブロック数をリアルタイムで返します。
listBlocks	ライセンス情報（isPro）とともにブロックを一覧表示します。category とライセンス種別（all、free、pro）で絞り込めます。
listFreeBlocks	ライセンス不要の 100％無料の Shadcn Space ブロックのみを一覧表示します。カテゴリとキーワードでの任意の絞り込みに対応しています。
listComponents	検索クエリとライセンスフィルター（all、free、pro）を使用して、基本コンポーネントを一覧表示します。
getBlockInstall	指定したブロックの公式インストールコマンド、コンポーネントのエクスポート名、インポートパス、JSX の例、スタイルオプション（base/radix）、ライセンス要件を返します。
searchBlocks	キーワード、カテゴリ、および任意の freeOnly フィルターを使用してブロックを検索します。
listInstalledBlocks	ユーザーのプロジェクトに現在インストールされているブロックとそのファイルを一覧表示します。
listPages	Shadcn Space のすべてのフルページを一覧表示します。
getPageInstall	指定したフルページの公式インストールコマンド、エクスポート名、インポートパス、使用例、スタイルオプションを返します。
searchPages	キーワードまたはタグを使用してフルページを検索します。
listInstalledPages	プロジェクトに現在インストールされているページを一覧表示します。
getLandingPageGuidelines	ランディングページの包括的な UI/UX アーキテクチャ：セクションの順序（Hero -> Logos -> Features -> Testimonials -> Pricing -> FAQ -> CTA -> Footer）、コンテナの標準、および垂直方向の間隔の基準を示します。
handleError	ライセンスエラー、components.json の欠落、コンポーネントが見つからない問題、CLI のインストール失敗を解決するための自己修復診断ツールです。
get_audit_checklist	AI エージェントの必須ワークフロールール：スタイルチェック（base/radix）、パッケージマネージャーの検出、ライセンスの処理、ナビゲーションバーの重複排除です。

ライセンスに関する注意： すべてのページと PRO ブロックを利用するには、有効なライセンスキーとメールアドレスを components.json の registries に設定する必要があります。無料ブロックは、ライセンスなしで直接インストールできます。

---

利用可能なプロンプト

サーバーには、UI アーキテクチャを加速する 7 つの充実したプロンプトが用意されています。

プロンプト／コマンド	説明
build-landing-page	AI エージェントが高いコンバージョン率を実現するランディングページ全体を設計・構築するための、ステップごとのガイダンスです。
add-hero-section	既存のページに適した、インパクトのあるヒーローブロックを検索、インストール、統合します。
add-pricing-section	月額／年額の切り替え機能を備えた、複数プランの料金表を追加します。
add-feature-grid	モダンな機能紹介セクションまたはベントーグリッドを追加します。
create-ui	Shadcn Space のブロックを使用して、ページ全体の UI を設計するための汎用プロンプトです。
search	トピックやキーワードで特定の UI ブロックを検索します。
customization-guidelines	インストールしたブロックのどの部分を安全にカスタマイズできるか（テキストのみ）を定めた厳格なガイドラインです。

---

MCP Inspector によるテストとデバッグ

公式 MCP Inspector を使って、ブラウザー上ですべてのツールとプロンプトをインタラクティブに確認、テスト、デバッグできます。

npm run inspector

---

エージェントの使用例

AI IDE で設定したら、次のようなプロンプトを入力できます。

「Shadcn Space で利用できる無料のヒーローブロックをすべて表示してください。」

「ヒーロー、ベントー形式の機能紹介、お客様の声、料金プラン、FAQ を使って、AI 生産性アプリの SaaS ランディングページ全体を構築してください。」

「base スタイルの pricing-01 のインストールコマンドとインポート文を教えてください。」

「Shadcn Space ではどのようなカテゴリのブロックを利用できますか？」

---

エージェントへの指示（Claude／Cursor／Windsurf）

AI アシスタントが Shadcn Space の公式ベストプラクティス（Base と Radix の確認、パッケージマネージャーの確認、ナビゲーションバーの重複回避）に従うようにするには、claude-instructions.md のシステムプロンプトを .cursorrules、.windsurfrules、または Claude Project Instructions にコピーしてください。

---

ライセンスとクレジット

Shadcn Space によって作成されました。

MIT