Shadcn Space MCP

Integra el servidor MCP de shadcn space en tu IDE para generar componentes shadcn/ui listos para usar sin conjeturas.

Documentación

shadcnspace-mcp

Servidor oficial del Protocolo de Contexto de Modelos (MCP) para Shadcn Space.

Este servidor MCP permite que IDE y agentes de codificación impulsados por IA (Cursor, Windsurf, Claude Desktop, Cline, Antigravity, etc.) descubran, busquen, instalen y diseñen bloques de UI, páginas de aterrizaje y componentes de Shadcn Space directamente dentro de tu proyecto, sin copiar y pegar.

Instalación rápida

Usando la CLI

npx shadcnspace-cli install <client>

Clientes compatibles

Instalación manual

Agrega a la configuración MCP de tu IDE o cliente (mcpServers):

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

Para más detalles, visita nuestra documentación: Cómo usar el servidor MCP

Herramientas disponibles

El servidor proporciona 14 herramientas especializadas invocables mediante MCP:

Nombre de la herramienta	Descripción
`listCategories`	Devuelve las 14 categorías de bloques (`hero`, `features`, `pricing`, `testimonials`, `faq`, `cta`, `header`, `footer`, `stats`, `forms`, `content`, `ecommerce`, `ai`, `widgets`) con recuentos en vivo de bloques totales, gratuitos y PRO.
`listBlocks`	Lista bloques con información de licencia (`isPro`). Admite filtrado por `category` y tipo de licencia (`all`, `free`, `pro`).
`listFreeBlocks`	Lista solo bloques de Shadcn Space 100% gratuitos que no requieren ninguna licencia. Admite filtros opcionales de categoría y palabra clave.
`listComponents`	Lista componentes base con consulta de búsqueda y filtro de licencia (`all`, `free`, `pro`).
`getBlockInstall`	Devuelve el comando de instalación oficial, el nombre de exportación del componente, la ruta de importación, un ejemplo JSX, las opciones de estilo (base/radix) y los requisitos de licencia para un bloque específico.
`searchBlocks`	Busca bloques por palabra clave, categoría y filtro opcional de `freeOnly`.
`listInstalledBlocks`	Lista los bloques actualmente instalados en el proyecto del usuario y obtiene sus archivos.
`listPages`	Lista todas las páginas completas de Shadcn Space.
`getPageInstall`	Devuelve el comando de instalación oficial, el nombre de exportación, la ruta de importación, un ejemplo de uso y las opciones de estilo para una página completa específica.
`searchPages`	Busca páginas completas usando palabras clave o etiquetas.
`listInstalledPages`	Lista las páginas actualmente instaladas en el proyecto.
`getLandingPageGuidelines`	Arquitectura integral de páginas de aterrizaje UI/UX: secuencia de secciones (Hero -> Logos -> Features -> Testimonials -> Pricing -> FAQ -> CTA -> Footer), estándares de contenedores y cadencia de espaciado vertical.
`handleError`	Herramienta de diagnóstico autocorrectiva para resolver errores de licencia, falta de `components.json`, componente no encontrado y fallos de instalación de la CLI.
`get_audit_checklist`	Reglas de flujo de trabajo obligatorias para agentes de IA: verificación de estilo (base/radix), detección del gestor de paquetes, manejo de licencias y deduplicación de barras de navegación.

Nota sobre licencias: Todas las páginas y bloques PRO requieren una clave de licencia válida y un correo electrónico configurado en los registros de components.json. Los bloques gratuitos se pueden instalar directamente sin ninguna licencia.

Prompts disponibles

El servidor proporciona 7 prompts enriquecidos para acelerar la arquitectura de UI:

Prompt / Comando	Descripción
`build-landing-page`	Guía paso a paso para que un agente de IA diseñe y ensamble una página de aterrizaje completa y de alta conversión.
`add-hero-section`	Encuentra, instala e integra un bloque hero de alto impacto en una página existente.
`add-pricing-section`	Agrega una tabla de precios de varios niveles con alternancia de facturación mensual/anual.
`add-feature-grid`	Agrega una sección moderna de exhibición de características o cuadrícula bento.
`create-ui`	Prompt general para diseñar una página de UI completa usando bloques de Shadcn Space.
`search`	Encuentra bloques de UI específicos por tema o palabra clave.
`customization-guidelines`	Pautas estrictas que definen qué partes de los bloques instalados se pueden personalizar de forma segura (solo texto).

Pruebas y depuración con MCP Inspector

Puedes inspeccionar, probar y depurar de forma interactiva todas las herramientas y prompts en tu navegador usando el MCP Inspector oficial:

npm run inspector

Ejemplo de uso con agentes

Una vez configurado en tu IDE de IA, puedes hacer preguntas como:

"Muéstrame todos los bloques hero gratuitos disponibles en Shadcn Space."

"Construye una página de aterrizaje SaaS completa para una aplicación de productividad con IA usando hero, características bento, testimonios, precios y FAQ."

"Dame el comando de instalación y la declaración de importación para pricing-01 en estilo base."

"¿Qué categorías de bloques están disponibles en Shadcn Space?"

Instrucciones para agentes (Claude / Cursor / Windsurf)

Para asegurarte de que tu asistente de IA siga las mejores prácticas oficiales de Shadcn Space (verificar Base vs Radix, gestores de paquetes y evitar barras de navegación duplicadas), copia el prompt del sistema en claude-instructions.md en tus .cursorrules, .windsurfrules o Instrucciones del Proyecto de Claude.

Licencia y créditos

Creado por Shadcn Space.

MIT