# Magic MCP Server

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

Fuente: https://skillsagentes.com/mcp/magic
Markdown: https://skillsagentes.com/mcp/magic.md

Repositorio: https://github.com/21st-dev/magic-mcp
Web: https://21st.dev/mcp
Autor: 21st-dev
Licencia: ISC
Estrellas: 5906
Último push: 9 sept 2026
Transporte: stdio, http

## Qué es

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.

## Instalación

```bash
npx @21st-dev/cli@latest init --client cursor
```

## Qué hace

- 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

## Cuándo usarlo

- 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

- `generate`
- `get_inspiration`
- `search_logo`

## Credenciales que pide

- `TWENTY_FIRST_API_KEY`
- `API_KEY_21ST`

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/mcp/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- [Todos los servidores MCP](https://skillsagentes.com/mcp.md)
- [Agent Skills](https://skillsagentes.com/skills.md)

## Servidores relacionados

- [Penpot](https://skillsagentes.com/mcp/penpot.md): Conecta agentes de IA con Penpot, la plataforma de diseño open source, para que puedan leer y trabajar sobre archivos de diseño reales.
- [Blender Model Context Protocol](https://skillsagentes.com/mcp/blender-model-context-protocol.md): 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.
- [Figma Context](https://skillsagentes.com/mcp/figma-context.md): Conecta 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.
- [Cursor Talk to Figma](https://skillsagentes.com/mcp/cursor-talk-to-figma.md): Conecta agentes de IA como Cursor con Figma vía WebSocket para leer y modificar diseños, textos, componentes y prototipos de forma programática.
- [Canvas UI](https://skillsagentes.com/mcp/canvas-ui.md): Deja que Cursor, Claude Code o VS Code busquen e instalen componentes canvas y WebGL del registro @canvas-ui desde el propio editor.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)