Shadcn Space MCP

Integre o servidor MCP Shadcn Space ao seu IDE para gerar componentes shadcn/ui prontos para uso, sem suposições.

Documentação

shadcnspace-mcp

Servidor oficial do Model Context Protocol (MCP) para Shadcn Space.

Este servidor MCP permite que IDEs e agentes de codificação com IA (Cursor, Windsurf, Claude Desktop, Cline, Antigravity, etc.) descubram, pesquisem, instalem e arquitetem blocos de UI, landing pages e componentes do Shadcn Space diretamente no seu projeto — sem copiar e colar.

Instalação Rápida

Usando a CLI

npx shadcnspace-cli install <client>

Clientes Suportados

Instalação Manual

Adicione à configuração MCP do seu IDE ou cliente (mcpServers):

{
  "mcpServers": {
    "shadcnspace-mcp": {
      "command": "npx",
      "args": ["-y", "shadcnspace-mcp@latest"]
    }
  }
}

Para mais detalhes, visite nossa documentação: Como usar o MCP Server

Ferramentas Disponíveis

O servidor fornece 14 ferramentas especializadas acionáveis via MCP:

Nome da Ferramenta	Descrição
`listCategories`	Retorna todas as 14 categorias de blocos (`hero`, `features`, `pricing`, `testimonials`, `faq`, `cta`, `header`, `footer`, `stats`, `forms`, `content`, `ecommerce`, `ai`, `widgets`) com contagens em tempo real de blocos totais, gratuitos e PRO.
`listBlocks`	Lista blocos com informações de licença (`isPro`). Suporta filtragem por `category` e tipo de licença (`all`, `free`, `pro`).
`listFreeBlocks`	Lista apenas blocos 100% gratuitos do Shadcn Space que não exigem licença. Suporta filtros opcionais de categoria e palavra-chave.
`listComponents`	Lista componentes base com consulta de pesquisa e filtro de licença (`all`, `free`, `pro`).
`getBlockInstall`	Retorna comando oficial de instalação, nome de exportação do componente, caminho de importação, exemplo JSX, opções de estilo (base/radix) e requisitos de licença para um bloco específico.
`searchBlocks`	Pesquisa blocos por palavra-chave, categoria e filtro opcional de `freeOnly`.
`listInstalledBlocks`	Lista blocos atualmente instalados no projeto do usuário e obtém seus arquivos.
`listPages`	Lista todas as páginas completas do Shadcn Space.
`getPageInstall`	Retorna comando oficial de instalação, nome de exportação, caminho de importação, exemplo de uso e opções de estilo para uma página completa específica.
`searchPages`	Pesquisa páginas completas usando palavras-chave ou tags.
`listInstalledPages`	Lista páginas atualmente instaladas no projeto.
`getLandingPageGuidelines`	Arquitetura abrangente de landing pages UI/UX: sequência de seções (Hero -> Logos -> Features -> Testimonials -> Pricing -> FAQ -> CTA -> Footer), padrões de contêiner e cadência de espaçamento vertical.
`handleError`	Ferramenta de diagnóstico autocorretiva para resolver erros de licença, `components.json` ausente, componente não encontrado e falhas de instalação via CLI.
`get_audit_checklist`	Regras de fluxo de trabalho obrigatórias para agentes de IA: verificação de estilo (base/radix), detecção de gerenciador de pacotes, tratamento de licenças e deduplicação de navbar.

Nota sobre Licenciamento: Todas as páginas e blocos PRO exigem uma chave de licença válida e e-mail configurados nos registros em components.json. Blocos gratuitos podem ser instalados diretamente sem qualquer licença.

Prompts Disponíveis

O servidor fornece 7 prompts ricos para acelerar a arquitetura de UI:

Prompt / Comando	Descrição
`build-landing-page`	Orientação passo a passo para um agente de IA arquitetar e montar uma landing page completa e de alta conversão.
`add-hero-section`	Encontre, instale e integre um bloco hero de alto impacto em uma página existente.
`add-pricing-section`	Adicione uma tabela de preços com múltiplos níveis e alternância de faturamento mensal/anual.
`add-feature-grid`	Adicione uma seção moderna de vitrine de recursos ou grade bento.
`create-ui`	Prompt geral para arquitetar uma página de UI completa usando blocos do Shadcn Space.
`search`	Encontre blocos de UI específicos por tópico ou palavra-chave.
`customization-guidelines`	Diretrizes rigorosas que definem quais partes dos blocos instalados podem ser personalizadas com segurança (somente texto).

Testes e Depuração com o MCP Inspector

Você pode inspecionar, testar e depurar interativamente todas as ferramentas e prompts no seu navegador usando o MCP Inspector oficial:

npm run inspector

Exemplo de Uso com Agente

Uma vez configurado no seu IDE de IA, você pode fazer perguntas como:

"Mostre-me todos os blocos hero gratuitos disponíveis no Shadcn Space."

"Construa uma landing page SaaS completa para um aplicativo de produtividade com IA usando hero, recursos bento, depoimentos, preços e FAQ."

"Dê-me o comando de instalação e a declaração de importação para pricing-01 no estilo base."

"Quais categorias de blocos estão disponíveis no Shadcn Space?"

Instruções para Agentes (Claude / Cursor / Windsurf)

Para garantir que seu assistente de IA siga as melhores práticas oficiais do Shadcn Space (verificando Base vs Radix, gerenciadores de pacotes e evitando navbars duplicadas), copie o prompt de sistema em claude-instructions.md para suas .cursorrules, .windsurfrules ou Instruções de Projeto do Claude.

Licença e Créditos

Criado por Shadcn Space.

MIT