Penpot
58.5kConecta agentes de IA con Penpot, la plataforma de diseño open source, para que puedan leer y trabajar sobre archivos de diseño reales.
- Último commit
- anteayer
diseno ui
Magic
21st-devmagic-mcp
Conecta tu editor (Cursor, Claude Code, Windsurf, VS Code) al 21st MCP para buscar componentes React/Tailwind y generar UI con IA desde el propio editor.
stdiohttp
Solicita
TWENTY_FIRST_API_KEYAPI_KEY_21ST- Estrellas
- 5.7k
- Actualizado
- hace 13 días
- Herramientas
- 3
- Transporte
- stdio · http
- Forks
- 429
- Issues
- 1
del repositorio
último commit
expuestas al agente
cómo conecta
abiertos
Instalación
npx @21st-dev/cli@latest init --client cursorQué es Magic
Magic MCP era el servidor original de 21st.dev para buscar entre miles de componentes React/Tailwind y generar interfaces con IA sin salir del editor; ahora ese servicio se ha unificado bajo el 21st MCP, instalado mediante el 21st CLI. Este paquete (@21st-dev/magic) sigue publicado como un proxy de compatibilidad: reenvía por stdio cada mensaje a la nueva URL HTTP del 21st MCP, así que las configuraciones antiguas de mcp.json no se rompen.
El servidor actual expone mucho más que las cuatro herramientas originales de Magic: búsqueda en el catálogo de componentes, temas y plantillas, recuperación de código de pago, marcadores, bibliotecas de equipo, generación de UI con variantes y gestión de perfil, entre otras cosas. Las herramientas antiguas siguen aceptándose por nombre y se traducen internamente a las nuevas.
Para usarlo hace falta una API key nueva de 21st.dev/mcp, porque las claves emitidas por la consola antigua de Magic quedaron invalidadas. Puedes pasarla como variable de entorno o en varios formatos heredados, y lo más recomendable es instalar directamente el 21st CLI en lugar de depender del proxy de compatibilidad.
Qué le permite hacer a tu agente
- Reenvía por stdio los mensajes del antiguo Magic MCP hacia el servidor unificado 21st MCP
- Permite buscar componentes, temas y plantillas React/Tailwind desde el editor
- Genera nuevas interfaces de usuario con IA a partir de descripciones o prompts de refinamiento
- Traduce automáticamente los nombres de herramientas antiguos de Magic a los nuevos del 21st MCP
- Da acceso a funciones adicionales como marcadores, bibliotecas de equipo y gestión de perfil
Úsalo cuando
- Tienes una configuración antigua de mcp.json apuntando a @21st-dev/magic y quieres que siga funcionando sin tocarla
- Quieres buscar o generar componentes React/Tailwind directamente desde Cursor, Claude Code, Windsurf o VS Code
- Necesitas migrar de las claves API antiguas de Magic a una API key nueva de 21st.dev/mcp
Herramientas que expone
Los nombres que el agente ve al conectarse.
- generate
- get_inspiration
- search_logo
Antes de conectarlo
Este servidor lee sus credenciales del entorno. Tenlas a mano antes de añadirlo a tu cliente MCP.
Variables de entorno:TWENTY_FIRST_API_KEYAPI_KEY_21ST
Detalles
- Publicado por
- 21st-dev
- Categoría
- Diseño y UI
- Licencia
- No especificada
- Versión
- Sin releases
- Repositorio
- 21st-dev/magic-mcp
- Transporte
- stdio, http
Etiquetas
- componentes-ui
- react
- tailwind
- generacion-ui
- editor
Compartir
¿Este servidor es tuyo? Reclama el listado para corregir cualquier dato, añadir un logo y enlazar tu documentación.
Más servidores de Diseño y UI
Conecta un LLM como Claude con Blender para crear, modificar e inspeccionar escenas 3D mediante un servidor de sockets y ejecución de código Python.
- Herramientas expuestas
- 1 herramienta
- Transporte
- stdio
- Último commit
- hace 3 días
- Credenciales
diseno ui
Figma Context
15.6kConecta agentes de código como Cursor con archivos de Figma para que implementen diseños UI a partir de datos reales de layout, no capturas de pantalla.
- Transporte
- stdio
- Último commit
- hace 7 días
- Credenciales
diseno ui