21st-dev Magic MCP Server

Que fait le serveur MCP “21st-dev Magic” ?

Le 21st-dev Magic MCP Server est une plateforme propulsée par l’IA conçue pour aider les développeurs à créer instantanément de superbes composants d’interface utilisateur modernes à l’aide de descriptions en langage naturel. Agissant comme un pont entre les assistants IA et votre environnement de développement, il permet une génération d’UI fluide, des aperçus en temps réel et l’intégration d’actifs de marque professionnels et de logos. Avec la prise en charge d’IDE populaires comme Cursor, Windsurf, VSCode et Cline, il rationalise les workflows frontend en laissant les utilisateurs décrire l’UI souhaitée, et le Magic MCP Server génère et insère directement dans le projet des composants soignés et personnalisables. Son objectif est de renforcer la productivité des développeurs en automatisant les tâches UI répétitives et en intégrant la créativité de l’IA au quotidien du développement.

Liste des modèles de prompt

Aucun modèle de prompt explicite n’est listé dans la documentation du dépôt fourni.

Liste des ressources

Aucune ressource explicite n’est listée dans la documentation du dépôt fourni.

Liste des outils

Aucun outil explicite n’est listé dans la documentation du dépôt ou dans server.py (ou équivalent).

Cas d’usage de ce serveur MCP

• Génération d’UI par IA : créez instantanément des composants d’interface utilisateur modernes en les décrivant en langage naturel, gagnant ainsi un temps considérable sur le code répétitif et le design.
• Amélioration de composants : améliorez des composants UI existants avec des fonctionnalités avancées et des animations (fonctionnalité à venir), facilitant le développement itératif.
• Intégration d’actifs de marque : accédez facilement et intégrez des ressources de marque et des logos professionnels dans votre frontend, pour une cohérence et un rendu professionnel.
• Aperçu en temps réel : visualisez les composants au fur et à mesure de leur création, permettant un prototypage rapide et des boucles de retour efficaces.
• Multi-IDE : utilisez le même workflow de génération UI par IA sur Cursor, Windsurf, VSCode et Cline, assurant une expérience de développement homogène.

Comment l’installer

Windsurf

1. Prérequis : installez Node.js (dernière LTS).
2. Obtenez votre clé API : générez-la depuis 21st.dev Magic Console.
3. Ouvrez le fichier de configuration : éditez ~/.codeium/windsurf/mcp_config.json.
4. Ajoutez le Magic MCP Server :

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Enregistrez et redémarrez Windsurf pour appliquer les modifications.

Sécurisation des clés API : Utilisez les variables d’environnement dans votre configuration :

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Claude

1. Prérequis : installez Node.js (dernière LTS).
2. Obtenez votre clé API : générez-la depuis 21st.dev Magic Console.
3. Ouvrez le fichier de configuration : éditez ~/.claude/mcp_config.json.
4. Ajoutez le Magic MCP Server :

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Enregistrez et redémarrez Claude pour appliquer les modifications.

Sécurisation des clés API :

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cursor

1. Prérequis : installez Node.js (dernière LTS).
2. Obtenez votre clé API : générez-la depuis 21st.dev Magic Console.
3. Ouvrez le fichier de configuration : éditez ~/.cursor/mcp.json.
4. Ajoutez le Magic MCP Server :

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Enregistrez et redémarrez Cursor pour appliquer les modifications.

Sécurisation des clés API :

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cline

1. Prérequis : installez Node.js (dernière LTS).
2. Obtenez votre clé API : générez-la depuis 21st.dev Magic Console.
3. Ouvrez le fichier de configuration : éditez ~/.cline/mcp_config.json.
4. Ajoutez le Magic MCP Server :

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Enregistrez et redémarrez Cline pour appliquer les modifications.

Sécurisation des clés API :

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Comment utiliser ce MCP dans les flows

Utilisation de MCP dans FlowHunt

Pour intégrer des serveurs MCP à votre workflow FlowHunt, commencez par ajouter le composant MCP à votre flow et connectez-le à votre agent IA :

Cliquez sur le composant MCP pour ouvrir le panneau de configuration. Dans la section de configuration système MCP, saisissez les détails de votre serveur MCP en utilisant ce format JSON :

{
  "magic-mcp": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

Une fois configuré, l’agent IA pourra utiliser ce MCP comme outil avec accès à toutes ses fonctions et capacités. N’oubliez pas de remplacer "magic-mcp" par le vrai nom de votre serveur MCP et l’URL par celle de votre propre serveur MCP.

Synthèse

Le support “Roots” n’est pas spécifié dans le dépôt.

Notre avis

Le 21st-dev Magic MCP Server dispose d’une excellente documentation pour l’installation et la configuration sur de multiples plateformes, avec des cas d’usage concrets et une large communauté active. Cependant, l’absence de documentation explicite sur les prompts MCP, les ressources, les outils et les concepts avancés comme Roots et Sampling limite sa transparence pour les utilisateurs avancés et les intégrateurs.

Score MCP

Note : 6/10

Le 21st-dev Magic MCP Server se distingue par sa facilité d’utilisation, son activité et la clarté de sa mise en place, mais perd des points pour le manque de détails techniques avancés et l’absence de primitives MCP explicites dans la documentation publique.