lab
Esc

Prueba con

↑↓ para moverte · Enter para abrir · también en /buscar?q= para agentes

configuración intermedio claude-codemcpshadcn

shadcn: consulta e incorpora componentes desde tu agente

Añade componentes desde un registro que puedes inspeccionar. El código queda en tu proyecto para adaptarlo y revisar sus dependencias.

✓ verificado el 26 oct 2026

Instrucciones para tu agente

Esto es lo que se copia. Pégaselo a tu agente y te lo monta paso a paso.

O ábrelo directamente en ClaudeChatGPT

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.

Para el agente: cómo acompañar al usuario

  1. Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
  2. Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
  3. Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
  4. Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
  5. No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
  6. Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

Pasos de configuración

Preparación

Comprueba Node.js ≥20.18.1 y npm/npx, según el paquete shadcn publicado, y Claude Code. Entra en la raíz de un proyecto configurado para tu framework con sus dependencias instaladas antes de añadir MCP.

Paso 1: prepara el proyecto

Sigue la instalación oficial correspondiente a tu framework. No apliques una receta de React a un proyecto de otro ecosistema.

Paso 2: configura MCP

Para Claude Code, desde la raíz del proyecto, la guía oficial publica:

npx shadcn@latest mcp init --client claude

Reinicia Claude Code y revisa la conexión con /mcp. Para otro cliente sigue su apartado específico de la guía.

Paso 3: prueba un componente

Pide al agente buscar un elemento del registro y mostrar qué archivos y dependencias incorporaría. Revisa la propuesta antes de añadirlo.

Comprobación

Comprueba que el cliente descubre el servidor, que encuentra el elemento pedido y que el código incorporado aparece en el proyecto. Valida el componente con los controles habituales de tu aplicación.

Si algo falla

Si el registro no responde, comprueba su URL y sus requisitos de acceso. Si el componente no encaja, revisa la guía del framework y el contenido del registro antes de modificar estilos al azar.

Consulta el README oficial para el procedimiento completo y los cambios de versión.

ver en .md ¿Prefieres el recurso entero?

Qué es

shadcn/ui distribuye código de componentes para incorporarlo a tu aplicación. Su CLI y su integración MCP ayudan al agente a descubrir elementos de registros y a utilizarlos con el contexto de tu proyecto.

Para qué te sirve

  • Cuando tu agente inventa una API de componente que no existe.
  • Cuando quieres adaptar un componente ya disponible en lugar de empezar desde cero.

Cómo funciona

Un registro describe los archivos y dependencias de sus elementos. El agente puede consultar ese catálogo mediante MCP y trabajar con la CLI para añadir código. Los componentes pasan a formar parte de tu repositorio, donde tú controlas los cambios posteriores.

Antes de empezar

Lee la documentación de instalación para tu framework antes de empezar. Necesitas un proyecto compatible, Node.js ≥20.18.1 y npm/npx para la ruta de la CLI. El repositorio principal usa MIT; cada registro externo puede tener condiciones diferentes.

Límites y alternativas

Un registro puede incorporar código y dependencias a tu aplicación: revisa qué se añade. MCP no garantiza accesibilidad ni encaje con tu diseño. Usar la CLI manualmente o construir un componente pequeño sigue siendo válido; no todos los proyectos necesitan este ecosistema.

Recursos