shadcn-ui MCP Server

MCP server for shadcn/ui component references

This is a TypeScript-based MCP server that provides reference information for shadcn/ui components. It implements a Model Context Protocol (MCP) server that helps AI assistants access shadcn/ui component documentation and examples.

Features

$3

- 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

$3

This server scrapes and caches information from:
- The official shadcn/ui documentation site (https://ui.shadcn.com)
- The shadcn/ui GitHub repository

It provides structured data including:
- Component descriptions
- Installation instructions
- Usage examples
- Props and variants
- Code samples

Development

Install dependencies:
``bash
npm install
`

Build the server:
`bash
npm run build
`

For development with auto-rebuild:
`bash
npm run watch
`

Installation

$3

To use with Claude Desktop, add the server config:

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

#### Option 1: Using local build

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

#### Option 2: Using npx command

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

$3

Add this to your ./codeium/windsurf/model_config.json:

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

$3

To configure in Cursor:

1. Open Cursor Settings
2. Go to Features > MCP Servers
3. Click "+ Add New MCP Server"
4. Enter the following:
- Name: "shadcn-ui-server" (or your preferred name)
- Type: "command"
- Command: npx -y shadcn-ui-mcp-server

$3

Since MCP servers communicate over stdio, debugging can be challenging. We recommend using the MCP Inspector, which is available as a package script:

`bash
npm run inspector
``

The Inspector will provide a URL to access debugging tools in your browser.