21st.dev Magic

oficial

Crea componentes de interfaz de usuario artesanales inspirados en los mejores ingenieros de diseño de 21st.dev.

GitHub

5.6k

¿Qué puedes hacer con 21st Dev Magic MCP?

Buscar en el catálogo de 21st.dev — encuentra componentes, temas o plantillas describiendo lo que necesitas con la herramienta search.
Generar componentes de interfaz de usuario a partir de un prompt — pide un componente de React que coincida con una descripción y recibe código listo para usar mediante generate.
Obtener inspiración de componentes — recupera ejemplos seleccionados de componentes para un caso de uso dado con get_inspiration.
Buscar logotipos de empresas — encuentra logotipos SVG por nombre de empresa usando search_logo (una consulta por llamada).
Recuperar código de pago — accede a componentes premium que hayas comprado a través de la plataforma.

Documentación

Magic MCP → 21st MCP

Magic MCP ahora es 21st MCP. El servidor Magic MCP (@21st-dev/magic) ha sido reemplazado por el unificado 21st MCP, instalado mediante la 21st CLI — configuración en 21st.dev/mcp. Este paquete se mantiene publicado como un proxy ligero de compatibilidad para que las configuraciones antiguas sigan funcionando.

Instalar 21st MCP (recomendado)

npx @21st-dev/cli@latest init --client cursor   # or: claude | vscode | windsurf | codex

O agrégalo manualmente — es un servidor MCP HTTP simple:

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": { "x-api-key": "YOUR_21ST_API_KEY" }
    }
  }
}

Obtén una clave API en 21st.dev/mcp.

Las claves API antiguas de Magic fueron restablecidas. Las claves emitidas por la consola antigua de Magic ya no funcionan en ningún lado. Genera una clave nueva en 21st.dev/mcp.

Qué hace este paquete ahora (v0.2.0+)

npx -y @21st-dev/magic@latest API_KEY="..." todavía funciona: desde v0.2.0 es un pequeño proxy stdio que reenvía cada mensaje MCP al servidor 21st MCP. Las entradas existentes de mcp.json que hacen referencia a @21st-dev/magic siguen funcionando — pero ahora se comunican con el mismo servidor que la 21st CLI, con el conjunto completo de herramientas actuales.

La clave API se acepta en todas las formas históricas: API_KEY="..." posicional, --API_KEY=..., /API_KEY:..., -API_KEY ..., o las variables de entorno TWENTY_FIRST_API_KEY / API_KEY_21ST.

Nombres antiguos de herramientas → nuevos nombres de herramientas

El 21st MCP aún acepta los nombres heredados de herramientas Magic y los traduce, para que los agentes que recuerdan los nombres antiguos sigan funcionando. Prefiere los nuevos nombres:

Herramienta Magic heredada	Herramienta 21st MCP
`21st_magic_component_builder`	`generate`
`21st_magic_component_inspiration`	`get_inspiration`
`21st_magic_component_refiner`	`generate` (nueva generación desde el prompt de refinamiento)
`logo_search`	`search_logo` (una consulta por llamada)

El servidor actual expone mucho más que las cuatro herramientas antiguas: búsqueda en catálogo de componentes/temas/plantillas, recuperación de código de pago, marcadores, bibliotecas de equipo, generación de UI con variantes, gestión de perfil, y más. Conéctate y llama a tools/list para ver el conjunto completo.

Enlaces

Configuración de 21st MCP y claves API: https://21st.dev/mcp
21st CLI en npm: https://www.npmjs.com/package/@21st-dev/cli
21st.dev — descubre, publica y genera componentes UI: https://21st.dev

Preguntas frecuentes

¿Por qué dejó de funcionar mi antiguo Magic MCP? El backend de Magic (magic.21st.dev) fue reemplazado por el unificado 21st MCP, y todas las claves API antiguas fueron restablecidas por seguridad. Actualiza a una clave nueva desde 21st.dev/mcp — tu configuración existente de @21st-dev/magic funcionará de nuevo a través de este proxy de compatibilidad, aunque recomendamos cambiar a npx @21st-dev/cli@latest init.

¿Sigue existiendo /ui? Usa lenguaje natural: pídele a tu agente que busque en 21st componentes (search), o que genere nueva UI (generate). Las antiguas frases desencadenantes /ui, /21 eran una convención de las descripciones de las herramientas heredadas, no del protocolo.