Shadcn UI MCP サーバー

Shadcn UIコンポーネントの開発エクスペリエンスを向上させるために設計された、強力で柔軟なMCP（モデル制御プロトコル）サーバーです。このサーバーは、高度なツールと機能を備え、UIコンポーネントの構築と管理のための堅牢な基盤を提供します。

特徴

ツール

MCP サーバーは、モデル制御プロトコルを通じて使用できる一連のツールを提供します。

• list-components : 利用可能な shadcn/ui コンポーネントのリストを取得します。

• get-component-docs : 特定のコンポーネントのドキュメントを取得する

• install-component : shadcn/ui コンポーネントをインストールする

• list-blocks : 利用可能なshadcn/uiブロックのリストを取得します

• get-block-docs : 特定のブロックのドキュメントを取得する

• install-blocks : shadcn/ui ブロックをインストールする

機能性

• コンポーネント管理

  • 利用可能なshadcn/uiコンポーネントの一覧

  • 特定のコンポーネントの詳細なドキュメントを入手する

  • 複数のパッケージ マネージャー (npm、pnpm、yarn、bun) をサポートするコンポーネントをインストールします。

• ブロック管理

  • 利用可能なshadcn/uiブロックの一覧

  • 特定のブロックのドキュメントとコードを入手する

  • 複数のパッケージマネージャーをサポートするインストールブロック

• パッケージマネージャーのサポート

  • npm、pnpm、yarn、bun の柔軟なランタイム サポート

  • ユーザーの好みのパッケージマネージャーの自動検出

Related MCP server: shadcn-ui MCP Server

インストール

前提条件

• Node.js (v18以上)

• npm または yarn パッケージマネージャー

クロードデスクトップ構成

Claude Desktop で使用するには、サーバー設定を追加します。

MacOS の場合: ~/Library/Application Support/Claude/claude_desktop_config.json Windows の場合: %APPDATA%/Claude/claude_desktop_config.json

ウィンドサーフィンの構成

これを./codeium/windsurf/model_config.jsonに追加します:

カーソルの設定

これを.cursor/mcp.jsonに追加します:

開発とデバッグ

地域開発

1. 依存関係をインストールします:

2. サーバーを構築します。

デバッグ

MCPサーバーはstdio経由で通信するため、デバッグが困難になる場合があります。デバッグにはMCP Inspectorの使用をお勧めします。

インスペクターはブラウザでデバッグ ツールにアクセスするための URL を提供し、次の操作が可能になります。

• MCP通信を監視する

• ツールの呼び出しと応答を検査する

• サーバーの動作をデバッグする

• リアルタイムログを表示する

関連プロジェクトと依存関係

このプロジェクトは、次のツールとライブラリを使用して構築されています。

• モデルコンテキストプロトコル TypeScript SDK - MCP サーバーおよびクライアント用の公式 TypeScript SDK

• MCP Inspector - MCPサーバーのデバッグツール

• Cheerio - サーバー向けに特別に設計された、高速で柔軟、かつ無駄のないコア jQuery の実装

ライセンス

MIT ライセンス - このプロジェクトはご自由にご自身の目的でご利用ください。

貢献

貢献を歓迎します！お気軽にプルリクエストを送信してください。