21st.dev Magic

Magic MCP → 21st MCP

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

Instala el 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 lugar. Genera una clave nueva en 21st.dev/mcp.

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

npx -y @21st-dev/magic@latest API_KEY="..." sigue funcionando: 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 las herramientas disponibles para la cuenta autenticada.

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.

Acceso a IA

El acceso a componentes de Builder no habilita la IA alojada de 21st. El servidor lista generate y iterate_generation solo cuando el acceso a IA está habilitado. Consulta get_usage.aiGenerationEnabled; esto informa el acceso, no el saldo restante de créditos de IA. Con la IA desactivada, usa search y get_component, y luego adapta el código con tu propio agente de codificación. Los borradores existentes siguen siendo legibles.

Una llamada de generación en caché o heredada puede devolver ai_subscription_required. No reintentes hasta que la IA esté habilitada. Actualiza la lista de herramientas del cliente o vuelve a conectarte después de habilitar la IA. El proxy reenvía el descubrimiento al servidor, por lo que las versiones existentes del proxy reciben este comportamiento sin una actualización de npm.

server.json refleja el listado oficial del registro dev.21st/mcp. La versión del registro es independiente de la versión de este paquete de compatibilidad.

Nombres de herramientas antiguos → nombres de herramientas nuevos

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

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 a partir del 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 de catálogo en 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 las herramientas disponibles para tu cuenta.

Instalar como plugin

Este repositorio también está empaquetado como un plugin de agente (servidor MCP + una habilidad de UI). No necesitas esperar por ninguna tienda — este repositorio ES un marketplace, agrégalo directamente:

# Claude Code
claude plugin marketplace add 21st-dev/magic-mcp   # then: /plugin install 21st

# Grok Build
grok plugin marketplace add 21st-dev/magic-mcp && grok plugin install 21st --trust

# Codex CLI
codex plugin marketplace add 21st-dev/magic-mcp    # then install "21st" from /plugins

Configura tu clave API en la variable API_KEY_21ST (clave gratuita en 21st.dev/mcp).

Listados en tiendas:

• Cursor / Grok Bot — instala "21st" desde el Cursor Marketplace, luego configura tu API_KEY_21ST en Plugins → Configure. Obtén una clave en 21st.dev/mcp.
• Grok Build — grok plugin install 21st --trust (desde el marketplace oficial de xAI), luego exporta API_KEY_21ST.
• Claude Code — el repositorio incluye un manifiesto .claude-plugin/: /plugin install desde cualquier marketplace que liste este repositorio, o cárgalo localmente con claude --plugin-dir . y exporta API_KEY_21ST.

La configuración del plugin espera la clave API en la variable API_KEY_21ST en cada cliente.

Enlaces

• Configuración del 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 de UI: https://21st.dev

Preguntas frecuentes

¿Por qué mi antiguo Magic MCP dejó de funcionar? El backend de Magic (magic.21st.dev) fue reemplazado por el 21st MCP unificado, 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 volverá a funcionar a través de este proxy de compatibilidad, aunque recomendamos cambiar a npx @21st-dev/cli@latest init.

¿/ui sigue siendo una cosa? Usa lenguaje natural: pídele a tu agente que busque componentes en 21st (search), o usa la generación de UI alojada (generate) cuando la IA esté habilitada. Las frases de activación antiguas /ui, /21 eran una convención de las descripciones de las herramientas heredadas, no del protocolo.