Shadcn UI MCP Server
@heilgar
About Shadcn UI MCP Server
No overview available yet
Config
Add this server to your MCP-compatible client using the configuration below.
{
"mcpServers": {
"shadcn-ui-server": {
"command": "npx",
"args": [
"@heilgar/shadcn-ui-mcp-server"
]
}
}
}Tools
6Overview
What is Shadcn UI MCP Server?
An MCP (Model Control Protocol) server that enhances the development experience with Shadcn UI components. It provides tooling for listing, documenting, and installing shadcn/ui components and blocks, supporting multiple package managers. Designed for developers using shadcn/ui in their projects.
How to use Shadcn UI MCP Server?
Install and configure the server by adding a JSON entry to your AI client’s config (Claude Desktop, Windsurf, or Cursor). Use tools like list-components, get-component-docs, install-component, list-blocks, get-block-docs, and install-blocks through the MCP interface.
Key features of Shadcn UI MCP Server
- List available shadcn/ui components and blocks
- Get detailed documentation for specific components and blocks
- Install components and blocks with one command
- Supports npm, pnpm, yarn, and bun package managers
- Automatic detection of the user’s preferred package manager
- Debugging via the MCP Inspector tool
Use cases of Shadcn UI MCP Server
- Quickly search and install a shadcn/ui component without leaving your editor
- Browse block documentation and code before adding it to a project
- Automate component installation across different package managers
- Integrate shadcn/ui management into an AI-assisted workflow
FAQ from Shadcn UI MCP Server
What tools does the Shadcn UI MCP Server provide?
It provides six tools: list-components, get-component-docs, install-component, list-blocks, get-block-docs, and install-blocks.
How do I install the Shadcn UI MCP Server?
Run npx @heilgar/shadcn-ui-mcp-server and add the appropriate JSON configuration to your client (Claude Desktop, Windsurf, or Cursor). Configuration examples are provided for each.
What are the prerequisites?
Node.js version 18 or higher and a package manager (npm or yarn) are required.
What package managers are supported?
npm, pnpm, yarn, and bun are supported, with automatic detection of the user’s preferred manager.
How do I debug the server?
Use the MCP Inspector by running npm run inspector. It provides a URL to monitor communication, inspect tool calls, and view real‑time logs.
Frequently asked questions
What tools does the Shadcn UI MCP Server provide?
It provides six tools: `list-components`, `get-component-docs`, `install-component`, `list-blocks`, `get-block-docs`, and `install-blocks`.
How do I install the Shadcn UI MCP Server?
Run `npx @heilgar/shadcn-ui-mcp-server` and add the appropriate JSON configuration to your client (Claude Desktop, Windsurf, or Cursor). Configuration examples are provided for each.
What are the prerequisites?
Node.js version 18 or higher and a package manager (npm or yarn) are required.
What package managers are supported?
npm, pnpm, yarn, and bun are supported, with automatic detection of the user’s preferred manager.
How do I debug the server?
Use the MCP Inspector by running `npm run inspector`. It provides a URL to monitor communication, inspect tool calls, and view real‑time logs.
Basic information
More Other MCP servers
AutoBrowser MCP
autobrowser-aiBrowser MCP is a Model Context Provider (MCP) server that allows AI applications to control your browser
Lemon.io
lemon-ioRequest dedicated senior developers to work on your project, write job descriptions, and prep technical interviews — all without leaving your Claude chat. Just describe what you need, and Lemon.io MCP does the rest. 1–3
Awesome Mlops
visengerA curated list of references for MLOps
Codelf
unbugA search tool helps dev to solve the naming things problem.
Activepieces
activepiecesAI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents
Comments