Skip to main content
Glama

@jpisnice/shadcn-ui-mcp-server

by Jpisnice
npmGitHub
TypeScript
MIT License
3,585
1,429
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
  • Framework Support: Switch between React (shadcn/ui) and Svelte (shadcn-svelte) implementations

📦 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 # Switch to Svelte framework (default is react) npx @jpisnice/shadcn-ui-mcp-server --framework svelte # Use Svelte with GitHub token npx @jpisnice/shadcn-ui-mcp-server --framework svelte --github-api-key ghp_your_token_here # Using environment variable for framework export FRAMEWORK=svelte npx @jpisnice/shadcn-ui-mcp-server

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

🔄 Framework Selection: The server supports both React (shadcn/ui) and Svelte (shadcn-svelte) implementations. Use --framework svelte to switch to Svelte components.

🔧 Command Line Options

shadcn-ui-mcp-server [options] Options: --github-api-key, -g <token> GitHub Personal Access Token --framework, -f <framework> Framework to use: 'react' or 'svelte' (default: react) --help, -h Show help message --version, -v Show version information Environment Variables: GITHUB_PERSONAL_ACCESS_TOKEN Alternative way to provide GitHub token FRAMEWORK Framework to use: 'react' or 'svelte' (default: react) 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 npx @jpisnice/shadcn-ui-mcp-server --framework svelte npx @jpisnice/shadcn-ui-mcp-server -f react export FRAMEWORK=svelte && 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

🔄 Framework Selection

The MCP server supports both React (shadcn/ui) and Svelte (shadcn-svelte) implementations. You can switch between them based on your project needs.

📋 Framework Comparison

FrameworkRepositoryFile ExtensionDescription
React (default)shadcn-ui/ui.tsxReact components from shadcn/ui v4
Sveltehuntabyte/shadcn-svelte.svelteSvelte components from shadcn-svelte

🎯 How to Switch Frameworks

Method 1: Command Line Argument (Recommended)

# Use React (default) npx @jpisnice/shadcn-ui-mcp-server # Switch to Svelte npx @jpisnice/shadcn-ui-mcp-server --framework svelte npx @jpisnice/shadcn-ui-mcp-server -f svelte # Switch back to React npx @jpisnice/shadcn-ui-mcp-server --framework react npx @jpisnice/shadcn-ui-mcp-server -f react

Method 2: Environment Variable

# Use Svelte export FRAMEWORK=svelte npx @jpisnice/shadcn-ui-mcp-server # Use React export FRAMEWORK=react npx @jpisnice/shadcn-ui-mcp-server # Or set for single command FRAMEWORK=svelte npx @jpisnice/shadcn-ui-mcp-server

Method 3: Combined with GitHub Token

# Svelte with GitHub token npx @jpisnice/shadcn-ui-mcp-server --framework svelte --github-api-key ghp_your_token_here # React with GitHub token (default) npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

🔍 Framework Detection

The server will log which framework is being used:

INFO: Framework set to 'svelte' via command line argument INFO: MCP Server configured for SVELTE framework INFO: Repository: huntabyte/shadcn-svelte INFO: File extension: .svelte

⚠️ Important: When using environment variables, make sure to use the correct syntax:

  • ✅ Correct: export FRAMEWORK=svelte && npx @jpisnice/shadcn-ui-mcp-server
  • ✅ Correct: FRAMEWORK=svelte npx @jpisnice/shadcn-ui-mcp-server
  • ❌ Incorrect: FRAMEWORK=svelte npx @jpisnice/shadcn-ui-mcp-server (without proper spacing)

💡 Use Cases

  • React Projects: Use default or --framework react for React/Next.js applications
  • Svelte Projects: Use --framework svelte for Svelte/SvelteKit applications
  • Multi-Framework Development: Switch between frameworks to compare implementations
  • Learning: Explore both React and Svelte versions of the same components

🛠️ 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"] }, // If using Svelte, do this instead: "shadcn-ui-svelte": { "command": "npx", "args": ["@jpisnice/shadcn-ui-mcp-server", "--framework", "svelte", "--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" } }, // If using Svelte, do this instead: "shadcn-ui-svelte": { "command": "npx", "args": ["@jpisnice/shadcn-ui-mcp-server", "--framework", "svelte"], "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"] }, // If using Svelte, do this instead: "shadcn-ui-svelte": { "command": "npx", "args": ["@jpisnice/shadcn-ui-mcp-server", "--framework", "svelte", "--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" } }, // If using Svelte, do this instead: "shadcn-ui-svelte": { "command": "npx", "args": ["@jpisnice/shadcn-ui-mcp-server", "--framework", "svelte"], "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"] }, // If using Svelte, do this instead: "shadcn-ui-svelte": { "command": "npx", "args": ["@jpisnice/shadcn-ui-mcp-server", "--framework", "svelte", "--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" } }, // If using Svelte, do this instead: "shadcn-ui-svelte": { "command": "npx", "args": ["@jpisnice/shadcn-ui-mcp-server", "--framework", "svelte"], "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"] }

Or for Svelte:

{ "name": "shadcn-ui-svelte", "command": "npx", "args": ["@jpisnice/shadcn-ui-mcp-server", "--framework", "svelte", "--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. 🔄 Framework Selection
      1. 📋 Framework Comparison
      2. 🎯 How to Switch Frameworks
      3. 🔍 Framework Detection
      4. 💡 Use Cases
    4. 🛠️ Editor Integration
      1. VS Code Integration
      2. Cursor Integration
      3. Claude Desktop Integration
      4. Continue.dev Integration
    5. 🎯 Usage Examples
      1. Getting Component Source Code
      2. Creating a Dashboard
      3. Building a Login Form
    6. 🛠️ Available Tools
      1. Component Tools
      2. Block Tools
      3. Repository Tools
      4. Example Tool Usage
    7. 🐛 Troubleshooting
      1. Common Issues
      2. Debug Mode
    8. 📄 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
                673
                59
                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 -
                578
                Python
                MIT License
                • Apple

              • Library Docs MCP Server

                vikramdse
                A
                security
                F
                license
                A
                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 -
                1
                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
                320
                57
                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