The Shadcn UI MCP Server allows you to manage and interact with Shadcn UI components and blocks using the Model Control Protocol.
- Component Management:
- List available components with
list-components
- Retrieve documentation with
get-component-docs
- Install components with support for npm, pnpm, yarn, and bun
- List available components with
- Block Management:
- List available blocks with
list-blocks
- Get documentation and code with
get-block-docs
- Install blocks with multiple package manager support
- List available blocks with
- Additional Features:
- Automatic detection of preferred package manager
- Integration with frameworks like Claude Desktop, Windsurf, and Cursor
- Debug capabilities via MCP Inspector tool
Supports using Bun as a package manager when installing shadcn/ui components and blocks
Integrates with Windsurf (part of Codeium) through MCP configuration
Supports using npm as a package manager when installing shadcn/ui components and blocks
Supports using pnpm as a package manager when installing shadcn/ui components and blocks
Provides tools for component and block management for shadcn/ui, allowing users to list, view documentation for, and install shadcn/ui components and blocks
Supports using Yarn as a package manager when installing shadcn/ui components and blocks
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.
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 componentsget-component-docs
: Get documentation for a specific componentinstall-component
: Install a shadcn/ui componentlist-blocks
: Get the list of available shadcn/ui blocksget-block-docs
: Get documentation for a specific blockinstall-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
Windsurf Configuration
Add this to your ./codeium/windsurf/model_config.json
:
Cursor Configuration
Add this to your .cursor/mcp.json
:
Development and Debugging
Local Development
- Install dependencies:
- Build the server:
Debugging
Since MCP servers communicate over stdio, debugging can be challenging. We recommend using the MCP Inspector for debugging:
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 - The official TypeScript SDK for MCP servers and clients
- MCP Inspector - A debugging tool for MCP servers
- 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.
hybrid server
The server is able to function both locally and remotely, depending on the configuration or use case.
A Model Control Protocol server that allows users to discover, install, and manage Shadcn UI components and blocks through natural language interactions in compatible AI tools.
Related MCP Servers
- -securityFlicense-qualityA Model Control Protocol server that enables AI assistants to interact with Metabase databases, allowing models to explore database schemas, retrieve metadata, visualize relationships, and execute actions.Last updated -4Python
- AsecurityAlicenseAqualityHelps AI assistants access shadcn/ui component documentation and examples through a TypeScript-based MCP server that provides reference information for component details, usage examples, and search capabilities.Last updated -435256JavaScriptMIT License
- AsecurityFlicenseAqualityA Model Context Protocol server that enables AI agents to generate, fetch, and manage UI components through natural language interactions.Last updated -32554TypeScript
- -securityFlicense-qualityA server that integrates Blender with local AI models via the Model Context Protocol, allowing users to control Blender using natural language prompts for 3D modeling tasks.Last updated -43Python