shadcn/ui MCPサーバーをClaude Desktopで活用する方法

Claude Desktopでのshadcn/ui MCPサーバーの設定

はじめに

shadcn/ui の Model Context Protocol (MCP) サーバーを使うと、AIアシスタントから自然言語でUIコンポーネントを管理できるようになります。
公式に案内はありますが、ClaudeCodeやCursorでの紹介がメインなので、 Claude Desktop でのセットアップ方法や、その仕組みについて解説します。
Claude Desktop でも、最近はアーティファクトを簡単に作ってモックアップを動かせることもあり、デザイナーやPdMにとっては使いやすいと思います。

MCPとは？

MCP（Model Context Protocol） は、AIアシスタントがローカル環境のツールやサービスと対話するためのプロトコルです。

shadcn/ui MCPサーバーを利用すると、次のような操作が可能になります：

• 自然言語でのコンポーネントインストール
• 利用可能なコンポーネントの一覧表示
• コンポーネントのプロジェクト適用（aliasesに基づく配置）

セットアップ手順

1. プロジェクトの準備

components.json をプロジェクトに追加する必要があります。構成例：

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

2. Claude Desktop向けの設定

設定ファイルの場所

OS	パス
macOS	~/Library/Application Support/Claude/claude_desktop_config.json
Windows	%APPDATA%/Claude/claude_desktop_config.json
Linux	~/.config/Claude/claude_desktop_config.json

設定内容の追加

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["-y", "shadcn@latest", "mcp"],
      "cwd": "/path/to/your/project"
    }
  }
}

• cwd には、プロジェクトのルートディレクトリの絶対パスを指定してください。

レジストリの仕組み

デフォルトレジストリ

components.json に特別な設定をしなくても、デフォルトで https://ui.shadcn.com/r/ が使われます。

{
  "registries": {}
}

カスタムレジストリ（上級者向け）

独自のレジストリを使いたい場合は、以下のように設定可能です：

{
  "registries": {
    "@acme": "https://acme.com/r/{name}.json",
    "@internal": "https://internal.company.com/components/{name}.json"
  }
}

動作の仕組み

MCPサーバーは次のような流れで動作します：

1. 起動時：AIアシスタントがMCPサーバーを起動
2. 設定読み込み：components.json を読み込む
3. 自然言語変換：指示をCLIコマンドへ変換
4. ファイル配置：aliases に従ってファイルを配置

使用例

設定が完了すると、次のような自然言語コマンドが使えます：

• Install the button and dialog components from shadcn
• Show me all available shadcn components
• Search for form-related components in shadcn

こんな感じで確認がでれば正常に動いています

試しにビンゴアプリを作ってもらいました

トラブルシューティング

1. パスエイリアスの不一致

// TypeScript設定例
"@/components/*": ["src/components/*"]

// components.json 側
"aliases": {
  "components": "src/components"
}

2. MCPサーバーが起動しない

• アプリケーションを再起動
• JSON構文エラーの確認
• cwd が正しいか確認

3. コンポーネントが正しく配置されない

components.json の aliases と、実際のディレクトリ構造を再確認してください。

まとめ

shadcn/ui MCPサーバー を活用することで、AIとの自然言語によるコンポーネント管理が可能になります。

Claude Desktopの設定は少々手間ですが、一度設定すれば、UI開発の生産性が大幅に向上する可能性があります。

参考リンク

• shadcn/ui ドキュメント
• MCPについて
• shadcn-ui GitHub