shadcn-ui-mcp-server

Name: shadcn-ui-mcp-server
Availability: InStock
Author: ymadd

shadcn-ui-mcp-serverは、shadcn/uiコンポーネントの参照情報を提供するMCPサーバーです。このサーバーはTypeScriptで構築されており、AIアシスタントがshadcn/uiコンポーネントのドキュメントや例にアクセスできるようにします。主に、コンポーネントの説明、インストール手順、使用例、プロパティやバリアント、コードサンプルなどの構造化データを提供します。

GitHub

GitHubスター

ユーザー評価

未評価

お気に入り

閲覧数

フォーク

イシュー

インストール方法

難易度

中級

推定所要時間

10-20 分

必要な環境

Node.js: 18.0.0以上

npm: 8.0.0以上

+1 more

インストール方法

前提条件

必要なソフトウェアとバージョンを明記してください。

Node.js: 18.0.0以上

npm: 8.0.0以上

Claude Desktop: 最新版

インストール手順

1. リポジトリのクローン

bash
git clone https://github.com/ymadd/shadcn-ui-mcp-server.git
cd shadcn-ui-mcp-server

2. 依存関係のインストール

bash
npm install

3. Claude Desktop設定

claude_desktop_config.jsonを編集してMCPサーバーを追加：

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

4. サーバーの起動

bash
npm start

トラブルシューティング

よくある問題

問題: サーバーが起動しない 解決策: Node.jsのバージョンを確認し、依存関係を再インストールしてください。問題: Claude Desktopで認識されない 解決策: 設定ファイルのパスと構文を確認してください。

設定方法

基本設定

Claude Desktop設定

~/.config/claude-desktop/claude_desktop_config.json（macOS/Linux）または %APPDATA%\Claude\claude_desktop_config.json（Windows）を編集：

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

詳細設定

セキュリティ設定

APIキーは環境変数または安全な設定ファイルに保存

ファイルアクセス権限の適切な設定

パフォーマンス調整

タイムアウト値の設定

同時実行数の制限

設定例

基本的な設定

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

使用例

基本的な使用方法

MCPサーバーの基本的な使用方法を以下に示します：

Claude Desktopでの使用

1MCPサーバーの起動確認

Claude Desktopを開き、設定が正しく読み込まれていることを確認してください。

2基本コマンドの実行


   Available tools from this MCP server:
   - list_shadcn_components: Get a list of all available shadcn/ui components
   - get_component_details: Get detailed information about a specific component
   - get_component_examples: Get usage examples for a specific component
   - search_components: Search for components by keyword

プログラムでの使用

javascript
// JavaScript例（Node.js）
const { MCPClient } = require('@modelcontextprotocol/client');

const client = new MCPClient();
await client.connect();

// ツールの実行
const result = await client.callTool('list_shadcn_components');

console.log(result);

応用例

自動化スクリプト

bash
#!/bin/bash
バッチ処理の例

for file in *.txt; do
  mcp-tool process "$file"
done

API統合

python
Python例
import requests
import json

def call_mcp_tool(tool_name):
    response = requests.post(
        'http://localhost:3000/mcp/call',
        json={
            'tool': tool_name
        }
    )
    return response.json()

使用例
result = call_mcp_tool('get_component_details')