Best for
- Developers using shadcn/ui
- Teams wanting AI assistants to generate shadcn/ui-style component code
- Developers needing consistent UI across frameworks (React, Svelte, Vue, React Native)
- Building AI-powered development tools or integrations
S
Shadcn UI MCP Server
Community
Give AI assistants direct access to shadcn/ui v4 components, blocks, and demos
GitHub source repository ↗
66FMRS · C
This server provides rich access to shadcn/ui components with multi-framework support and easy installation. However, it depends on GitHub API, and rate limits are the main bottleneck; configuring a token is recommended for a good experience.
A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. Supports React, Svelte, Vue, and React Native implementations for AI-powered development workflows.
Tools
get_component
Retrieve the full source code of a specific component.
list_components
List all available shadcn/ui components for the current framework.
get_block
Retrieve complete block implementations (e.g., dashboards, calendars, forms).
list_blocks
List all available blocks.
get_demo
Retrieve example implementations and usage patterns for a component.
list_demos
List all available demos.
get_metadata
Retrieve dependencies, descriptions, and configuration details for a component.
browse_directory
Explore repository directory structures.
Setup
- Obtain a GitHub personal access token (optional but recommended for higher rate limits).
- Run the server using npx:
npx @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN. - Add the server to your client (e.g., Claude Desktop) configuration.
claude_desktop_config.json
{
"mcpServers": {
"shadcn": {
"command": "npx",
"args": [
"-y",
"@jpisnice/shadcn-ui-mcp-server",
"--github-api-key",
"YOUR_GITHUB_TOKEN"
]
}
}
}
Fit and risk
Not for
- Users not using shadcn/ui
- Users needing other UI libraries (e.g., Tailwind UI)
- Offline environments (requires GitHub API access)
- Scenarios requiring fully local operation without external API dependencies
Required permissions
- GitHub API access (to fetch component and repository data)
- Network access (for GitHub API and npm package downloads)
- Read environment variables (e.g., GITHUB_PERSONAL_ACCESS_TOKEN)
- Local filesystem operations (e.g., for build caches)
Risks and side effects
- GitHub API rate limiting may cause service unavailability (60 requests/hour default, 5000/hour with token).
- Supply chain risk from npm packages; verify package integrity.
- SSE mode may expose the server on the network; configure CORS and access controls.
- Component code may contain outdated or insecure patterns; review before use.
Troubleshooting
- Verify GitHub token is valid and not expired.
- Ensure network connectivity to GitHub API.
- Check server logs for input/output errors.
- Try using the `--framework` parameter to switch to the desired framework.
- For SSE mode, check if the port is occupied and firewall allows access.
Use cases
AI-powered development: Let AI assistants build UIs with shadcn/ui.
Component discovery: Explore available components and their usage.
Multi-framework learning: Compare React, Svelte, Vue, and React Native implementations.
Rapid prototyping: Get complete block implementations for dashboards, forms, etc.
Code generation: Generate component code with proper dependencies.
Supported clients
Claude DesktopFull support
Claude CodeFull support
VS CodePartial support
CursorPartial support
Continue.devPartial support