Magic UI MCP MCP — Casos de uso, Instalar & Demo en vivo

Por qué usarlo

Características clave

Tres herramientas sobre el registro de Magic UI en vivo
Búsqueda de componentes de lenguaje natural (tipo, consulta, paginación)
Devuelve comandos de instalación y fragmentos de uso completos
Sin paquete estático: siempre lee el registro actual
Funciona en todos los principales clientes de MCP

Demo en vivo

Cómo se ve en la práctica

magic-ui-mcp.replay ▶ listo

0/0

Instalar

Elige tu cliente

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

{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

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

{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "magic-ui-mcp",
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  ]
}

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

{
  "context_servers": {
    "magic-ui-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@magicuidesign/mcp@latest"
        ]
      }
    }
  }
}

Añádelo a context_servers. Zed recarga en caliente al guardar.

claude mcp add magic-ui-mcp -- npx -y @magicuidesign/mcp@latest

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: Magic UI MCP

Agregue una sección de héroe animada a una página de inicio de Next.js

👤 Desarrolladores y diseñadores de frontend que crean páginas de marketing ⏱ ~15 min beginner

Cuándo usarlo: Necesitas una animación de héroe pulida y no quieres buscar documentos tú mismo.

Requisitos previos

Proyecto Next.js o React — npx crear-siguiente-aplicación @ más reciente
Viento de cola + shadcn/ui — Magic UI se basa en estos; instalar si falta

Flujo

Pídelo naturalmente

Agregue una animación de aparición borrosa para H1 y CTA en la sección de mi héroe.✓ Copiado

→ El agente llama a searchRegistryItems para detectar un "desvanecimiento borroso" y devuelve el componente
Instalar + cablear

Instale el componente y péguelo en app/page.tsx reemplazando al héroe actual.✓ Copiado

→ Se ejecuta el comando de instalación; importaciones agregadas; héroe actualizado
Ajustar el tiempo

Entrada más lenta: retraso de 600 ms entre H1 y CTA.✓ Copiado

→ Accesorios actualizados en línea

Resultado: Una animación de héroe digna de un barco sin salir del editor.

Errores comunes

Mezclar Magic UI con una configuración que no sea Tailwind — La mayoría de los componentes asumen clases Tailwind; puerto a módulos CSS solo si está listo para ese trabajo

Combinar con: mcp-echarts

Explore todos los componentes de Magic UI por categoría

👤 Diseñadores explorando la biblioteca. ⏱ ~10 min beginner

Cuándo usarlo: Estás en una fase temprana del diseño y quieres escanear lo que está disponible.

Flujo

Listar por tipo

Enumere todos los componentes de Magic UI del tipo 'animación': límite 30.✓ Copiado

→ listRegistryItems devuelve nombres + títulos
Ampliar los interesantes

Muéstrame los detalles de marquesina, texto de aurora y borde brillante.✓ Copiado

→ Detalles completos incl. instalación + uso por componente

Resultado: Una breve lista de componentes que vale la pena probar en la página siguiente.

Reemplazar una fila de logotipos estáticos con una marquesina de logotipos

👤 Propietarias de marketing / página de destino ⏱ ~10 min beginner

Cuándo usarlo: Su fila "Confiable por" parece anticuada: un marco de desplazamiento agrega movimiento.

Flujo

Encuentra la marquesina

Convierta la fila "Confiable por" en una marquesina de logotipos.✓ Copiado

→ La agente elige el componente de la marquesina y lo adapta.
Pausa al pasar el mouse

Pausa la marquesina al pasar el mouse para mayor accesibilidad.✓ Copiado

→ ajuste de utilería/clase; preserva a los usuarios con movimiento reducido

Resultado: Fila de marquesina que luce moderna y respeta las preferencias de movimiento.

Errores comunes

Ignorar prefiere el movimiento reducido — Los componentes de Magic UI normalmente lo respetan; no anule a menos que conozca a los usuarios

Combinar con: motion-dev-animations-skill

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

magic-ui-mcp + motion-dev-animations-skill

Magic UI para componentes prediseñados, motion.dev para animaciones personalizadas

Utilice el desenfoque y desvanecimiento de Magic UI para el héroe, luego motion.dev para obtener un paralaje personalizado vinculado con desplazamiento a continuación.✓ Copiado

magic-ui-mcp + figma

Tome un diseño de Figma y busque el componente Magic UI más cercano

Esta sección de tarjetas Figma se parece a la rejilla bento de Magic UI. Instálalo y completa el texto.✓ Copiado

magic-ui-mcp + claude-code-design-skills

Flujo de Figma a código + mejoras en la interfaz de usuario mágica

Convierta Figma para reaccionar; cuando tenga sentido, utilice componentes Magic UI en lugar de componentes borrador.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar	Coste
listRegistryItems	kind?, query?, limit?, offset?	Explorar o paginar componentes disponibles	1 registry fetch
searchRegistryItems	query + pagination	Búsqueda de componentes de lenguaje natural	1 registry fetch
getRegistryItem	id/name	Antes de instalar, para ver exactamente lo que obtendrás	1 registry fetch

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: El registro es de acceso público: no hay problemas de tarifas en uso normal
Tokens por llamada: Pequeños metadatos por llamada
Monetario: Gratis
Consejo: Utilice listRegistryItems con filtro de tipo; no busque todos los elementos solo para navegar.

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Sin credenciales

Salida de datos: Recuperaciones de solo lectura en el registro de Magic UI. No escribe en ninguna parte.

Cualquier componente que instales introduce código en tu proyecto: lee el archivo generado una vez antes de confirmarlo, al igual que cualquier dependencia.

Resolución de problemas

Errores comunes y soluciones

La herramienta devuelve una matriz vacía

Es posible que el registro esté bloqueado en su red; Vuelva a intentarlo y confirme que DNS se resuelva en magicui.design.

Verificar: curl -I https://magicui.design/r/index.json

El componente se instala pero parece sin estilo

Faltan la configuración de Tailwind o las variables CSS: siga la configuración única de Magic UI (globals.css + tailwind.config.ts).

Verificar: Check tailwind.config.ts for magicui plugin

La animación tartamudea

Probablemente una cascada de renderizado. Memorice los componentes principales; Confirme que no haya ningún desorden en el diseño.

Verificar: Chrome DevTools Performance → Frames

Alternativas

Magic UI MCP vs otros

Alternativa	Cuándo usarla	Contrapartida
motion-dev-animations-skill	Quieres una lógica de movimiento personalizada, no una biblioteca de componentes	Más trabajo; más control
figma	Tienes diseños existentes en Figma para portar.	Dirección diferente: diseño → código, no biblioteca primero
claude-code-design-skills	Estás haciendo Figma-to-code, no adopción de biblioteca	Cubre una parte diferente de la tubería.

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills