Servidor MCP Mágico de 21st-dev

¿Qué hace el Servidor MCP “Magic” de 21st-dev?

El Servidor MCP Mágico de 21st-dev es una plataforma impulsada por IA diseñada para ayudar a los desarrolladores a crear componentes de UI modernos y atractivos al instante mediante descripciones en lenguaje natural. Actuando como puente entre asistentes de IA y tu entorno de desarrollo, permite una generación de UI fluida, vistas previas en tiempo real e integración de activos y logotipos profesionales de marca. Con soporte para IDEs populares como Cursor, Windsurf, VSCode y Cline, agiliza los flujos de trabajo frontend permitiendo a los usuarios describir la UI que desean, y el Servidor MCP Mágico genera e inserta componentes pulidos y personalizables directamente en el proyecto. Su objetivo es mejorar la productividad del desarrollador automatizando tareas repetitivas de UI e integrando creatividad asistida por IA en el proceso de desarrollo diario.

Lista de indicaciones

No se listan plantillas de indicaciones explícitas en la documentación del repositorio proporcionada.

Lista de recursos

No se listan recursos explícitos en la documentación del repositorio proporcionada.

Lista de herramientas

No se listan herramientas explícitas en la documentación del repositorio proporcionada ni en server.py (o equivalente).

Casos de uso de este Servidor MCP

• Generación de UI con IA: Crea al instante componentes de UI modernos describiéndolos en lenguaje natural, ahorrando tiempo significativo en plantillas y diseño.
• Mejora de componentes: Actualiza componentes de UI existentes con funciones avanzadas y animaciones (próximamente), agilizando el desarrollo iterativo.
• Integración de activos de marca: Accede e integra fácilmente activos y logotipos profesionales de marca en tu frontend, manteniendo la coherencia y profesionalidad del diseño.
• Vista previa en tiempo real: Visualiza los componentes a medida que se crean, permitiendo una rápida creación de prototipos y ciclos de retroalimentación.
• Soporte multi-IDE: Utiliza el mismo flujo de trabajo de generación de UI por IA en Cursor, Windsurf, VSCode y Cline, asegurando experiencias de desarrollo consistentes.

Cómo configurarlo

Windsurf

1. Requisito previo: Instala Node.js (última LTS).
2. Obtén tu clave API: Genérala desde Consola Mágica de 21st.dev.
3. Abre el archivo de configuración: Edita ~/.codeium/windsurf/mcp_config.json.
4. Añade el Servidor MCP Mágico:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Guarda y reinicia Windsurf para aplicar los cambios.

Asegurando las claves API: Usa variables de entorno en tu configuración:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Claude

1. Requisito previo: Instala Node.js (última LTS).
2. Obtén tu clave API: Genérala desde Consola Mágica de 21st.dev.
3. Abre el archivo de configuración: Edita ~/.claude/mcp_config.json.
4. Añade el Servidor MCP Mágico:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Guarda y reinicia Claude para aplicar los cambios.

Asegurando las claves API:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cursor

1. Requisito previo: Instala Node.js (última LTS).
2. Obtén tu clave API: Genérala desde Consola Mágica de 21st.dev.
3. Abre el archivo de configuración: Edita ~/.cursor/mcp.json.
4. Añade el Servidor MCP Mágico:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Guarda y reinicia Cursor para aplicar los cambios.

Asegurando las claves API:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cline

1. Requisito previo: Instala Node.js (última LTS).
2. Obtén tu clave API: Genérala desde Consola Mágica de 21st.dev.
3. Abre el archivo de configuración: Edita ~/.cline/mcp_config.json.
4. Añade el Servidor MCP Mágico:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Guarda y reinicia Cline para aplicar los cambios.

Asegurando las claves API:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cómo usar este MCP dentro de los flujos

Uso de MCP en FlowHunt

Para integrar servidores MCP en tu flujo de trabajo FlowHunt, comienza añadiendo el componente MCP a tu flujo y conectándolo a tu agente de IA:

Haz clic en el componente MCP para abrir el panel de configuración. En la sección de configuración del sistema MCP, inserta los detalles de tu servidor MCP usando este formato JSON:

{
  "magic-mcp": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

Una vez configurado, el agente de IA podrá usar este MCP como herramienta con acceso a todas sus funciones y capacidades. Recuerda cambiar "magic-mcp" por el nombre real de tu servidor MCP y reemplazar la URL por la de tu propio servidor MCP.

Descripción general

Soporte de Roots no especificado en el repositorio.

Nuestra opinión

El Servidor MCP Mágico de 21st-dev tiene una excelente documentación para la instalación y configuración en múltiples plataformas, con casos de uso reales claros y una gran base de usuarios activa. Sin embargo, la ausencia de documentación explícita para indicaciones MCP, recursos, herramientas y conceptos avanzados de MCP como Roots y Sampling limita su transparencia para usuarios avanzados e integradores.

Puntuación MCP

Calificación: 6/10

El Servidor MCP Mágico de 21st-dev obtiene una alta puntuación en usabilidad, actividad y claridad de configuración, pero pierde puntos por la falta de detalles técnicos avanzados y elementos MCP explícitos en la documentación pública.