Shadcn Ui MCP Server

## 🚀 shadcn-ui MCP Server

*A server providing MCP services for shadcn/ui component reference materials*

This is a TypeScript-based MCP server that offers reference information related to shadcn/ui components. It implements the Model Context Protocol (MCP) server, enabling AI assistants to access shadcn/ui component documentation and examples.

## 🚀 Quick Start
This server is designed to provide MCP services for shadcn/ui component reference materials. It helps AI assistants access relevant documentation and examples by implementing the MCP server.

## ✨ Features

### Tools
- `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 of a specific component.
- `search_components` - Search for components by keyword.

### Functions
This server fetches and caches information from the following sources:
- The official shadcn/ui documentation website (https://ui.shadcn.com).
- The shadcn/ui GitHub repository.

The structured data provided includes:
- Component descriptions.
- Installation instructions.
- Usage examples.
- Attributes and variants.
- Code examples.

## 📦 Installation

### Claude Desktop Configuration
To use with Claude Desktop, add the server configuration:

On MacOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
On Windows: %APPDATA%/Claude/claude_desktop_config.json

#### Option 1: Use Local Build
```json
{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "/path/to/shadcn-ui-server/build/index.js"
    }
  }
}

Option 2: Use npx Command

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

Windsurf Configuration

Add the following to ./codeium/windsurf/model_config.json:

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

Cursor Configuration

Add the following to .cursor/mcp.json:

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

💻 Usage Examples

Basic Usage

# Install dependencies
npm install

# Build the server
npm run build

# Development with automatic rebuild
npm run watch

Advanced Usage

# Run the MCP Inspector for debugging
npm run inspector

The above content is a beautified README in English, which includes a clear structure, emojis for better visual effect, and the original code and important information remain unchanged.