Shadcn UI MCP Server

Shadcn UI v4 MCP サーバー

🚀 shadcn/ui コンポーネントを AI ワークフローに統合する最速の方法

AI アシスタントに shadcn/ui v4 のコンポーネント、ブロック、デモ、メタデータへの包括的なアクセスを提供する Model Context Protocol（MCP）サーバーです。AI を活用した開発ワークフローで使用できる、React、Svelte、Vue、React Native の実装をシームレスに取得できます。

✨ 主な機能

• 🎯 マルチフレームワーク対応 - React、Svelte、Vue、React Native の実装に対応
• 📦 コンポーネントのソースコード - shadcn/ui v4 の最新 TypeScript ソース
• 🎨 コンポーネントのデモ - 実装例と使用パターン
• 🏗️ ブロック対応 - ブロックの完全な実装（ダッシュボード、カレンダー、フォーム）
• 📋 メタデータへのアクセス - 依存関係、説明、設定の詳細
• 🔍 ディレクトリの閲覧 - リポジトリ構造を探索
• ⚡ スマートキャッシュ - レート制限への対応に加え、効率的な GitHub API 連携を実現。リストおよび読み取り結果にはプロトコルのキャッシュヒント（ttlMs／cacheScope）も含まれます
• ⌨️ 引数の補完 - プロンプトおよびリソーステンプレートの引数を自動補完（コンポーネント名、パッケージマネージャー、ビルドツールなど）
• 🌐 Streamable HTTP トランスポート - 複数クライアントのデプロイに対応するステートレスな /mcp エンドポイント（MCP 仕様 2026-07-28）
• 🐳 Docker 対応 - Docker Compose による本番環境向けコンテナ化

🚀 クイックスタート

# Basic usage (60 requests/hour)
npx @jpisnice/shadcn-ui-mcp-server

# With GitHub token (5000 requests/hour) - Recommended
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

# Switch frameworks
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
npx @jpisnice/shadcn-ui-mcp-server --framework vue
npx @jpisnice/shadcn-ui-mcp-server --framework react-native

# Use Base UI instead of Radix (React only)
npx @jpisnice/shadcn-ui-mcp-server --ui-library base

🎯 2 分で GitHub トークンを取得：docs/getting-started/github-token.md

📦 ワンクリックインストール（Claude Desktop）

.mcpb ファイルをダウンロードしてダブルクリックすると、すぐにインストールできます。

1. Releases から shadcn-ui-mcp-server.mcpb をダウンロードします
2. ファイルをダブルクリックすると、Claude Desktop が自動的に開きます
3. GitHub トークンを入力します（任意。レート制限を緩和できます）
4. Install をクリックすると、すぐにツールを利用できます

手動インストール： Claude Desktop → Settings → MCP → Add Server → Browse → .mcpb ファイルを選択

参考資料： Anthropic Desktop Extensions | Building MCPB

🌐 HTTP トランスポートと Docker デプロイ

このサーバーは 2026-07-28 MCP 仕様（MCP TypeScript SDK v2 経由）を実装しており、2025 年頃のクライアントとの互換性も維持しています。クライアントで最新のプロトコルを使用する方法、または使用を必須にする方法については、最新プロトコルガイドをご覧ください。stdio に加えて、複数クライアントや本番環境向けのデプロイ用に、単一のステートレスな /mcp エンドポイントで Streamable HTTP を提供できます。

HTTP のクイックスタート

# HTTP mode (stateless, supports many concurrent clients)
node build/index.js --mode http --port 7423

# Docker Compose (production ready)
docker-compose up -d

# Connect with Claude Code
claude mcp add --scope user --transport http shadcn-mcp-server http://localhost:7423/mcp

トランスポートモード

• stdio（デフォルト）- CLI 用の標準入力／標準出力
• http - /mcp での Streamable HTTP
• dual - stdio と HTTP を同時に使用

従来の SSE トランスポート（/sse + /message）は削除されました。--mode sse は、非推奨の http エイリアスとして引き続き受け付けられます。

Docker の例

# Basic container
docker run -p 7423:7423 shadcn-ui-mcp-server

# With GitHub API token
docker run -p 7423:7423 -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token shadcn-ui-mcp-server

# Docker Compose (recommended)
docker-compose up -d
curl http://localhost:7423/health

環境変数

• MCP_TRANSPORT_MODE - トランスポートモード（stdio|http|dual）
• MCP_PORT - HTTP サーバーのポート（デフォルト：7423 - キーパッドで SHADCN！）
• MCP_HOST - ホストのバインド先（デフォルト：0.0.0.0）
• MCP_CORS_ORIGINS - CORS のオリジン（カンマ区切り）
• MCP_PROTOCOL - 受け入れるプロトコルの世代：any（デフォルト。2026-07-28 と 2025 年世代のフォールバック）または modern（2026-07-28 のみ）。CLI：--protocol
• GITHUB_PERSONAL_ACCESS_TOKEN - GitHub API トークン
• UI_LIBRARY - UI プリミティブライブラリ：radix（デフォルト）または base（React のみ）

📚 ドキュメント

セクション	説明
🚀 はじめに	インストール、セットアップ、最初の手順
⚙️ 設定	フレームワークの選択、トークン、オプション
🔌 インテグレーション	エディターとツールのインテグレーション
📖 使い方	例、チュートリアル、ユースケース
🎨 フレームワーク	フレームワーク固有のドキュメント
🐛 トラブルシューティング	よくある問題と解決策
🔧 API リファレンス	ツールのリファレンスと技術的な詳細

🎨 フレームワークのサポート

この MCP サーバーは、人気のある 4 つの shadcn 実装をサポートしています。

フレームワーク	リポジトリ	メンテナー	説明
React（デフォルト）	shadcn/ui	shadcn	shadcn/ui v4 の React コンポーネント
Svelte	shadcn-svelte	huntabyte	shadcn-svelte の Svelte コンポーネント
Vue	shadcn-vue	unovue	shadcn-vue の Vue コンポーネント
React Native	react-native-reusables	Founded Labs	react-native-reusables の React Native コンポーネント

UI ライブラリ（React のみ）

shadcn/ui v4 は、React 用の 2 つのプリミティブライブラリをサポートしています：Radix UI（デフォルト）と Base UI。

# Radix UI (default)
npx @jpisnice/shadcn-ui-mcp-server --framework react --ui-library radix

# Base UI
npx @jpisnice/shadcn-ui-mcp-server --framework react --ui-library base

# Or via environment variable
UI_LIBRARY=base npx @jpisnice/shadcn-ui-mcp-server

Claude Desktop の設定例：

{
  "args": ["--framework", "react", "--ui-library", "base"]
}

🛠️ 基本的なセットアップ

1. GitHub トークンを取得する（推奨）

# Visit: https://github.com/settings/tokens
# Generate token with no scopes needed
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here

2. サーバーを起動する

# React (default)
npx @jpisnice/shadcn-ui-mcp-server

# Svelte
npx @jpisnice/shadcn-ui-mcp-server --framework svelte

# Vue  
npx @jpisnice/shadcn-ui-mcp-server --framework vue

# React Native
npx @jpisnice/shadcn-ui-mcp-server --framework react-native

3. エディターと連携する

• Autohand Code：Autohand Code との連携（下記）を参照してください
• Claude Code：Claude Code との連携（下記）を参照してください
• VS Code：docs/integration/vscode.md
• Cursor：docs/integration/cursor.md
• Claude Desktop：docs/integration/claude-desktop.md
• Continue.dev：docs/integration/continue.md

💻 Autohand Code との連携

Autohand Code CLI を使って、shadcn/ui MCP サーバーを追加します。

autohand mcp add shadcn bunx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN

ユーザー設定ではなく、現在のプロジェクトの .autohand 設定にサーバーを保存するには、shadcn の前に --scope project を追加してください。

💻 Claude Code との連携

クイック追加（CLI）

# Add the shadcn-ui MCP server
claude mcp add shadcn -- bunx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN

HTTP トランスポート

Streamable HTTP トランスポートを使った本番環境へのデプロイについて：

# Start server in HTTP mode
node build/index.js --mode http --port 7423

# Connect with Claude Code
claude mcp add --scope user --transport http shadcn-mcp-server http://localhost:7423/mcp

フレームワーク固有のコマンド

フレームワーク固有のコマンド（React、Svelte、Vue、React Native）については、Claude Code 連携ガイドを参照してください。

リファレンス：Claude Code MCP ドキュメント

🎯 ユースケース

• AI を活用した開発 - AI アシスタントに shadcn/ui を使った UI を構築させます
• 複数クライアントへのデプロイ - ステートレスな HTTP トランスポートにより、スティッキーセッションなしで水平方向にスケールできます
• 本番環境 - ヘルスチェックとモニタリングに対応した Docker Compose をすぐに利用できます
• コンポーネントの探索 - 利用可能なコンポーネントとその使い方を確認できます
• 複数のフレームワークの学習 - React、Svelte、Vue、React Native の実装を比較できます
• 迅速なプロトタイピング - ダッシュボードやフォームなどの完全なブロック実装を入手できます
• コード生成 - 適切な依存関係を含むコンポーネントコードを生成します

📦 インストール

# Global installation (optional)
npm install -g @jpisnice/shadcn-ui-mcp-server

# Or use npx (recommended)
npx @jpisnice/shadcn-ui-mcp-server

🔨 ソースからのビルド

前提条件

• Node.js >= 20.0.0
• npm または pnpm

ビルド手順

# Clone the repository
git clone https://github.com/Jpisnice/shadcn-ui-mcp-server.git
cd shadcn-ui-mcp-server

# Install dependencies
npm install

# Build the project
npm run build

# Run the server
node build/index.js --github-api-key YOUR_TOKEN

ローカルで実行

# After building, run with options
node build/index.js --github-api-key YOUR_TOKEN
node build/index.js --framework svelte

MCPB パッケージのビルド

このプロジェクトには、MCPB 仕様に準拠した manifest.json が含まれています。.mcpb ファイルは、サーバー、依存関係、設定を含む ZIP アーカイブです。

パッケージ化の詳しい手順については、CONTRIBUTING.md を参照してください。

参考： MCPB を使用したデスクトップ拡張機能のビルド

🔗 クイックリンク

• 📖 ドキュメント全文
• 🚀 入門ガイド
• 🌐 HTTP トランスポートと Docker のガイド
• 🧭 最新プロトコルガイド（2026-07-28）
• 📝 変更履歴
• 🎨 フレームワークの比較
• 🔧 API リファレンス
• 🐛 トラブルシューティング
• 💬 課題とディスカッション

📄 ライセンス

MIT ライセンス - 詳細は LICENSE を参照してください。

🙏 謝辞

• shadcn - 素晴らしい React UI コンポーネントライブラリに感謝します
• huntabyte - 優れた Svelte 実装に感謝します
• unovue - 包括的な Vue 実装に感謝します
• Founded Labs - React Native 実装に感謝します
• Anthropic - Model Context Protocol の仕様に感謝します

---

Janardhan Polle が ❤️ を込めて作成

役に立ったら、このリポジトリに ⭐ を付けてください！