shadcn/ui MCP

Servidor MCP shadcn/ui que fornece contexto estruturado de componentes, orientação de instalação, exemplos de uso e props para trabalho com UI em React, Svelte e Vue.

GitHub

Experimente este MCPPatrocinado

Documentação

Servidor MCP Shadcn UI v4

🚀 A forma mais rápida de integrar componentes shadcn/ui ao seu fluxo de trabalho com IA

Um servidor Model Context Protocol (MCP) que fornece aos assistentes de IA acesso abrangente a componentes, blocos, demos e metadados do shadcn/ui v4. Recupere facilmente implementações em React, Svelte, Vue e React Native para o seu fluxo de trabalho de desenvolvimento com IA.

✨ Principais Recursos

🎯 Suporte Multi-Framework - Implementações em React, Svelte, Vue e React Native
📦 Código-Fonte dos Componentes - Código-fonte TypeScript mais recente do shadcn/ui v4
🎨 Demos de Componentes - Exemplos de implementação e padrões de uso
🏗️ Suporte a Blocos - Implementações completas de blocos (dashboards, calendários, formulários)
📋 Acesso a Metadados - Dependências, descrições e detalhes de configuração
🔍 Navegação de Diretórios - Explore estruturas de repositórios
⚡ Cache Inteligente - Integração eficiente com a API do GitHub e tratamento de limites de taxa
🌐 Transporte SSE - Suporte a Server-Sent Events para implantações com múltiplos clientes
🐳 Pronto para Docker - Containerização pronta para produção com Docker Compose

🚀 Início Rápido

# 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

🎯 Obtenha seu token do GitHub em 2 minutos: docs/getting-started/github-token.md

📦 Instalação com Um Clique (Claude Desktop)

Baixe e clique duas vezes no arquivo .mcpb para instalação instantânea:

Baixe o shadcn-ui-mcp-server.mcpb em Releases
Clique duas vezes no arquivo - o Claude Desktop abre automaticamente
Insira seu token do GitHub (opcional, para limites de taxa mais altos)
Clique em Instalar - as ferramentas ficam disponíveis imediatamente

Instalação manual: Claude Desktop → Configurações → MCP → Adicionar Servidor → Navegar → Selecionar arquivo .mcpb

Referências: Extensões de Desktop da Anthropic | Construindo MCPB

🌐 Transporte SSE e Implantação com Docker

Execute o servidor com transporte Server-Sent Events (SSE) para suporte a múltiplos clientes e implantações em produção:

Início Rápido com SSE

# SSE mode (supports multiple concurrent connections)
node build/index.js --mode sse --port 7423

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

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

Modos de Transporte

stdio (padrão) - Entrada/saída padrão para uso via CLI
sse - Server-Sent Events para conexões baseadas em HTTP
dual - Ambos stdio e SSE simultaneamente

Exemplos com Docker

# 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

Variáveis de Ambiente

MCP_TRANSPORT_MODE - Modo de transporte (stdio|sse|dual)
MCP_PORT - Porta do servidor SSE (padrão: 7423 - SHADCN no teclado numérico!)
MCP_HOST - Endereço de hospedagem (padrão: 0.0.0.0)
MCP_CORS_ORIGINS - Origens CORS (separadas por vírgula)
GITHUB_PERSONAL_ACCESS_TOKEN - Token da API do GitHub
UI_LIBRARY - Biblioteca de primitivas de UI: radix (padrão) ou base (somente React)

📚 Documentação

Seção	Descrição
🚀 Começando	Instalação, configuração e primeiros passos
⚙️ Configuração	Seleção de framework, tokens e opções
🔌 Integração	Integrações com editores e ferramentas
📖 Uso	Exemplos, tutoriais e casos de uso
🎨 Frameworks	Documentação específica por framework
🐛 Solução de Problemas	Problemas comuns e soluções
🔧 Referência da API	Referência de ferramentas e detalhes técnicos

🎨 Suporte a Frameworks

Este servidor MCP suporta quatro implementações populares do shadcn:

Framework	Repositório	Mantenedor	Descrição
React (padrão)	shadcn/ui	shadcn	Componentes React do shadcn/ui v4
Svelte	shadcn-svelte	huntabyte	Componentes Svelte do shadcn-svelte
Vue	shadcn-vue	unovue	Componentes Vue do shadcn-vue
React Native	react-native-reusables	Founded Labs	Componentes React Native do react-native-reusables

Biblioteca de UI (somente React)

O shadcn/ui v4 suporta duas bibliotecas de primitivas para React: Radix UI (padrão) e 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

Exemplo de configuração do Claude Desktop:

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

🛠️ Configuração Essencial

1. Obtenha o Token do GitHub (Recomendado)

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

2. Execute o Servidor

# 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. Integre com Seu Editor

Claude Code: Veja Integração com Claude Code abaixo
VS Code: docs/integration/vscode.md
Cursor: docs/integration/cursor.md
Claude Desktop: docs/integration/claude-desktop.md
Continue.dev: docs/integration/continue.md

💻 Integração com Claude Code

Adição Rápida (CLI)

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

Transporte SSE

Para implantações em produção com transporte SSE:

# Start server in SSE mode
node build/index.js --mode sse --port 7423

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

Comandos Específicos por Framework

Veja o Guia de Integração com Claude Code para comandos específicos por framework (React, Svelte, Vue, React Native).

Referência: Documentação MCP do Claude Code

🎯 Casos de Uso

Desenvolvimento com IA - Deixe assistentes de IA criarem UIs com shadcn/ui
Implantações com Múltiplos Clientes - Transporte SSE suporta múltiplas conexões simultâneas
Ambientes de Produção - Pronto para Docker Compose com health checks e monitoramento
Descoberta de Componentes - Explore componentes disponíveis e seus usos
Aprendizado Multi-Framework - Compare implementações em React, Svelte, Vue e React Native
Prototipagem Rápida - Obtenha implementações completas de blocos para dashboards, formulários, etc.
Geração de Código - Gere código de componentes com dependências adequadas

📦 Instalação

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

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

🔨 Construindo a Partir do Código-Fonte

Pré-requisitos

Node.js >= 18.0.0
npm ou pnpm

Etapas de Build

# 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

Executar Localmente

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

Construindo o Pacote MCPB

O projeto inclui um manifest.json seguindo a especificação MCPB. O arquivo .mcpb é um arquivo ZIP contendo o servidor, dependências e configuração.

Veja CONTRIBUTING.md para instruções detalhadas de empacotamento.

Referência: Construindo Extensões de Desktop com MCPB

🔗 Links Rápidos

📄 Licença

Licença MIT - veja LICENSE para detalhes.

🙏 Agradecimentos

shadcn - Pela incrível biblioteca de componentes UI em React
huntabyte - Pela excelente implementação em Svelte
unovue - Pela implementação abrangente em Vue
Founded Labs - Pela implementação em React Native
Anthropic - Pela especificação do Model Context Protocol

Feito com ❤️ por Janardhan Polle

Dê uma ⭐ neste repositório se você achou útil!