shadcn-ui MCP Server
@ymadd
About shadcn-ui MCP Server
MCP server for shadcn/ui component references
Config
Add this server to your MCP-compatible client using the configuration below.
{
"mcpServers": {
"shadcn-ui-server": {
"command": "npx",
"args": [
"-y",
"shadcn-ui-mcp-server"
]
}
}
}Tools
4Get a list of all available shadcn/ui components
Get detailed information about a specific component
Get usage examples for a specific component
Search for components by keyword
Overview
What is shadcn-ui MCP Server?
A TypeScript-based MCP server that provides reference information for shadcn/ui components. It implements the Model Context Protocol to help AI assistants access shadcn/ui component documentation, examples, and code samples by scraping the official documentation site and GitHub repository.
How to use shadcn-ui MCP Server?
Install dependencies with npm install, then build with npm run build. Configure the server in Claude Desktop, Windsurf, or Cursor by adding a JSON entry to the respective configuration file, pointing either to the local build or using the npx command npx -y shadcn-ui-mcp-server.
Key features of shadcn-ui MCP Server
- Lists all available shadcn/ui components
- Retrieves detailed component information (descriptions, installation steps)
- Provides usage examples with code samples
- Searches components by keyword
- Caches scraped data from official sources
Use cases of shadcn-ui MCP Server
- AI assistants answering questions about shadcn/ui components
- Developers quickly fetching component installation instructions and props
- Searching for components that match a specific UI need
- Generating code examples for shadcn/ui usage in projects
FAQ from shadcn-ui MCP Server
What does the shadcn-ui MCP Server do?
It offers tools for AI assistants to list, search, and retrieve detailed reference information about shadcn/ui components, including descriptions, installation instructions, props, and usage examples.
How do I install and configure the server?
Install via npm install and build with npm run build. Configuration files differ per client: for Claude Desktop, edit claude_desktop_config.json; for Windsurf, edit model_config.json; for Cursor, edit .cursor/mcp.json. Use either a local build path or the npx command.
Where does the component data come from?
The server scrapes and caches information from the official shadcn/ui documentation site (https://ui.shadcn.com) and the shadcn/ui GitHub repository.
What are the runtime dependencies?
Node.js and npm are required. The server is written in TypeScript and relies on the MCP SDK. The README does not specify a minimum Node version.
How can I debug the server?
Use the MCP Inspector by running npm run inspector, which provides a URL to access debugging tools. Because MCP servers communicate over stdio, the Inspector is the recommended debugging method.
Frequently asked questions
What does the shadcn-ui MCP Server do?
It offers tools for AI assistants to list, search, and retrieve detailed reference information about shadcn/ui components, including descriptions, installation instructions, props, and usage examples.
How do I install and configure the server?
Install via `npm install` and build with `npm run build`. Configuration files differ per client: for Claude Desktop, edit `claude_desktop_config.json`; for Windsurf, edit `model_config.json`; for Cursor, edit `.cursor/mcp.json`. Use either a local build path or the npx command.
Where does the component data come from?
The server scrapes and caches information from the official shadcn/ui documentation site (https://ui.shadcn.com) and the shadcn/ui GitHub repository.
What are the runtime dependencies?
Node.js and npm are required. The server is written in TypeScript and relies on the MCP SDK. The README does not specify a minimum Node version.
How can I debug the server?
Use the MCP Inspector by running `npm run inspector`, which provides a URL to access debugging tools. Because MCP servers communicate over stdio, the Inspector is the recommended debugging method.
Basic information
More Other MCP servers
XcodeBuildMCP
cameroncookeA Model Context Protocol (MCP) server and CLI that provides tools for agent use when working on iOS and macOS projects.
Codelf
unbugA search tool helps dev to solve the naming things problem.
Website
FunnyWolfAdversary simulation and Red teaming platform with AI
Inbox Zero AI MCP
elie222The world's best AI personal assistant for email. Open source app to help you reach inbox zero fast.
Reactive Resume
amruthpillaiA one-of-a-kind resume builder that keeps your privacy in mind. Completely secure, customizable, portable, open-source and free forever. Try it out today!
Comments