Magic UI MCP MCP — Cas d'usage, Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

Trois outils sur le registre Magic UI en direct
Recherche de composants en langage naturel (genre, requête, pagination)
Renvoie les commandes d'installation et les extraits d'utilisation complets
Pas de bundle statique - lit toujours le registre actuel
Fonctionne sur tous les principaux clients MCP

Démo en direct

Aperçu en pratique

magic-ui-mcp.replay ▶ prêt

0/0

Installer

Choisissez votre client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "magic-ui-mcp",
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  ]
}

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json

{
  "context_servers": {
    "magic-ui-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@magicuidesign/mcp@latest"
        ]
      }
    }
  }
}

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

claude mcp add magic-ui-mcp -- npx -y @magicuidesign/mcp@latest

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : Magic UI MCP

Ajouter une section de héros animé à une page de destination Next.js

👤 Les développeurs et concepteurs frontend créent des pages marketing ⏱ ~15 min beginner

Quand l'utiliser : Vous avez besoin d'une animation de héros soignée et vous ne souhaitez pas parcourir les documents vous-même.

Prérequis

Projet Next.js ou React — npx créer-next-app@latest
Vent arrière + shadcn/ui — Magic UI s'appuie sur ceux-ci ; installer s'il manque

Déroulement

Demandez-le naturellement

Ajoutez une animation avec fondu enchaîné pour le H1 et le CTA dans ma section héros.✓ Copié

→ L'agent appelle searchRegistryItems pour le « fondu de flou » et renvoie le composant
Installer + câbler

Installez le composant et collez-le dans app/page.tsx en remplaçant le héros actuel.✓ Copié

→ La commande d'installation s'exécute ; importations ajoutées; héros mis à jour
Ajuster le timing

Entrée plus lente – délai de 600 ms entre H1 et CTA.✓ Copié

→ Accessoires mis à jour en ligne

Résultat : Une animation de héros digne d'un navire sans quitter l'éditeur.

Pièges

Mélanger Magic UI avec une configuration non-Tailwind — La plupart des composants assument les classes Tailwind ; portage vers les modules CSS uniquement si vous êtes prêt pour ce travail

Combiner avec : mcp-echarts

Parcourez tous les composants Magic UI par catégorie

👤 Des designers explorant la bibliothèque ⏱ ~10 min beginner

Quand l'utiliser : Vous en êtes aux premiers stades de la conception et souhaitez analyser ce qui est disponible.

Déroulement

Liste par genre

Répertoriez tous les composants Magic UI de type « animation » – limite 30.✓ Copié

→ listRegistryItems renvoie les noms + titres
Développez les plus intéressants

Montrez-moi les détails du chapiteau, du texte aurore et de la bordure brillante.✓ Copié

→ Tous les détails, y compris. installation + utilisation par composant

Résultat : Une courte liste de composants à essayer dans votre page suivante.

Remplacer une ligne de logo statique par un chapiteau de logos

👤 Propriétaires de marketing/pages de destination ⏱ ~10 min beginner

Quand l'utiliser : Votre ligne « Approuvé par » semble datée : un rectangle de défilement ajoute du mouvement.

Déroulement

Trouver le chapiteau

Faites de la ligne « Approuvé par » un chapiteau de logos.✓ Copié

→ L'agent sélectionne le composant de sélection et l'adapte
Pause au survol

Mettez le chapiteau en pause au survol pour plus d'accessibilité.✓ Copié

→ ajustement des accessoires/classes ; préserve les utilisateurs à mouvement réduit

Résultat : Rangée de chapiteau qui semble moderne et respecte les préférences de mouvement.

Pièges

Ignorer les préférences de mouvement réduit — Les composants de Magic UI l’honorent généralement ; ne remplacez pas sauf si vous connaissez les utilisateurs

Combiner avec : motion-dev-animations-skill

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

magic-ui-mcp + motion-dev-animations-skill

Magic UI pour les composants prédéfinis, motion.dev pour les animations personnalisées

Utilisez le flou de fondu de Magic UI pour le héros, puis motion.dev pour une parallaxe personnalisée liée au défilement ci-dessous.✓ Copié

magic-ui-mcp + figma

Prenez un design Figma et recherchez le composant Magic UI le plus proche

Cette section de carte Figma ressemble à la grille bento de Magic UI. Installez-le et remplissez le texte.✓ Copié

magic-ui-mcp + claude-code-design-skills

Flux Figma vers code + améliorations de Magic UI

Convertissez le Figma en React ; là où cela a du sens, utilisez des composants Magic UI au lieu de composants de travail.✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler	Coût
listRegistryItems	kind?, query?, limit?, offset?	Parcourir ou paginer les composants disponibles	1 registry fetch
searchRegistryItems	query + pagination	Recherche de composants en langage naturel	1 registry fetch
getRegistryItem	id/name	Avant d'installer, pour voir exactement ce que vous obtiendrez	1 registry fetch

Coût et limites

Coût d'exécution

Quota d'API: Le registre est une récupération publique - aucun problème de taux en utilisation normale
Tokens par appel: Petites métadonnées par appel
Monétaire: Gratuite
Astuce: Utilisez listRegistryItems avec un filtre de type ; ne récupérez pas tous les éléments juste pour parcourir.

Sécurité

Permissions, secrets, portée

Stockage des identifiants : Aucune information d'identification

Sortie de données : Récupération en lecture seule dans le registre Magic UI. Aucun écrit nulle part.

Tout composant que vous installez extrait le code dans votre projet : lisez le fichier généré une fois avant de le valider, comme pour toute dépendance.

Dépannage

Erreurs courantes et correctifs

L'outil renvoie un tableau vide

L'accessibilité du registre peut être bloquée sur votre réseau ; réessayez et confirmez que DNS est résolu par magicui.design.

Vérifier : curl -I https://magicui.design/r/index.json

Le composant s'installe mais ne semble pas stylé

Configuration Tailwind ou variables CSS manquantes : suivez la configuration unique de Magic UI (globals.css + tailwind.config.ts).

Vérifier : Check tailwind.config.ts for magicui plugin

L'animation bégaie

Probablement une cascade de re-rendu. Mémoriser les composants parents ; confirmer qu'il n'y a pas de problème de mise en page.

Vérifier : Chrome DevTools Performance → Frames

Alternatives

Magic UI MCP vs autres

Alternative	Quand l'utiliser	Compromis
motion-dev-animations-skill	Vous voulez une logique de mouvement personnalisée, pas une bibliothèque de composants	Plus de travail ; plus de contrôle
figma	Vous avez des conceptions existantes dans Figma à porter	Direction différente : conception → code, pas bibliothèque d'abord
claude-code-design-skills	Vous faites du Figma-to-code, pas de l'adoption de bibliothèques	Couvre une partie différente du pipeline

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills