Skip to main content
Glama

@jpisnice/shadcn-ui-mcp-server

by Jpisnice
npmGitHub
TypeScript
MIT License
148
47
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

Shadcn UI v4 MCP Server

A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. This server enables AI tools like Claude Desktop, Continue.dev, and other MCP-compatible clients to retrieve and work with shadcn/ui components seamlessly.

🚀 Key Features

  • Component Source Code: Get the latest shadcn/ui v4 component TypeScript source
  • Component Demos: Access example implementations and usage patterns
  • Blocks Support: Retrieve complete block implementations (dashboards, calendars, login forms, etc.)
  • Metadata Access: Get component dependencies, descriptions, and configuration details
  • Directory Browsing: Explore the shadcn/ui repository structure
  • GitHub API Integration: Efficient caching and intelligent rate limit handling

📦 Quick Start

The fastest way to get started - no installation required!

# Basic usage (rate limited to 60 requests/hour) npx @jpisnice/shadcn-ui-mcp-server # With GitHub token for better rate limits (5000 requests/hour) npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here # Short form npx @jpisnice/shadcn-ui-mcp-server -g ghp_your_token_here # Using environment variable export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here npx @jpisnice/shadcn-ui-mcp-server

🎯 Try it now: Run npx @jpisnice/shadcn-ui-mcp-server --help to see all options!

🔧 Command Line Options

shadcn-ui-mcp-server [options] Options: --github-api-key, -g <token> GitHub Personal Access Token --help, -h Show help message --version, -v Show version information Environment Variables: GITHUB_PERSONAL_ACCESS_TOKEN Alternative way to provide GitHub token Examples: npx @jpisnice/shadcn-ui-mcp-server --help npx @jpisnice/shadcn-ui-mcp-server --version npx @jpisnice/shadcn-ui-mcp-server -g ghp_1234567890abcdef GITHUB_PERSONAL_ACCESS_TOKEN=ghp_token npx @jpisnice/shadcn-ui-mcp-server

🔑 GitHub API Token Setup

Why do you need a token?

  • Without token: Limited to 60 API requests per hour
  • With token: Up to 5,000 requests per hour
  • Better reliability and faster responses

📝 Getting Your Token (2 minutes)

  1. Go to GitHub Settings:
  2. Generate New Token:
    • Click "Generate new token (classic)"
    • Add a note: "shadcn-ui MCP server"
    • Expiration: Choose your preference (90 days recommended)
    • Scopes: ✅ No scopes needed! (public repository access is sufficient)
  3. Copy Your Token:
    • Copy the generated token (starts with ghp_)
    • ⚠️ Save it securely - you won't see it again!

🚀 Using Your Token

Method 1: Command Line (Quick testing)

npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

Method 2: Environment Variable (Recommended)

# Add to your shell profile (~/.bashrc, ~/.zshrc, etc.) export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here # Then simply run: npx @jpisnice/shadcn-ui-mcp-server

Method 3: Claude Desktop Configuration

{ "mcpServers": { "shadcn-ui": { "command": "npx", "args": ["@jpisnice/shadcn-ui-mcp-server"], "env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here" } } } }

✅ Verify Your Setup

# Test without token (should show rate limit warning) npx @jpisnice/shadcn-ui-mcp-server --help # Test with token (should show success message) npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token --help # Check your current rate limit curl -H "Authorization: token ghp_your_token" https://api.github.com/rate_limit

🛠️ Available Tools

The MCP server provides these tools for AI assistants:

Component Tools

  • get_component - Get component source code
  • get_component_demo - Get component usage examples
  • list_components - List all available components
  • get_component_metadata - Get component dependencies and info

Block Tools

  • get_block - Get complete block implementations (dashboard-01, calendar-01, etc.)
  • list_blocks - List all available blocks with categories

Repository Tools

  • get_directory_structure - Explore the shadcn/ui repository structure

Example Tool Usage

// These tools can be called by AI assistants via MCP protocol // Get button component source { "tool": "get_component", "arguments": { "componentName": "button" } } // List all components { "tool": "list_components", "arguments": {} } // Get dashboard block { "tool": "get_block", "arguments": { "blockName": "dashboard-01" } }

🔗 Claude Desktop Integration

Add to your Claude Desktop configuration (~/.config/Claude/claude_desktop_config.json):

{ "mcpServers": { "shadcn-ui": { "command": "npx", "args": ["@jpisnice/shadcn-ui-mcp-server", "--github-api-key", "ghp_your_token_here"] } } }

Or with environment variable:

{ "mcpServers": { "shadcn-ui": { "command": "npx", "args": ["@jpisnice/shadcn-ui-mcp-server"], "env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here" } } } }

🐛 Troubleshooting

Common Issues

"Rate limit exceeded" errors:

# Solution: Add GitHub API token npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

"Command not found" errors:

# Solution: Install Node.js 18+ and ensure npx is available node --version # Should be 18+ npx --version # Should work

Component not found:

# Check available components first npx @jpisnice/shadcn-ui-mcp-server # Then call list_components tool via your MCP client

Network/proxy issues:

# Set proxy if needed export HTTP_PROXY=http://your-proxy:8080 export HTTPS_PROXY=http://your-proxy:8080 npx @jpisnice/shadcn-ui-mcp-server

Debug Mode

Enable verbose logging:

# Set debug environment variable DEBUG=* npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📞 Support

⭐ Acknowledgments

  • shadcn for the amazing UI component library
  • Anthropic for the Model Context Protocol specification
  • The open source community for inspiration and contributions

Made with ❤️ by Janardhan Polle

Star ⭐ this repo if you find it helpful!

Install Server
A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

How are these scores calculated?

Tools

A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation

  1. 🚀 Key Features
    1. 📦 Quick Start
      1. ⚡ Using npx (Recommended)
      2. 🔧 Command Line Options
    2. 🔑 GitHub API Token Setup
      1. 📝 Getting Your Token (2 minutes)
      2. 🚀 Using Your Token
      3. ✅ Verify Your Setup
    3. 🛠️ Available Tools
      1. Component Tools
      2. Block Tools
      3. Repository Tools
      4. Example Tool Usage
    4. 🔗 Claude Desktop Integration
      1. 🐛 Troubleshooting
        1. Common Issues
        2. Debug Mode
      2. 📄 License
        1. 🤝 Contributing
          1. 📞 Support
            1. 🔗 Related Projects
              1. ⭐ Acknowledgments

                Related Resources

                Related MCP Servers

                • mcp-llm

                  sammcj
                  A
                  security
                  A
                  license
                  A
                  quality
                  An MCP server that provides LLMs access to other LLMs
                  Last updated -
                  4
                  14
                  12
                  JavaScript
                  MIT License

                • MCP LLMS-TXT Documentation Server

                  langchain-ai
                  -
                  security
                  A
                  license
                  -
                  quality
                  An MCP server that provides tools to load and fetch documentation from any llms.txt source, giving users full control over context retrieval for LLMs in IDE agents and applications.
                  Last updated -
                  177
                  Python
                  MIT License
                  • Apple

                • Library Docs MCP Server

                  vikramdse
                  -
                  security
                  F
                  license
                  -
                  quality
                  An MCP server that fetches real-time documentation for popular libraries like Langchain, Llama-Index, MCP, and OpenAI, allowing LLMs to access updated library information beyond their knowledge cut-off dates.
                  Last updated -
                  Python

                • shadcn-ui MCP Server

                  ymadd
                  A
                  security
                  A
                  license
                  A
                  quality
                  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.
                  Last updated -
                  4
                  200
                  17
                  JavaScript
                  MIT License
                  • Apple

                View all related MCP servers

                New MCP Servers

                MCP directory API

                We provide all the information about MCP servers via our MCP API.

                curl -X GET 'https://glama.ai/api/mcp/v1/servers/Jpisnice/shadcn-ui-mcp-server'

                If you have feedback or need assistance with the MCP directory API, please join our Discord server