# shadcn MCP Server

A Model Context Protocol server for shadcn/ui components. Helps AI assistants discover, install, and generate code for shadcn/ui components.

## Installation

### Option 1: Use with Claude Desktop (Recommended)

Add to your Claude Desktop `claude_desktop_config.json`:

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

### Option 2: Clone and Run Locally

```bash
git clone https://github.com/krutikkkkkkkkk/shadcn-mcp-server.git
cd shadcn-mcp-server
npm install
npm run build
npm start
```

### Option 3: Use with Any MCP Client

Install globally:
```bash
npm install -g shadcn-mcp-server
```

Then configure your MCP client to connect to `shadcn-mcp-server`.

## Features

- List and search shadcn/ui components
- Get component details and dependencies  
- Generate installation commands
- Create usage examples with proper imports

## Available Tools

- `list_shadcn_components` - Browse available components
- `get_component_info` - Get component details
- `generate_component_usage` - Generate code examples
- `get_installation_steps` - Get installation instructions

## Usage

Once installed, you can ask your AI assistant:

- **"What shadcn components are available for forms?"**
- **"Show me how to use the button component"** 
- **"How do I install the card and dialog components?"**
- **"Generate a complete form example with shadcn components"**

The server will provide accurate information, installation commands, and code examples.

## Example Conversation

```
You: "I need a modal dialog for my React app"

AI: Let me help you with the shadcn dialog component.

[Uses get_component_info and generate_component_usage tools]

AI: Here's how to install and use the Dialog component:

Installation:
npm install shadcn@latest add dialog

Usage:
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
    </DialogHeader>
    <p>Your dialog content here</p>
  </DialogContent>
</Dialog>
```

## Supported Components (37 total)

**Layout & Navigation**: Accordion, Breadcrumb, Card, Carousel, Collapsible, Navigation Menu, Pagination, Separator, Sheet, Tabs

**Forms & Input**: Button, Checkbox, Form, Input, Label, Radio Group, Select, Slider, Switch, Textarea, Toggle, Toggle Group

**Feedback & Overlays**: Alert, Alert Dialog, Dialog, HoverCard, Popover, Progress, Toast, Tooltip

**Data Display**: Avatar, Badge, Calendar, Command, Skeleton, Table

**Interaction**: Context Menu, Dropdown Menu, Menubar, Scroll Area

## For Developers

```bash
npm install
npm run dev
```

## Development

- `npm run build` - Build TypeScript
- `npm run dev` - Run in development mode
- `npm start` - Run built server

## Usage

Connect with any MCP client and ask:
- "What shadcn components are available?"
- "Show me how to use the button component"
- "How do I install the card and dialog components?"