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.
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
- AsecurityAlicenseAqualityAn MCP server implementation that provides tools for retrieving and processing documentation through vector search, enabling AI assistants to augment their responses with relevant documentation contextLast updated -715208TypeScriptMIT License
- -securityFlicense-qualityAn MCP server that provides AI tools with access to Rust documentation from docs.rs, enabling search for crates, documentation, type information, feature flags, version information, and source code.Last updated -22TypeScript
- AsecurityAlicenseAqualityA 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.Last updated -67688TypeScriptMIT License
- -securityFlicense-qualityEnables AI assistants to search for documentation of packages and services, providing implementation details, examples, and specifications through a specialized API.Last updated -61JavaScript