Magic UI MCP | MCPBro

¿Qué es Magic UI MCP?

Magic UI MCP es un servidor de protocolo que permite a los modelos de lenguaje y agentes de IA descubrir, recuperar e interactuar con una rica colección de componentes modernos del frontend de Magic UI. A través de puntos finales MCP estandarizados, los usuarios pueden acceder a detalles de implementación, obtener ejemplos y utilizar bloques de construcción de componentes avanzados para un desarrollo rápido de UI en flujos de trabajo de IA y clientes compatibles.

Cómo Configurar Magic UI MCP

Puedes configurar Magic UI MCP mediante instalación automática por CLI o mediante configuración manual en tu IDE o aplicación soportada.

Automatizada: Ejecuta
```
npx @magicuidesign/cli@latest install <cliente>
```
reemplazando <cliente> por tu aplicación (como cursor, windsurf, claude, cline, o roo-cline).

Manual: Agrega el siguiente bloque al archivo de configuración MCP de tu IDE o aplicación:

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

Cómo Usar Magic UI MCP

Una vez configurado, puedes interactuar con Magic UI MCP pidiendo a tu aplicación impulsada por LLM que realice tareas relacionadas con la UI, como "Haz un carrusel de logotipos" o "Agrega una animación de desvanecimiento borroso en el texto." El servidor dirigirá la solicitud a través de su conjunto de herramientas categorizadas, proporcionando detalles de implementación, fragmentos de código y orientación de integración para los componentes de Magic UI adaptados a tu solicitud.

Características Clave

Acceso a Componentes Ricos: Recupera instantáneamente detalles de implementación para cientos de componentes únicos de Magic UI.
Herramientas Basadas en Categorías: Los componentes están organizados en categorías funcionales para una eficiente exploración de herramientas y entornos limitados por contexto.
Integración Fluida con LLM: Funciona de forma nativa con aplicaciones y agentes compatibles con MCP, listos para la creación de prototipos de UI impulsados por IA.
Configuración Ligera: Instalación rápida y capacidad de invocación local o remota.
Extensible: Diseñado para soportar nuevos componentes y agrupaciones a medida que Magic UI evoluciona.

Casos de Uso

Generación de Código de UI con IA: Genera instantáneamente UIs interactivas y animaciones usando prompts en lenguaje natural en IDEs.
Consulta de Componentes: Busca, explora y recupera detalles de implementación de componentes de Magic UI mientras prototipas o aprendes.
Diseño a Código Automatizado: Permite a los agentes traducir ideas de diseño o inspiraciones directamente en código de UI listo para implementación.

FAQ

Q1: ¿Qué aplicaciones soportan Magic UI MCP directamente?
A1: El servidor se puede instalar de forma nativa para clientes populares como cursor, windsurf, claude, cline y roo-cline.

Q2: ¿Qué pasa si necesito detalles para un componente específico que no está listado directamente en una categoría de herramienta?
A2: Puedes ejecutar el servidor MCP localmente y personalizar la lógica de agrupamiento para acceder o exponer información de componente más específica o granular.

Q3: ¿Existen limitaciones en el uso de herramientas?
A3: Sí, algunos clientes pueden restringir el número de llamadas a herramientas por solicitud. Magic UI MCP agrupa herramientas por categoría para optimizar la compatibilidad con estas limitaciones.

Q4: ¿Puedo extender Magic UI MCP con mis propios componentes?
A4: El servidor es de código abierto y licenciada bajo MIT, por lo que puedes bifurcar y adaptar la base de código para incluir tus componentes o categorías personalizados.

Nombre del Protocolo	Descripción
getUIComponents	Proporciona una lista completa de todos los componentes de Magic UI disponibles para integración.
getLayout	Devuelve detalles de implementación para componentes de diseño y basados en cuadrícula, como bento-grid, dock, file-tree, grid-pattern, interactive-grid-pattern, y dot-pattern.
getMedia	Devuelve detalles de implementación para componentes relacionados con medios, incluyendo hero-video-dialog, terminal, marquee, script-copy-btn, y code-comparison.
getMotion	Devuelve detalles de implementación para componentes de movimiento y animación, como blur-fade, scroll-progress, scroll-based-velocity, orbiting-circles, y animated-circular-progress-bar.
getTextReveal	Devuelve detalles de implementación para componentes de revelación de texto y animación, cubriendo text-animate, line-shadow-text, aurora-text, animated-shiny-text, animated-gradient-text, text-reveal, typing-animation, box-reveal, y number-ticker.
getTextEffects	Devuelve detalles de implementación para componentes de efectos de texto, incluyendo word-rotate, flip-text, hyper-text, morphing-text, spinning-text, y sparkles-text.
getButtons	Devuelve detalles de implementación para componentes de botones animados e interactivos: rainbow-button, shimmer-button, shiny-button, interactive-hover-button, animated-subscribe-button, pulsating-button, y ripple-button.
getEffects	Devuelve detalles de implementación para componentes de efectos visuales e interactivos como animated-beam, border-beam, shine-border, magic-card, meteors, neon-gradient-card, confetti, particles, cool-mode, y scratch-to-reveal.
getWidgets	Devuelve detalles de implementación para componentes de widgets y utilidades, incluyendo animated-list, tweet-card, client-tweet-card, lens, pointer, avatar-circles, icon-cloud, y globe.
getBackgrounds	Devuelve detalles de implementación para componentes visuales de fondo y basados en cuadrícula: warp-background, flickering-grid, animated-grid-pattern, retro-grid, y ripple.
getDevices	Devuelve detalles de implementación para componentes de maquetas de dispositivos como safari, iphone-15-pro, y android.