shadcn-ui MCP サーバー

shadcn/ui コンポーネント参照用の MCP サーバー

これはTypeScriptベースのMCPサーバーで、shadcn/uiコンポーネントのリファレンス情報を提供します。AIアシスタントがshadcn/uiコンポーネントのドキュメントやサンプルにアクセスできるようにするModel Context Protocol（MCP）サーバーを実装しています。

特徴

ツール

list_shadcn_components - 利用可能なすべてのshadcn/uiコンポーネントのリストを取得します
get_component_details - 特定のコンポーネントの詳細情報を取得する
get_component_examples - 特定のコンポーネントの使用例を取得する
search_components - キーワードでコンポーネントを検索

機能性

このサーバーは以下から情報を収集してキャッシュします:

shadcn/ui の公式ドキュメントサイト ( https://ui.shadcn.com )
shadcn/ui GitHubリポジトリ

次のような構造化データが提供されます:

コンポーネントの説明
インストール手順
使用例
小道具とバリエーション
コードサンプル

発達

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

npm install

サーバーを構築します。

npm run build

自動リビルドを使用した開発の場合:

npm run watch

インストール

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

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

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

オプション1: ローカルビルドを使用する

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "/path/to/shadcn-ui-server/build/index.js"
    }
  }
}

オプション2: npxコマンドを使用する

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}

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

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

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}

カーソルの設定

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

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}

デバッグ

MCPサーバーはstdio経由で通信するため、デバッグが困難になる場合があります。パッケージスクリプトとして提供されているMCP Inspectorの使用をお勧めします。

npm run inspector

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

You must be authenticated.

security – no known vulnerabilities

license - permissive license

quality - confirmed to work

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

AI アシスタントが、コンポーネントの詳細、使用例、検索機能に関する参照情報を提供する TypeScript ベースの MCP サーバーを通じて shadcn/ui コンポーネントのドキュメントと例にアクセスできるようにします。

Related MCP Servers

Apifox MCP
sujianqingfeng
-
security
-
license
-
quality
An MCP server that integrates Apifox API documentation with AI assistants, allowing AI to extract and understand API information from Apifox projects.
Last updated -
91
TypeScript
code2prompt-mcp
ODAncona
-
security
A
license
-
quality
An MCP server that analyzes codebases and generates contextual prompts, making it easier for AI assistants to understand and work with code repositories.
Last updated -
10
Python
MIT License
browser-use MCP Server
co-browser
-
security
A
license
-
quality
An MCP server that enables AI assistants to control a web browser through natural language commands, allowing them to navigate websites and extract information via SSE transport.
Last updated -
505
Python
MIT License
ServiceTitan MCP Server
JordanDalton
A
security
F
license
A
quality
An MCP server that allows AI assistants to interact with the ServiceTitan API, requiring client credentials for authentication.
Last updated -
454
TypeScript

View all related MCP servers

shadcn-ui MCP Server