README.md•3.66 kB
# Shadcn UI MCP Server
A powerful and flexible MCP (Model Control Protocol) server designed to enhance the development experience with Shadcn UI components. This server provides a robust foundation for building and managing UI components with advanced tooling and functionality.
<a href="https://glama.ai/mcp/servers/@heilgar/shadcn-ui-mcp-server">
<img width="380" height="200" src="https://glama.ai/mcp/servers/@heilgar/shadcn-ui-mcp-server/badge" alt="Shadcn UI Server MCP server" />
</a>
## Features
### Tools
The MCP server provides a set of tools that can be used through the Model Control Protocol:
- `list-components`: Get the list of available shadcn/ui components
- `get-component-docs`: Get documentation for a specific component
- `install-component`: Install a shadcn/ui component
- `list-blocks`: Get the list of available shadcn/ui blocks
- `get-block-docs`: Get documentation for a specific block
- `install-blocks`: Install a shadcn/ui block
### Functionality
- **Component Management**
- List available shadcn/ui components
- Get detailed documentation for specific components
- Install components with support for multiple package managers (npm, pnpm, yarn, bun)
- **Block Management**
- List available shadcn/ui blocks
- Get documentation and code for specific blocks
- Install blocks with support for multiple package managers
- **Package Manager Support**
- Flexible runtime support for npm, pnpm, yarn, and bun
- Automatic detection of user's preferred package manager
## Installation
### Prerequisites
- Node.js (v18 or higher)
- npm or yarn package manager
### Claude Desktop Configuration
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`
```json
{
"mcpServers": {
"shadcn-ui-server": {
"command": "npx",
"args": ["@heilgar/shadcn-ui-mcp-server"]
}
}
}
```
### Windsurf Configuration
Add this to your `./codeium/windsurf/model_config.json`:
```json
{
"mcpServers": {
"shadcn-ui-server": {
"command": "npx",
"args": ["@heilgar/shadcn-ui-mcp-server"]
}
}
}
```
### Cursor Configuration
Add this to your `.cursor/mcp.json`:
```json
{
"mcpServers": {
"shadcn-ui-server": {
"command": "npx",
"args": ["@heilgar/shadcn-ui-mcp-server"]
}
}
}
```
## Development and Debugging
### Local Development
1. Install dependencies:
```bash
npm install
```
2. Build the server:
```bash
npm run build
```
### Debugging
Since MCP servers communicate over stdio, debugging can be challenging. We recommend using the [MCP Inspector](https://github.com/modelcontextprotocol/inspector) for debugging:
```bash
npm run inspector
```
The Inspector will provide a URL to access debugging tools in your browser, allowing you to:
- Monitor MCP communication
- Inspect tool calls and responses
- Debug server behavior
- View real-time logs
## Related Projects and Dependencies
This project is built using the following tools and libraries:
- [Model Context Protocol TypeScript SDK](https://github.com/modelcontextprotocol/typescript-sdk) - The official TypeScript SDK for MCP servers and clients
- [MCP Inspector](https://github.com/modelcontextprotocol/inspector) - A debugging tool for MCP servers
- [Cheerio](https://github.com/cheeriojs/cheerio) - Fast, flexible, and lean implementation of core jQuery designed specifically for the server
## License
MIT License - feel free to use this project for your own purposes.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.