shadcn/ui MCP Server — Instalar & Demo ao vivo

Por que usar

Principais recursos

Busca em tempo real do código-fonte do componente no registry shadcn/ui
Multi-framework: React, Vue, Svelte 5, React Native
Grafo de dependências de componentes (ex: Dialog precisa de Portal)
Comando de instalação por gerenciador de pacotes (npm/pnpm/yarn/bun)
Exemplos + código de demo, não apenas o componente básico
Templates de bloco (páginas de auth, dashboards) incluídos

Demo ao vivo

Como fica na prática

shadcn-ui-mcp.replay ▶ pronto

0/0

Instalar

Escolha seu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "shadcn-ui-mcp",
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  ]
}

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json

{
  "context_servers": {
    "shadcn-ui-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@jpisnice/shadcn-ui-mcp-server"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

claude mcp add shadcn-ui-mcp -- npx -y @jpisnice/shadcn-ui-mcp-server

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: shadcn/ui MCP Server

Crie um Form shadcn/ui sem drift de API

👤 Devs frontend construindo apps React/Next ⏱ ~20 min intermediate

Quando usar: Você quer um Form + react-hook-form + Zod, mas o Claude continua usando imports shadcn desatualizados.

Pré-requisitos

App Next.js / Vite com shadcn/ui inicializado — npx shadcn@latest init

Fluxo

Obtenha o código-fonte atual do Form

shadcn-ui MCP: obtenha o código-fonte atual do form (React) mais suas dependências. Mostre-me o comando de instalação.✓ Copiado

→ Código-fonte mais recente retornado; lista de deps inclui react-hook-form, zod
Monte meu form

Agora monte um SignupForm usando exatamente essas APIs. Email + senha + checkbox de termos; schema Zod com mensagens de validação. Sem imports inventados.✓ Copiado

→ Componente compila contra a versão shadcn atual
Verifique

Execute tsc --noEmit e reporte quaisquer imports não resolvidos.✓ Copiado

→ Verificação TS limpa

Resultado: Um Form funcional contra a API atual do shadcn/ui — sem erros de import { ... } from '@/components/ui/old-name'.

Armadilhas

Projeto está em uma versão mais antiga do shadcn — Fixe via --registry ou aceite o upgrade e execute shadcn upgrade

Combine com: filesystem

Adicione um bloco shadcn (auth/dashboard)

👤 Devs que precisam de layouts prontos ⏱ ~15 min beginner

Quando usar: Você precisa de uma página de login completa ou layout de dashboard, não apenas um componente.

Fluxo

Navegue pelos blocos

shadcn-ui: liste os blocos disponíveis. Quero um layout de dashboard com sidebar.✓ Copiado

→ Lista de blocos com nomes + pré-visualizações
Busque e adapte

Busque o código-fonte do sidebar-07. Adapte às minhas rotas — substitua os links de demo por /dashboard, /clients, /settings.✓ Copiado

→ Código do bloco retornado; meus caminhos aplicados

Resultado: Layout de dashboard completo rodando, personalizado para o meu app, em menos de 10 min.

Armadilhas

Bloco depende de componentes que você não tem instalados — O MCP retorna a lista de deps; instale os que faltam primeiro

Combine com: filesystem

Porte o uso de shadcn de um app React para Svelte

👤 Devs migrando frameworks ⏱ ~30 min advanced

Quando usar: Você está migrando de Next para SvelteKit e quer equivalentes shadcn-svelte.

Fluxo

Mapeie os componentes

Liste os componentes que meu app importa de @/components/ui. Para cada um, busque o equivalente Svelte 5 no shadcn-ui MCP.✓ Copiado

→ Mapeamento componente a componente com notas sobre diferenças de API
Traduza um exemplo

Traduza esse uso de Form do React para a versão Svelte usando a API atual real.✓ Copiado

→ Código Svelte 5 idiomático

Resultado: Plano de migração + tradução de referência para a equipe seguir.

Armadilhas

Alguns componentes ainda não existem no port Svelte — O MCP dirá 'not found'; sinalize esses para port manual

Combinações

Combine com outros MCPs para 10× de alavancagem

shadcn-ui-mcp + filesystem

Gere componentes diretamente no seu repositório

shadcn: obtenha Form. Filesystem: escreva o código em src/components/SignupForm.tsx com meu schema.✓ Copiado

shadcn-ui-mcp + github

PR de um refactor de UI que usa a API atual do shadcn

Busque a API atual do Dialog. Refatore src/components/Modal.tsx para corresponder. Abra um PR.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar	Custo
list_components	framework?: react\|vue\|svelte\|react-native	Descoberta	1 fetch
get_component	name: str, framework?: str	Antes de escrever código	1 fetch
get_component_demo	name: str, framework?: str	Ver uso real	1 fetch
list_blocks	framework?: str	Encontrar layouts prontos	1 fetch
get_block	name: str	Adicionar um layout	1 fetch

Custo e limites

O que custa rodar

Cota de API: Fetches raw do GitHub (60/h sem autenticação, 5000/h autenticado)
Tokens por chamada: 300–4000 (código-fonte do componente pode ser grande)
Monetário: OSS gratuito
Dica: Passe GITHUB_PERSONAL_ACCESS_TOKEN para evitar o limite de 60/h

Segurança

Permissões, segredos, alcance

Armazenamento de credenciais: Token GitHub opcional para aumentar o rate limit

Saída de dados: github.com (raw e api)

Nunca conceda: repo:write

O MCP busca apenas código público — não escreve no seu repositório a menos que combinado com filesystem

Solução de problemas

Erros comuns e correções

Rate limit exceeded

Defina a variável de ambiente GITHUB_PERSONAL_ACCESS_TOKEN

Component not found in framework

Ports Vue/Svelte estão atrás do React; verifique list_components para esse framework

Returned source uses different API than my project

Projeto está em uma versão mais antiga do shadcn; faça upgrade ou fixe para a versão antiga do registry

Alternativas

shadcn/ui MCP Server vs. outros

Alternativa	Quando usar	Troca
Magic MCP (21st Dev)	Você quer geração de UI mais ampla, não apenas shadcn	Mais opinativo; mais pesado
Component MCP (custom registry)	Você tem um design system interno	Construa você mesmo

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills