Magic MCP : service MCP pour la génération de composants d'interface utilisateur modernes

Introduction générale

Magie MCP 21st.dev est un outil piloté par l'IA développé par l'équipe de 21st.dev et conçu pour les développeurs frontaux. Il génère à la volée des composants d'interface utilisateur modernes à partir de descriptions en langage naturel et s'intègre dans des environnements de développement tels que Cursor, WindSurf et VS Code (plugin Cline). Les utilisateurs saisissent des exigences simples, telles que "Créer une barre de navigation moderne", et Magic MCP génère un composant d'interface utilisateur moderne basé sur la description en langage naturel. Réagir avec les styles CSS Tailwind et le support TypeScript. L'outil est entièrement open source, hébergé sur GitHub, et son utilisation est gratuite pour les développeurs. Il offre des aperçus en direct et une riche bibliothèque de composants pour le prototypage rapide ou le développement en équipe.

Liste des fonctions

• composant de génération de langage naturelLe projet de loi sur l'emploi et les affaires sociales : Décrire les exigences en texte et générer automatiquement le code du composant React.
• Prise en charge de plusieurs IDEIntégration transparente avec Cursor, WindSurf et VS Code (Cline Beta).
• Bibliothèque de composants modernes: offre un grand nombre de composants personnalisables inspirés de 21st.dev.
• Aperçu en temps réelLes effets de la génération de composants sont instantanément visibles, ce qui facilite le débogage.
• Support TypeScriptLes codes générés sont sûrs et réduisent le nombre d'erreurs.
• Intégration SVGLLes icônes et logos professionnels sont intégrés directement dans le composant.
• Amélioration des composants (à venir)Les composants : ajouter des fonctions avancées et des animations aux composants existants.

Utiliser l'aide

Processus d'installation

Magic MCP doit être installé dans un IDE supporté, comme le montre l'exemple suivant Curseur Par exemple, d'autres IDE (par ex. WindSurf (ou VS Code + Cline) s'installe de la même manière :

1. Préparation de l'environnement
   Assurez-vous que votre ordinateur est équipé de Node.js (la dernière version LTS est recommandée, par exemple v22) et de npm, qui est la base de l'exécution de Magic MCP.
2. Obtenir la clé API
   Visitez le site web 21st.dev, connectez-vous et allez à la page "API", générez un nouvel TWENTY_FIRST_API_KEY. Vous pouvez l'essayer sans clé, mais les fonctionnalités sont limitées.
3. Installation de Magic MCP
   Ouvrez un terminal et exécutez la commande suivante :

npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{\"TWENTY_FIRST_API_KEY\":\"你的API密钥\"}"

commandant en chef (militaire) 你的API密钥 Remplacer la clé par celle obtenue sur le site officiel.

4. Configuration de l'IDE Cursor
   Ouvrez Settings in Cursor, trouvez l'option Model Context Protocol (MCP) et ajoutez la configuration suivante :

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "cursor"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

Sauvegarder et redémarrer l'IDE.

5. Vérifier l'installation
   Dans la fenêtre de chat du curseur, tapez /uiSi le message "Créer des composants avec Magic MCP" s'affiche, l'installation a réussi.

Configuration WindSurf

existent ~/.codeium/windsurf/mcp_config.json Ajouter :

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "windsurf"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

VS Code + Cline Configuration (Beta)

existent Cline est ajouté à la configuration MCP du

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "cline"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

Comment utiliser les principales fonctionnalités

Générer des composants d'interface utilisateur

• procédure: :
  1. Dans la fenêtre de chat de l'IDE, tapez /uisuivi d'une exigence, telle que /ui 创建一个带搜索功能的导航栏.
  2. Magic MCP génère un code de composant React qui s'affiche directement dans la fenêtre.
  3. Cliquez sur "Insérer le code", le code est automatiquement ajouté au fichier du projet.
• Description détaillée: :
  Le composant utilise les styles CSS Tailwind et TypeScript par défaut, et le code peut être ajusté manuellement. Plus la description de l'entrée est précise, plus le résultat sera pertinent.
• exemple typique: :
  Entrée :/ui 一个蓝色按钮
  Sortie :

  const BlueButton = () => {
  return (
  <button className="bg-blue-500 text-white px-4 py-2 rounded">
  点击我
  </button>
  );
  };
  export default BlueButton;
  

Aperçu en temps réel

• procédure: :
  1. Après avoir généré le composant, l'IDE affiche une fenêtre de prévisualisation montrant l'effet du composant.
  2. Après avoir modifié le code, l'aperçu est automatiquement mis à jour.
• Description détaillée: :
  Si le projet local n'est pas en cours d'exécution, la prévisualisation s'appuie sur le rendu intégré de Magic MCP, qui peut différer légèrement du résultat réel.

Utilisation des icônes SVGL

• procédure: :
  1. importation /logo 品牌名par exemple /logo Twitter.
  2. L'outil renvoie le code de l'icône au format SVG ou JSX.
  3. Copié pour être utilisé dans un composant.
• exemple typique: :
  Entrée :/logo GitHub
  Sortie :

  const GitHubIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24">
  <!-- GitHub SVG 路径 -->
  </svg>
  );
  

Détails du processus d'opération

1. Lancement de projets
   Assurez-vous que le projet front-end a été créé (par exemple, avec Create React App). magic MCP génère du code basé sur la structure du projet.
2. exigence d'entrée
   Utilisez des descriptions en langage naturel dans l'IDE, telles que "une liste de cartes réactives". Des descriptions plus claires permettent d'obtenir des résultats plus précis.
3. Code d'ajustement
   Vérifier le code après sa génération et modifier le style ou la logique pour répondre aux exigences.
4. test opérationnel
   Enregistrez le code et exécutez le projet (par ex. npm start), ce qui confirme l'effet.

mise en garde

• Nombre limité de générations par mois, après avoir dépassé la limite, vous devez passer au plan payant.
• Il est recommandé de diviser les composants complexes en plusieurs générations d'exigences simples.
• Rejoignez la communauté Discord pour poser des questions.

scénario d'application

1. Prototypage rapide
   Lorsque les développeurs ont besoin de montrer des effets d'interface utilisateur, Magic MCP permet de gagner du temps en générant rapidement des composants.
2. Réutilisation du code en équipe
   Les équipes partagent des composants via 21st.dev afin de standardiser le style et d'améliorer l'efficacité.
3. Apprendre les technologies frontales
   Les débutants l'utilisent pour générer du code standard, apprendre au fur et à mesure qu'ils évoluent et se lancer rapidement dans React.

QA

1. Magic MCP est-il gratuit ?
   Oui, il s'agit d'un logiciel libre sur GitHub, gratuit pour les fonctionnalités de base, avec des clés API et des plans payants pour les fonctionnalités avancées.
2. Le code généré est-il disponible dans le commerce ?
   Oui, le code appartient à l'utilisateur et peut être utilisé pour n'importe quel projet.
3. Quels sont les IDE pris en charge ?
   Prend actuellement en charge Cursor, WindSurf et VS Code (Cline Beta), et pourrait être étendu à l'avenir.