local-only server

The server can only run on the client’s local machine because it depends on local resources.

Integrations

Integration with Discord for accessing logo assets through the logo_search tool.
Integration with GitHub for accessing logo assets through the logo_search tool.
Requires Node.js as a runtime environment for the Magic AI Agent, supporting the component generation process.

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

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
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
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

Generar clave API
- Visita la consola mágica de 21st.dev
- Generar una nueva clave API
Elija el método de instalación

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

Un comando para instalar y configurar MCP para su IDE:

npx @21st-dev/cli@latest install <client> --api-key <key>

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:

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

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) .

{
  "mcp": {
    "inputs": [
      {
        "type": "promptString",
        "id": "apiKey",
        "description": "21st.dev Magic API Key",
        "password": true
      }
    ],
    "servers": {
      "@21st-dev/magic": {
        "command": "npx",
        "args": ["-y", "@21st-dev/magic@latest"],
        "env": {
          "API_KEY": "${input:apiKey}"
        }
      }
    }
  }
}

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

{
  "inputs": [
    {
      "type": "promptString",
      "id": "apiKey",
      "description": "21st.dev Magic API Key",
      "password": true
    }
  ],
  "servers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": {
        "API_KEY": "${input:apiKey}"
      }
    }
  }
}

❓ 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

mcp/
├── app/
│   └── components/     # Core UI components
├── types/             # TypeScript type definitions
├── lib/              # Utility functions
└── public/           # Static assets

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 .

You must be authenticated.

A

security – no known vulnerabilities

F

license - not found

A

quality - confirmed to work

Tools

Una herramienta impulsada por IA que genera componentes de UI modernos a partir de descripciones en lenguaje natural y se integra con IDE populares para agilizar el flujo de trabajo de desarrollo de UI.

Related Resources

Reddit Discussion about this server