21st.dev Magic

Magic MCP → 21st MCP

Magic MCP est désormais le 21st MCP. Le serveur Magic MCP (@21st-dev/magic) a été remplacé par le 21st MCP unifié, installé via la 21st CLI — configuration sur 21st.dev/mcp. Ce paquet reste publié comme un proxy de compatibilité léger afin que les anciennes configurations continuent de fonctionner.

Installer le 21st MCP (recommandé)

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

Ou ajoutez-le manuellement — c'est un serveur MCP HTTP simple :

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

Obtenez une clé API sur 21st.dev/mcp.

Les anciennes clés API Magic ont été réinitialisées. Les clés émises par l'ancienne console Magic ne fonctionnent plus nulle part. Générez une nouvelle clé sur 21st.dev/mcp.

Ce que fait ce paquet maintenant (v0.2.0+)

npx -y @21st-dev/magic@latest API_KEY="..." fonctionne toujours : depuis la v0.2.0, c'est un petit proxy stdio qui transmet chaque message MCP au serveur 21st MCP. Les entrées mcp.json existantes qui référencent @21st-dev/magic continuent de fonctionner — mais elles communiquent désormais avec le même serveur que la 21st CLI, avec les outils disponibles pour le compte authentifié.

La clé API est acceptée sous toutes les formes historiques : API_KEY="..." positionnel, --API_KEY=..., /API_KEY:..., -API_KEY ..., ou les variables d'environnement TWENTY_FIRST_API_KEY / API_KEY_21ST.

Accès IA

L'accès aux composants Builder n'active pas l'IA 21st hébergée. Le serveur liste generate et iterate_generation uniquement lorsque l'accès IA est activé. Vérifiez get_usage.aiGenerationEnabled ; cela indique l'accès, pas le solde de crédit IA restant. Avec l'IA désactivée, utilisez search et get_component, puis adaptez le code avec votre propre agent de codage. Les brouillons existants restent lisibles.

Un appel de génération en cache ou hérité peut renvoyer ai_subscription_required. Ne réessayez pas tant que l'IA n'est pas activée. Actualisez la liste des outils du client ou reconnectez-vous après l'activation de l'IA. Le proxy transmet la découverte au serveur, donc les versions existantes du proxy reçoivent ce comportement sans mise à jour npm.

server.json reflète la liste officielle du registre dev.21st/mcp. La version du registre est indépendante de la version de ce paquet de compatibilité.

Anciens noms d'outils → nouveaux noms d'outils

Le 21st MCP accepte toujours les anciens noms d'outils Magic et les traduit, donc les agents qui se souviennent des anciens noms continuent de fonctionner. Privilégiez les nouveaux noms :

Ancien outil Magic	Outil 21st MCP
21st_magic_component_builder	generate
21st_magic_component_inspiration	get_inspiration
21st_magic_component_refiner	generate (nouvelle génération à partir de l'invite de raffinement)
logo_search	search_logo (une requête par appel)

Le serveur actuel expose bien plus que les quatre anciens outils : recherche de catalogue parmi les composants/thèmes/modèles, récupération de code payant, favoris, bibliothèques d'équipe, génération d'UI avec variantes, gestion de profil, et plus encore. Connectez-vous et appelez tools/list pour voir les outils disponibles pour votre compte.

Installer comme plugin

Ce dépôt est également empaqueté comme un plugin d'agent (serveur MCP + une compétence UI). Vous n'avez pas besoin d'attendre un magasin — ce dépôt EST un marché, ajoutez-le directement :

# 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

Définissez votre clé API dans la variable API_KEY_21ST (clé gratuite sur 21st.dev/mcp).

Listes des magasins :

• Cursor / Grok Bot — installez « 21st » depuis le Cursor Marketplace, puis définissez votre API_KEY_21ST sous Plugins → Configure. Obtenez une clé sur 21st.dev/mcp.
• Grok Build — grok plugin install 21st --trust (depuis le marché xAI officiel), puis exportez API_KEY_21ST.
• Claude Code — le dépôt contient un manifeste .claude-plugin/ : /plugin install depuis n'importe quel marché qui liste ce dépôt, ou chargez-le localement avec claude --plugin-dir . et exportez API_KEY_21ST.

La configuration du plugin attend la clé API dans la variable API_KEY_21ST dans chaque client.

Liens

• Configuration du 21st MCP et clés API : https://21st.dev/mcp
• 21st CLI sur npm : https://www.npmjs.com/package/@21st-dev/cli
• 21st.dev — découvrez, publiez et générez des composants UI : https://21st.dev

FAQ

Pourquoi mon ancien Magic MCP a-t-il cessé de fonctionner ? Le backend Magic (magic.21st.dev) a été remplacé par le 21st MCP unifié, et toutes les anciennes clés API ont été réinitialisées pour des raisons de sécurité. Mettez à jour avec une nouvelle clé depuis 21st.dev/mcp — votre configuration @21st-dev/magic existante fonctionnera alors à nouveau via ce proxy de compatibilité, bien que nous recommandions de passer à npx @21st-dev/cli@latest init.

Est-ce que /ui existe toujours ? Utilisez le langage naturel : demandez à votre agent de rechercher des composants sur 21st (search), ou utilisez la génération d'UI hébergée (generate) lorsque l'IA est activée. Les anciennes phrases de déclenchement /ui, /21 étaient une convention des descriptions des anciens outils, pas du protocole.