Archestra Apps HackathonJoin now
Archestra Logo
Archestra.AI
Back to Catalog

shadcn-ui-mcp-server

Jpisnice/shadcn-ui-mcp-server
🔗 Latest commit:83bbe4a
🕒 Updated:Sep 9, 2025, 01:05 PM
TypeScript
AI Tools

A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,and vue

MCP Trust Score
Based on our comprehensive evaluation criteria
🤖 Evaluated by gemini-2.5-flashFix
Trust Score82/100
GitHub Metrics
Repository statistics and activity
⭐ GitHub Stars:2156
👥 Contributors:6
📋 Total Issues:0
📦 Has Releases:Yes
🔧 Has CI/CD Pipeline:Yes
Configuration
Configuration example extracted from README.md for Claude Desktop and other clients.
🤖 Evaluated by gemini-2.5-flashFix
{
  "jpisnice-shadcn-ui-mcp-server": {
    "command": "npx",
    "args": [
      "@jpisnice/shadcn-ui-mcp-server"
    ],
    "env": {}
  },
  "jpisnice-shadcn-ui-mcp-server-github-token": {
    "command": "npx",
    "args": [
      "@jpisnice/shadcn-ui-mcp-server",
      "--github-api-key",
      "ghp_your_token_here"
    ],
    "env": {}
  },
  "jpisnice-shadcn-ui-mcp-server-env-github-token": {
    "command": "npx",
    "args": [
      "@jpisnice/shadcn-ui-mcp-server"
    ],
    "env": {
      "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
    }
  },
  "jpisnice-shadcn-ui-mcp-server-svelte": {
    "command": "npx",
    "args": [
      "@jpisnice/shadcn-ui-mcp-server",
      "--framework",
      "svelte"
    ],
    "env": {}
  },
  "jpisnice-shadcn-ui-mcp-server-svelte-github-token": {
    "command": "npx",
    "args": [
      "@jpisnice/shadcn-ui-mcp-server",
      "--framework",
      "svelte",
      "--github-api-key",
      "ghp_your_token_here"
    ],
    "env": {}
  },
  "jpisnice-shadcn-ui-mcp-server-env-svelte": {
    "command": "npx",
    "args": [
      "@jpisnice/shadcn-ui-mcp-server"
    ],
    "env": {
      "FRAMEWORK": "svelte"
    }
  },
  "jpisnice-shadcn-ui-mcp-server-react": {
    "command": "npx",
    "args": [
      "@jpisnice/shadcn-ui-mcp-server",
      "--framework",
      "react"
    ],
    "env": {}
  },
  "jpisnice-shadcn-ui-mcp-server-env-react": {
    "command": "npx",
    "args": [
      "@jpisnice/shadcn-ui-mcp-server"
    ],
    "env": {
      "FRAMEWORK": "react"
    }
  }
}
MCP Protocol Support
Implemented MCP protocol features
🤖 Evaluated by gemini-2.5-flashFix
Tools:✓
Prompts:✗
Resources:✓
Sampling:✗
Roots:✓
Logging:✓
STDIO Transport:✓
HTTP Transport:✗
OAuth2 Auth:✗
Dependencies
7 dependencies
Libraries and frameworks used by this MCP server
🤖 Evaluated by gemini-2.5-flashFix
Resources
GitHub Repository
Add Quality Badge
Show your MCP trust score in your README
Trust Score Badge
[![Trust Score](https://archestra.ai/mcp-catalog/api/badge/quality/Jpisnice/shadcn-ui-mcp-server)](https://archestra.ai/mcp-catalog/jpisnice__shadcn-ui-mcp-server)
Edit This ServerAdd New MCP ServerReport an Issue
README.md

Shadcn UI v4 MCP Server

npm version
License: MIT

Trust Score

🚀 The fastest way to integrate shadcn/ui components into your AI workflow

A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. Seamlessly retrieve React, Svelte, and Vue implementations for your AI-powered development workflow.

✨ Key Features

  • 🎯 Multi-Framework Support - React, Svelte, and Vue implementations
  • 📦 Component Source Code - Latest shadcn/ui v4 TypeScript source
  • 🎨 Component Demos - Example implementations and usage patterns
  • 🏗️ Blocks Support - Complete block implementations (dashboards, calendars, forms)
  • 📋 Metadata Access - Dependencies, descriptions, and configuration details
  • 🔍 Directory Browsing - Explore repository structures
  • ⚡ Smart Caching - Efficient GitHub API integration with rate limit handling

🚀 Quick Start

# Basic usage (60 requests/hour)
npx @jpisnice/shadcn-ui-mcp-server

# With GitHub token (5000 requests/hour) - Recommended
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

# Switch frameworks
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
npx @jpisnice/shadcn-ui-mcp-server --framework vue

🎯 Get your GitHub token in 2 minutes: docs/getting-started/github-token.md

📚 Documentation

SectionDescription
🚀 Getting StartedInstallation, setup, and first steps
⚙️ ConfigurationFramework selection, tokens, and options
🔌 IntegrationEditor and tool integrations
📖 UsageExamples, tutorials, and use cases
🎨 FrameworksFramework-specific documentation
🐛 TroubleshootingCommon issues and solutions
🔧 API ReferenceTool reference and technical details

🎨 Framework Support

This MCP server supports three popular shadcn implementations:

FrameworkRepositoryMaintainerDescription
React (default)shadcn/uishadcnReact components from shadcn/ui v4
Svelteshadcn-sveltehuntabyteSvelte components from shadcn-svelte
Vueshadcn-vueunovueVue components from shadcn-vue

🛠️ Essential Setup

1. Get GitHub Token (Recommended)

# Visit: https://github.com/settings/tokens
# Generate token with no scopes needed
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here

2. Run Server

# React (default)
npx @jpisnice/shadcn-ui-mcp-server

# Svelte
npx @jpisnice/shadcn-ui-mcp-server --framework svelte

# Vue  
npx @jpisnice/shadcn-ui-mcp-server --framework vue

3. Integrate with Your Editor

🎯 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, and Vue implementations
  • Rapid Prototyping - Get complete block implementations for dashboards, forms, etc.
  • Code Generation - Generate component code with proper dependencies

📦 Installation

# Global installation (optional)
npm install -g @jpisnice/shadcn-ui-mcp-server

# Or use npx (recommended)
npx @jpisnice/shadcn-ui-mcp-server

🔗 Quick Links

📄 License

MIT License - see LICENSE for details.

🙏 Acknowledgments

  • shadcn - For the amazing React UI component library
  • huntabyte - For the excellent Svelte implementation
  • unovue - For the comprehensive Vue implementation
  • Anthropic - For the Model Context Protocol specification

Made with ❤️ by Janardhan Polle

Star ⭐ this repo if you find it helpful!

Related MCP Servers

mcp-shrimp-task-manager

88/100

Shrimp Task Manager is a task tool built for AI Agents, emphasizing chain-of-thought, reflection, and style consistency. It converts natural language into structured dev tasks with dependency tracking and iterative refinement, enabling agent-like developer behavior in reasoning AI systems.

cognee-mcp

86/100

Memory for AI Agents in 5 lines of code

mobile-mcp

81/100

Model Context Protocol Server for Mobile Automation and Scraping (iOS, Android, Emulators, Simulators and Real Devices)

HuggingFace

80/100

Remote MCP server for HuggingFace services - access models, datasets, and spaces

markitdown-mcp

80/100

Python tool for converting files and office documents to Markdown.

magic-mcp

79/100

It's like v0 but in your Cursor/WindSurf/Cline. 21st dev Magic MCP server for working with your frontend like Magic