Magic MCP: genera componentes UI al instante con lenguaje natural 185

¿Qué es Magic MCP?

Magic MCP (Magic Magic Component Platform) es una herramienta impulsada por ia desarrollada por 21st.dev que ayuda a los desarrolladores a generar rápidamente componentes de interfaz de usuario modernos mediante descripciones en lenguaje natural. Se integra con IDEs populares (como Cursor, WindSurf y VSCode), permitiendo generar botones, barras de navegación, formularios de inicio de sesión y otros elementos de interfaz, con vista previa en tiempo real para ver el resultado del componente al instante, y el código generado se puede modificar en cualquier momento.

Funciones principales de Magic MCP

La función principal de Magic MCP es generar componentes de UI a través de descripciones en lenguaje natural. Los desarrolladores solo necesitan escribir una descripción en el chat del AI Agent (por ejemplo, /ui create a modern navigation bar with responsive design), y Magic MCP generará al instante un componente de UI completo basado en la descripción y lo añadirá al proyecto.

Características destacadas de Magic MCP

• Generación de UI impulsada por IA: crea componentes mediante descripciones en lenguaje natural, sin necesidad de escribir código manualmente.

• Soporte para múltiples IDEs: compatible con varios IDEs populares, incluyendo:

• Cursor IDE: integración mediante herramienta de línea de comandos.

• WindSurf: integración mediante archivo de configuración.

• VSCode + Cline (Beta): integración mediante la extensión Cline.

• Biblioteca de componentes moderna: ofrece una gran cantidad de componentes preconstruidos y personalizables, inspirada en la biblioteca de componentes de 21st.dev.

• Vista previa en tiempo real: visualiza el resultado al instante al crear componentes, sin necesidad de actualizar manualmente.

• Soporte para TypeScript: ofrece una experiencia de desarrollo con seguridad de tipos, ideal para el desarrollo frontend moderno.

• Integración con SVGL: proporciona una amplia variedad de activos y logotipos de marcas para construir rápidamente interfaces profesionales.

• Mejora de componentes: próximamente soportará la mejora de componentes existentes mediante IA, añadiendo funciones avanzadas y animaciones.

Flujo de uso de Magic MCP

1. Describe la necesidad

• Escribe /ui en el chat del AI Agent y luego describe el componente que deseas. Por ejemplo: /ui create a modern navigation bar with responsive design

2. Genera el componente

• Magic MCP generará un componente de UI completo según la descripción. El componente generado seguirá el estilo de la biblioteca de componentes de 21st.dev y será totalmente personalizable.

3. Integra en el proyecto

• El componente generado se añadirá automáticamente a tu proyecto y podrás empezar a usarlo de inmediato. Todos los componentes se pueden editar y modificar como cualquier componente normal de React.

Casos de uso de Magic MCP

• Desarrollo rápido de prototipos: genera componentes de UI rápidamente mediante lenguaje natural, ahorrando tiempo.

• Colaboración en equipo: comparte la biblioteca de componentes con los miembros del equipo para mejorar la eficiencia del desarrollo.

• Aprendizaje y experimentación: prueba rápidamente nuevos diseños de UI y explora diferentes estilos de diseño.

Instalación y configuración de Magic MCP

Antes de usar Magic MCP, es necesario realizar una configuración sencilla. A continuación se muestran los métodos de instalación y configuración para diferentes IDEs:

Cursor IDE

npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{\"TWENTY_FIRST_API_KEY\":\"your-api-key\"}"

WindSurf

Añade la siguiente configuración en ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli@latest",
        "install",
        "@21st-dev/magic-mcp",
        "--client",
        "windsurf"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}

VSCode + Cline (Beta)

Añade el siguiente contenido en la configuración MCP de Cline:

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli@latest",
        "install",
        "@21st-dev/magic-mcp",
        "--client",
        "cline"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}

Preguntas frecuentes sobre Magic MCP

P1: ¿Cómo gestiona Magic MCP mi código?

Magic MCP solo escribe o modifica los archivos relacionados con los componentes generados, siguiendo el estilo y la estructura del código del proyecto, sin afectar a otras partes.

P2: ¿Se pueden personalizar los componentes generados?

¡Por supuesto! Los componentes generados son totalmente editables, con una estructura de código clara, y puedes modificarlos como cualquier componente normal de React.

P3: ¿Qué pasa si supero el número de generaciones?

Si superas el límite mensual de generaciones, el sistema te sugerirá actualizar tu plan. Los componentes existentes seguirán funcionando con normalidad.

P4: ¿Hay algún límite en la complejidad de los componentes?

Magic MCP puede manejar componentes de diversa complejidad, desde botones sencillos hasta formularios interactivos complejos. Se recomienda dividir las interfaces muy complejas en varios componentes más pequeños.

Repositorio de GitHub:https://github.com/21st-dev/magic-mcp

Sitio web oficial del proyecto:https://21st.dev/magic