Skip to main content
Glama

@jpisnice/shadcn-ui-mcp-server

by Jpisnice
npmGitHub
TypeScript
MIT License
430
241
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, VS Code, Cursor, 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

🛠️ Editor Integration

VS Code Integration

Method 1: Using Continue Extension
  1. Install Continue Extension:
    • Open VS Code
    • Go to Extensions (Ctrl+Shift+X)
    • Search for "Continue" and install it
  2. Configure MCP Server:
    • Open Command Palette (Ctrl+Shift+P)
    • Type "Continue: Configure" and select it
    • Add this configuration to your settings:
{ "continue.server": { "mcpServers": { "shadcn-ui": { "command": "npx", "args": ["@jpisnice/shadcn-ui-mcp-server", "--github-api-key", "ghp_your_token_here"] } } } }
Method 2: Using Claude Extension
  1. Install Claude Extension:
    • Search for "Claude" in VS Code extensions
    • Install the official Claude extension
  2. Configure MCP Server:
    • Add to your VS Code settings.json:
{ "claude.mcpServers": { "shadcn-ui": { "command": "npx", "args": ["@jpisnice/shadcn-ui-mcp-server"], "env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here" } } } }

Cursor Integration

Method 1: Global Configuration
  1. Open Cursor Settings:
    • Go to Settings (Cmd/Ctrl + ,)
    • Search for "MCP" or "Model Context Protocol"
  2. Add MCP Server Configuration:
{ "mcpServers": { "shadcn-ui": { "command": "npx", "args": ["@jpisnice/shadcn-ui-mcp-server", "--github-api-key", "ghp_your_token_here"] } } }
Method 2: Workspace Configuration

Create a .cursorrules file in your project root:

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

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" } } } }

Continue.dev Integration

  1. Install Continue.dev:
  2. Configure MCP Server:
    • Open Continue.dev
    • Go to Settings → MCP Servers
    • Add new server:
{ "name": "shadcn-ui", "command": "npx", "args": ["@jpisnice/shadcn-ui-mcp-server", "--github-api-key", "ghp_your_token_here"] }

🎯 Usage Examples

Getting Component Source Code

Ask your AI assistant:

"Show me the source code for the shadcn/ui button component"

The AI can now access the complete TypeScript source code for the button component.

Creating a Dashboard

Ask your AI assistant:

"Create a dashboard using shadcn/ui components. Use the dashboard-01 block as a starting point"

The AI can retrieve the complete dashboard block implementation and customize it for your needs.

Building a Login Form

Ask your AI assistant:

"Help me build a login form using shadcn/ui components. Show me the available form components"

The AI can list all available components and help you build the form.

🛠️ 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" } }

🐛 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

Editor not recognizing MCP server:

# Verify the server is running npx @jpisnice/shadcn-ui-mcp-server --help # Check your editor's MCP configuration # Ensure the command and args are correct

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?

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

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. 🛠️ Editor Integration
      1. VS Code Integration
      2. Cursor Integration
      3. Claude Desktop Integration
      4. Continue.dev Integration
    4. 🎯 Usage Examples
      1. Getting Component Source Code
      2. Creating a Dashboard
      3. Building a Login Form
    5. 🛠️ Available Tools
      1. Component Tools
      2. Block Tools
      3. Repository Tools
      4. Example Tool Usage
    6. 🐛 Troubleshooting
      1. Common Issues
      2. Debug Mode
    7. 📄 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
                559
                57
                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 -
                553
                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 -
                2
                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
                352
                56
                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