21st.dev Magic (21st MCP)

21st.dev Magic, le serveur MCP de 21st.dev, s’appelle désormais 21st MCP. Il relie votre assistant de code au catalogue de 21st.dev, plus de 10 000 composants React et Tailwind : vous recherchez un composant, un thème ou un modèle, vous récupérez son code et, avec l’IA de 21st, vous générez de nouvelles interfaces sans quitter votre éditeur.

Fonctionnalités principales

• Rechercher des composants, thèmes et modèles dans le catalogue, avec search
• Récupérer le code d’un composant, avec get_component
• Générer une interface en plusieurs variantes, puis l’affiner, avec generate et iterate_generation
• Trouver de l’inspiration et des logos, avec get_inspiration et search_logo
• Gérer vos favoris, les bibliothèques de votre équipe et votre profil

Les outils proposés dépendent de votre compte : ceux de génération n’apparaissent que si l’accès à l’IA de 21st est activé.

Installation

Le plus simple est le CLI officiel, en précisant votre client : claude, cursor, vscode, windsurf ou codex. Par exemple, pour Claude :

npx @21st-dev/cli@latest init --client claude

Vous pouvez aussi l’ajouter à la main : c’est un serveur MCP distant, à l’adresse https://21st.dev/api/mcp. La méthode documentée par 21st passe une clé d’API dans l’en-tête x-api-key :

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

La clé se crée sur 21st.dev/mcp. Le serveur annonce aussi une connexion par OAuth, utilisable par les clients MCP qui la prennent en charge. Dans Claude Code, le dépôt s’installe aussi comme plugin : claude plugin marketplace add 21st-dev/magic-mcp, puis /plugin install 21st, avec la clé dans la variable API_KEY_21ST.

Bon à savoir

• Les anciennes clés Magic ont été réinitialisées : elles renvoient désormais l’erreur « Not authenticated ». Créez-en une nouvelle sur 21st.dev/mcp.
• L’ancien paquet @21st-dev/magic reste publié comme simple relais vers 21st MCP : les anciennes configurations fonctionnent encore, mais 21st recommande de passer au CLI.
• Les commandes /ui et /21 des anciens tutoriels ne sont plus nécessaires : demandez simplement à votre agent, en langage naturel.
• Côté tarifs, selon 21st, la recherche, la publication et la gestion de vos composants sont gratuites ; les installations de composants sont plafonnées à deux par jour et l’IA de 21st fonctionne avec des crédits. Les offres payantes sont détaillées sur le site.

Sources : dépôt officiel et page MCP de 21st.dev, consultés le 9 octobre 2026.