21st.dev Magic

officiel

Créez des composants d'interface utilisateur soignés, inspirés des meilleurs ingénieurs en design de 21st.dev.

GitHub

5.6k

Que pouvez-vous faire avec 21st Dev Magic MCP ?

Recherchez dans le catalogue 21st.dev — trouvez des composants, thèmes ou modèles en décrivant ce dont vous avez besoin avec l'outil search.
Générez des composants d'interface à partir d'une invite — demandez un composant React correspondant à une description et recevez du code prêt à l'emploi via generate.
Trouvez l'inspiration pour des composants — récupérez des exemples de composants sélectionnés pour un cas d'utilisation donné avec get_inspiration.
Recherchez des logos d'entreprise — trouvez des logos SVG par nom d'entreprise en utilisant search_logo (une requête par appel).
Récupérez du code payant — accédez aux composants premium que vous avez achetés via la plateforme.

Documentation

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 package reste publié en tant que 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 — il s'agit d'un simple serveur MCP HTTP :

{
  "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 package désormais (v0.2.0+)

npx -y @21st-dev/magic@latest API_KEY="..." fonctionne toujours : depuis la v0.2.0, il s'agit d'un petit proxy stdio qui transfère chaque message MCP vers le 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 l'ensemble complet des outils actuels.

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.

Anciens noms d'outils → nouveaux noms d'outils

Le 21st MCP accepte toujours les noms d'outils Magic hérités et les traduit, afin que les agents qui se souviennent des anciens noms continuent de fonctionner. Préférez les nouveaux noms :

Outil Magic hérité	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 dans le 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 l'ensemble complet.

Liens

Configuration et clés API 21st MCP : 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 de générer une nouvelle UI (generate). Les anciennes phrases déclencheuses /ui, /21 étaient une convention des descriptions des outils hérités, pas du protocole.