Agente de IA mágico de 21st.dev

Magic Component Platform (MCP) es una potente herramienta basada en IA que ayuda a los desarrolladores a crear componentes de interfaz de usuario atractivos y modernos al instante mediante descripciones en lenguaje natural. Se integra a la perfección con los IDE más populares y proporciona un flujo de trabajo optimizado para el desarrollo de la interfaz de usuario.

🌟 Características

• Generación de interfaz de usuario impulsada por IA : cree componentes de interfaz de usuario describiéndolos en lenguaje natural

• Compatibilidad con múltiples IDE :

  • Integración de Cursor IDE

  • Soporte para windsurf

  • Compatibilidad con VSCode

  • Integración de VSCode + Cline (Beta)

• Biblioteca de componentes moderna : acceso a una amplia colección de componentes prediseñados y personalizables inspirados en 21st.dev

• Vista previa en tiempo real : vea instantáneamente sus componentes a medida que los crea

• Compatibilidad con TypeScript : compatibilidad total con TypeScript para un desarrollo seguro de tipos

• Integración SVGL : acceso a una amplia colección de activos y logotipos de marca profesionales

• Mejora de componentes : mejore los componentes existentes con funciones y animaciones avanzadas (próximamente)

🎯 Cómo funciona

1. Dígale al agente lo que necesita

   • En el chat de tu agente de IA, simplemente escribe /ui y describe el componente que estás buscando

   • Ejemplo: /ui create a modern navigation bar with responsive design

2. Deja que la magia lo cree

   • Su IDE le solicita que utilice Magic

   • Magic crea instantáneamente un componente de interfaz de usuario pulido

   • Los componentes están inspirados en la biblioteca de 21st.dev

3. Integración perfecta

   • Los componentes se agregan automáticamente a su proyecto

   • Comience a utilizar sus nuevos componentes de UI de inmediato

   • Todos los componentes son totalmente personalizables.

🚀 Primeros pasos

Prerrequisitos

• Node.js (se recomienda la última versión LTS)

• Uno de los IDE compatibles:

  • Cursor

  • Windsurf

  • VSCode (con extensión Cline)

Instalación

1. Generar clave API

   • Visita la consola mágica de 21st.dev

   • Generar una nueva clave API

2. Elija el método de instalación

Método 1: Instalación CLI (recomendado)

Un comando para instalar y configurar MCP para su IDE:

Clientes compatibles: cursor, windsurf, cline, claude

Método 2: Configuración manual

Si prefiere la configuración manual, agregue esto al archivo de configuración MCP de su IDE:

Ubicaciones de los archivos de configuración:

• Cursor: ~/.cursor/mcp.json

• Windsurf: ~/.codeium/windsurf/mcp_config.json

• Cline: ~/.cline/mcp_config.json

• Claude: ~/.claude/mcp_config.json

Método 3: Instalación de VS Code

Para la instalación con un solo clic, haga clic en uno de los botones de instalación a continuación:

Configuración manual de VS Code

Primero, marque los botones de instalación de arriba para una instalación con un solo clic. Para la configuración manual:

Agrega el siguiente bloque JSON a tu archivo de configuración de usuario (JSON) en VS Code. Puedes hacerlo presionando Ctrl + Shift + P y escribiendo Preferences: Open User Settings (JSON) .

Opcionalmente, puede agregarlo a un archivo llamado .vscode/mcp.json en su espacio de trabajo:

❓ Preguntas frecuentes

¿Cómo maneja Magic AI Agent mi base de código?

Magic AI Agent solo escribe o modifica archivos relacionados con los componentes que genera. Sigue el estilo y la estructura del código de tu proyecto y se integra a la perfección con tu código base existente sin afectar a otras partes de tu aplicación.

¿Puedo personalizar los componentes generados?

¡Sí! Todos los componentes generados son totalmente editables y vienen con código bien estructurado. Puedes modificar el estilo, la funcionalidad y el comportamiento como cualquier otro componente de React en tu código.

¿Qué pasa si me quedo sin generaciones?

Si supera su límite de generación mensual, se le solicitará que actualice su plan. Puede actualizarlo en cualquier momento para seguir generando componentes. Sus componentes actuales seguirán funcionando correctamente.

¿Qué tan pronto se agregan nuevos componentes a la biblioteca de 21st.dev?

Los autores pueden publicar componentes en 21st.dev en cualquier momento, y Magic Agent tendrá acceso inmediato a ellos. Esto significa que siempre tendrás acceso a los componentes y patrones de diseño más recientes de la comunidad.

¿Existe un límite para la complejidad de los componentes?

Magic AI Agent puede gestionar componentes de diversa complejidad, desde botones sencillos hasta formularios interactivos complejos. Sin embargo, para obtener mejores resultados, recomendamos dividir las interfaces de usuario muy complejas en componentes más pequeños y manejables.

🛠️ Desarrollo

Estructura del proyecto

Componentes clave

• IdeInstructions : Instrucciones de configuración para diferentes IDE

• ApiKeySection : Interfaz de gestión de claves API

• WelcomeOnboarding : Flujo de incorporación para nuevos usuarios

🤝 Contribuyendo

¡Agradecemos las contribuciones! Únete a nuestra comunidad de Discord y comparte tus comentarios para ayudarnos a mejorar Magic Agent. El código fuente está disponible en GitHub .

👥 Comunidad y soporte

• Comunidad de Discord : Únete a nuestra comunidad activa

• Twitter - Síguenos para recibir actualizaciones

⚠️ Aviso de la versión beta

Magic Agent se encuentra actualmente en fase beta. Todas las funciones son gratuitas durante este periodo. Agradecemos sus comentarios y paciencia mientras seguimos mejorando la plataforma.

📝 Licencia

Licencia MIT

🙏 Agradecimientos

• Gracias a nuestros probadores beta y miembros de la comunidad.

• Un agradecimiento especial a los equipos Cursor, Windsurf y Cline por su colaboración.

• Integración con 21st.dev para inspirar componentes

• SVGL para la integración de logotipos y activos de marca

Para obtener más información, únete a nuestra comunidad de Discord o visita 21st.dev/magic .