shadcn-ui-mcp-server

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

The shadcn-ui-mcp-server is an MCP server that provides reference information for shadcn/ui components. Built with TypeScript, this server enables AI assistants to access documentation and examples for shadcn/ui components. It primarily offers structured data including component descriptions, installation instructions, usage examples, props and variants, and code samples.

GitHub

GitHub Stars

User Rating

Not Rated

Favorites

Views

Forks

Issues

Installation

Difficulty

Intermediate

Estimated Time

10-20 minutes

Requirements

Node.js: 18.0.0以上

npm: 8.0.0以上

+1 more

Installation

Prerequisites

Please specify required software and versions:

Node.js: 18.0.0 or higher

npm: 8.0.0 or higher

Claude Desktop: Latest version

Installation Steps

1. Clone Repository

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

2. Install Dependencies

bash
npm install

3. Configure Claude Desktop

Edit claude_desktop_config.json to add the MCP server:

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

4. Start Server

bash
npm start

Troubleshooting

Common Issues

Issue: Server won't start Solution: Check Node.js version and reinstall dependencies. Issue: Not recognized by Claude Desktop Solution: Verify configuration file path and syntax.

Configuration

Basic Configuration

Claude Desktop Setup

Edit ~/.config/claude-desktop/claude_desktop_config.json (macOS/Linux) or %APPDATA%\Claude\claude_desktop_config.json (Windows):

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

Advanced Configuration

Security Settings

Store API keys in environment variables or secure configuration files

Set appropriate file access permissions

Performance Tuning

Configure timeout values

Limit concurrent executions

Configuration Examples

Basic Configuration

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

Examples

Basic Usage

Here are basic usage examples for the MCP server:

Using with Claude Desktop

1Verify MCP Server Startup

Open Claude Desktop and confirm that the configuration has been loaded correctly.

2Execute Basic Commands


   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

Programmatic Usage

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

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

// Execute tool
const result = await client.callTool('list_shadcn_components');

console.log(result);

Advanced Examples

Automation Script

bash
#!/bin/bash
Batch processing example

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

API Integration

python
Python example
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()

Usage example
result = call_mcp_tool('get_component_details')