Shadcn Ui은(는) 어떻게 설치하나요?

이 페이지에서 Cursor, Claude Desktop, Claude Code 또는 VS Code용 http 설정을 복사합니다. PlugMCP 프록시가 아니라 게시자의 설치 방식을 사용합니다.

Shadcn Ui에 API 키가 필요한가요?

이 레코드에는 필수 환경 변수가 등록되어 있지 않습니다.

Shadcn Ui은(는) 어떤 전송 방식을 사용하나요?

Shadcn Ui에는 HTTP로 연결합니다.

Shadcn Ui은(는) 마지막으로 언제 확인되었나요?

마지막 확인: 2026-11-11. Multi-Framework Support - React, Svelte, Vue, and React Native implementations. Component Source Code - Latest shadcn/ui v4 TypeScript source. Component Demos - Example implementations and usage patterns

Shadcn Ui MCP 서버

에이전트 강화

이 서버 추가

게시자의 자체 URL입니다. PlugMCP 엔드포인트가 아닙니다.

Cursor에 추가 Claude에서 추가 VS Code에 추가 PlugMCP에서 실행

Host a copy with our keys and logs.

서버 URL

https://code.claude.com/docs/en/mcp

위의 Claude 버튼을 누르면 이름과 URL이 채워진 상태로 Claude가 열립니다. 확인은 Claude에서 직접 해야 합니다.

shClaude Code

1claude mcp add --transport http jpisnice-shadcn-ui-mcp-server-github https://code.claude.com/docs/en/mcp

Run in a terminal.

jsonClaude Desktop

1{2  "mcpServers": {3    "jpisnice-shadcn-ui-mcp-server-github": {4      "command": "npx",5      "args": [6        "-y",7        "mcp-remote",8        "https://code.claude.com/docs/en/mcp"9      ]10    }11  }12}

claude_desktop_config.json

원격 · HTTP게시자 설치단계별 안내: Claude에 추가

원격 URL인가요, 내 컴퓨터에서 실행하는 명령인가요? 두 설치 방식의 차이

PlugMCP에서 실행

Host a copy with our keys and logs.

A new server you create. It is not this listing's official endpoint. Use the publisher install when you want their URL and their credentials.

실행

서버 정보

최근 확인 실패

전송 방식: http
라이선스: MIT
마지막 확인

게시자 제공

문서

Shadcn UI v4 MCP Server

🚀 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, Vue, and React Native implementations for your AI-powered development workflow.

✨ Key Features

🎯 Multi-Framework Support - React, Svelte, Vue, and React Native 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, plus protocol cache hints (ttlMs/cacheScope) on list and read results
⌨️ Argument Completion - Autocomplete for prompt and resource-template arguments (component names, package managers, build tools, and more)
🌐 Streamable HTTP Transport - Stateless /mcp endpoint for multi-client deployments (MCP spec 2026-07-28)
🐳 Docker Ready - Production-ready containerization with Docker Compose

🚀 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
npx @jpisnice/shadcn-ui-mcp-server --framework react-native

# Use Base UI instead of Radix (React only)
npx @jpisnice/shadcn-ui-mcp-server --ui-library base

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

📦 One-Click Installation (Claude Desktop)

Download and double-click the .mcpb file for instant installation:

Download shadcn-ui-mcp-server.mcpb from Releases
Double-click the file - Claude Desktop opens automatically
Enter your GitHub token (optional, for higher rate limits)
Click Install - tools are available immediately

Manual install: Claude Desktop → Settings → MCP → Add Server → Browse → Select .mcpb file

References: Anthropic Desktop Extensions | Building MCPB

🌐 HTTP Transport & Docker Deployment

The server implements the 2026-07-28 MCP specification (via MCP TypeScript SDK v2) and stays compatible with 2025-era clients. To make your client use the modern protocol, or to require it, see the Modern Protocol Guide. Besides stdio, it can serve Streamable HTTP at a single stateless /mcp endpoint for multi-client and production deployments:

Quick Start with HTTP

# HTTP mode (stateless, supports many concurrent clients)
node build/index.js --mode http --port 7423

# Docker Compose (production ready)
docker-compose up -d

# Connect with Claude Code
claude mcp add --scope user --transport http shadcn-mcp-server http://localhost:7423/mcp

Transport Modes

stdio (default) - Standard input/output for CLI usage
http - Streamable HTTP at /mcp
dual - Both stdio and HTTP simultaneously

The legacy SSE transport (/sse + /message) was removed. --mode sse is still accepted as a deprecated alias for http.

Docker Examples

# Basic container
docker run -p 7423:7423 shadcn-ui-mcp-server

# With GitHub API token
docker run -p 7423:7423 -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token shadcn-ui-mcp-server

# Docker Compose (recommended)
docker-compose up -d
curl http://localhost:7423/health

Environment Variables

MCP_TRANSPORT_MODE - Transport mode (stdio|http|dual)
MCP_PORT - HTTP server port (default: 7423 - SHADCN on keypad!)
MCP_HOST - Host binding (default: 0.0.0.0)
MCP_CORS_ORIGINS - CORS origins (comma-separated)
MCP_PROTOCOL - Protocol eras to accept: any (default; 2026-07-28 plus 2025-era fallback) or modern (2026-07-28 only). CLI: --protocol
GITHUB_PERSONAL_ACCESS_TOKEN - GitHub API token
UI_LIBRARY - UI primitive library: radix (default) or base (React only)

📚 Documentation

Section	Description
🚀 Getting Started	Installation, setup, and first steps
⚙️ Configuration	Framework selection, tokens, and options
🔌 Integration	Editor and tool integrations
📖 Usage	Examples, tutorials, and use cases
🎨 Frameworks	Framework-specific documentation
🐛 Troubleshooting	Common issues and solutions
🔧 API Reference	Tool reference and technical details

🎨 Framework Support

This MCP server supports four popular shadcn implementations:

Framework	Repository	Maintainer	Description
React (default)	shadcn/ui	shadcn	React components from shadcn/ui v4
Svelte	shadcn-svelte	huntabyte	Svelte components from shadcn-svelte
Vue	shadcn-vue	unovue	Vue components from shadcn-vue
React Native	react-native-reusables	Founded Labs	React Native components from react-native-reusables

UI Library (React only)

shadcn/ui v4 supports two primitive libraries for React: Radix UI (default) and Base UI.

# Radix UI (default)
npx @jpisnice/shadcn-ui-mcp-server --framework react --ui-library radix

# Base UI
npx @jpisnice/shadcn-ui-mcp-server --framework react --ui-library base

# Or via environment variable
UI_LIBRARY=base npx @jpisnice/shadcn-ui-mcp-server

Claude Desktop config example:

{
  "args": ["--framework", "react", "--ui-library", "base"]
}

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

# React Native
npx @jpisnice/shadcn-ui-mcp-server --framework react-native

3. Integrate with Your Editor

Autohand Code: See Autohand Code Integration below
Claude Code: See Claude Code Integration below
VS Code: docs/integration/vscode.md
Cursor: docs/integration/cursor.md
Claude Desktop: docs/integration/claude-desktop.md
Continue.dev: docs/integration/continue.md

💻 Autohand Code Integration

Use the Autohand Code CLI to add the shadcn/ui MCP server:

autohand mcp add shadcn bunx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN

Add --scope project before shadcn to save the server in the current project's .autohand configuration instead of your user configuration.

💻 Claude Code Integration

Quick Add (CLI)

# Add the shadcn-ui MCP server
claude mcp add shadcn -- bunx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN

HTTP Transport

For production deployments with the Streamable HTTP transport:

# Start server in HTTP mode
node build/index.js --mode http --port 7423

# Connect with Claude Code
claude mcp add --scope user --transport http shadcn-mcp-server http://localhost:7423/mcp

Framework-Specific Commands

See Claude Code Integration Guide for framework-specific commands (React, Svelte, Vue, React Native).

Reference: Claude Code MCP Documentation

🎯 Use Cases

AI-Powered Development - Let AI assistants build UIs with shadcn/ui
Multi-Client Deployments - Stateless HTTP transport scales horizontally without sticky sessions
Production Environments - Docker Compose ready with health checks and monitoring
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

📦 Installation

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

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

🔨 Building from Source

Prerequisites

Node.js >= 20.0.0
npm or pnpm

Build Steps

# Clone the repository
git clone https://github.com/Jpisnice/shadcn-ui-mcp-server.git
cd shadcn-ui-mcp-server

# Install dependencies
npm install

# Build the project
npm run build

# Run the server
node build/index.js --github-api-key YOUR_TOKEN

Run Locally

# After building, run with options
node build/index.js --github-api-key YOUR_TOKEN
node build/index.js --framework svelte

Building MCPB Package

The project includes a manifest.json following the MCPB specification. The .mcpb file is a ZIP archive containing the server, dependencies, and configuration.

See CONTRIBUTING.md for detailed packaging instructions.

Reference: Building Desktop Extensions with MCPB

🔗 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
Founded Labs - For the React Native implementation
Anthropic - For the Model Context Protocol specification

Made with ❤️ by Janardhan Polle

Star ⭐ this repo if you find it helpful!

이 서버 추가

Host a copy with our keys and logs.

서버 정보

문서

주요 기능

활용 사례

Shadcn UI v4 MCP Server

✨ Key Features

🚀 Quick Start

📦 One-Click Installation (Claude Desktop)

🌐 HTTP Transport & Docker Deployment

Quick Start with HTTP

Transport Modes

Docker Examples

Environment Variables

📚 Documentation

🎨 Framework Support

UI Library (React only)

🛠️ Essential Setup

1. Get GitHub Token (Recommended)

2. Run Server

3. Integrate with Your Editor

💻 Autohand Code Integration

💻 Claude Code Integration

Quick Add (CLI)

HTTP Transport

Framework-Specific Commands

🎯 Use Cases

📦 Installation

🔨 Building from Source

Prerequisites

Build Steps

Run Locally

Building MCPB Package

🔗 Quick Links

📄 License

🙏 Acknowledgments

Shadcn Ui 소개

도구

질문

Shadcn Ui은(는) 어떻게 설치하나요?

Shadcn Ui에 API 키가 필요한가요?

Shadcn Ui은(는) 어떤 전송 방식을 사용하나요?

Shadcn Ui은(는) 마지막으로 언제 확인되었나요?