The shadcn-ui MCP Server is a TypeScript-based server that provides reference information for shadcn/ui components. With this server, you can:
- List all available shadcn/ui components using
list_shadcn_components
- Get detailed information about specific components using
get_component_details
- Access usage examples for components using
get_component_examples
- Search for components by keywords using
search_components
Provides reference information for shadcn/ui components, including component listings, detailed documentation, usage examples, and search functionality. Scrapes and caches data from the official documentation site and GitHub repository.
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
Tools
list_shadcn_components
- Get a list of all available shadcn/ui componentsget_component_details
- Get detailed information about a specific componentget_component_examples
- Get usage examples for a specific componentsearch_components
- Search for components by keyword
Functionality
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:
Build the server:
For development with auto-rebuild:
Installation
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
Option 1: Using local build
Option 2: Using npx command
Windsurf Configuration
Add this to your ./codeium/windsurf/model_config.json
:
Cursor Configuration
Add this to your .cursor/mcp.json
:
Debugging
Since MCP servers communicate over stdio, debugging can be challenging. We recommend using the MCP Inspector, which is available as a package script:
The Inspector will provide a URL to access debugging tools in your browser.
You must be authenticated.
hybrid server
The server is able to function both locally and remotely, depending on the configuration or use case.
Helps 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.
Related MCP Servers
- -security-license-qualityAn MCP server that integrates Apifox API documentation with AI assistants, allowing AI to extract and understand API information from Apifox projects.Last updated -91TypeScript
- -securityAlicense-qualityAn MCP server that analyzes codebases and generates contextual prompts, making it easier for AI assistants to understand and work with code repositories.Last updated -10PythonMIT License
- -securityAlicense-qualityAn MCP server that enables AI assistants to control a web browser through natural language commands, allowing them to navigate websites and extract information via SSE transport.Last updated -505PythonMIT License
- AsecurityFlicenseAqualityAn MCP server that allows AI assistants to interact with the ServiceTitan API, requiring client credentials for authentication.Last updated -454TypeScript