ติดตั้ง Shadcn Ui อย่างไร?

คัดลอกคอนฟิก http สำหรับ Cursor, Claude Desktop, Claude Code หรือ VS Code ได้ในหน้านี้ คอนฟิกนี้ใช้การติดตั้งของผู้เผยแพร่ ไม่ใช่พร็อกซีของ PlugMCP

Shadcn Ui ต้องใช้ API key ไหม?

ระเบียนนี้ไม่ได้ระบุตัวแปรสภาพแวดล้อมที่จำเป็น

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

เซิร์ฟเวอร์ MCP Shadcn Ui

Power your agent

เพิ่มเซิร์ฟเวอร์นี้

URL ของผู้เผยแพร่เอง ไม่ใช่เอนด์พอยต์ของ PlugMCP

เพิ่มใน Cursor เพิ่มใน Claude เพิ่มใน VS Code รันบน PlugMCP

Host a copy with our keys and logs.

URL ของเซิร์ฟเวอร์

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

ปุ่ม Claude ด้านบนจะเปิด Claude พร้อมกรอกชื่อและ URL ให้แล้ว คุณยังต้องยืนยันที่นั่นเอง

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 key ไหม?

Shadcn Ui ใช้ทรานสปอร์ตแบบใด?

Shadcn Ui ถูกตรวจสอบล่าสุดเมื่อใด?