Magic UI MCP MCP — Anwendungsfälle, Installieren & Live-Demo

Warum nutzen

Hauptfunktionen

Drei Tools über die Live-Magic-UI-Registrierung
Suche nach Komponenten in natürlicher Sprache (Art, Abfrage, Paginierung)
Gibt Installationsbefehle und vollständige Nutzungsausschnitte zurück
Kein statisches Bundle – liest immer die aktuelle Registrierung
Funktioniert auf allen wichtigen MCP-Clients

Live-Demo

In der Praxis

magic-ui-mcp.replay ▶ bereit

0/0

Installieren

Wählen Sie Ihren 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"
      ]
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

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

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

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

VS Code → Cline → MCP Servers → Edit

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

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.continue/config.json

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

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json

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

In context_servers hinzufügen. Zed lädt beim Speichern neu.

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

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: Magic UI MCP

Fügen Sie einer Next.js-Landingpage einen Abschnitt mit animierten Helden hinzu

👤 Frontend-Entwickler und Designer erstellen Marketingseiten ⏱ ~15 min beginner

Wann einsetzen: Sie benötigen eine ausgefeilte Heldenanimation und möchten nicht selbst Dokumente durchsuchen.

Voraussetzungen

Next.js oder React-Projekt — npx create-next-app@latest
Rückenwind + Schatten/UI — Magic UI baut darauf auf; installieren, falls fehlend

Ablauf

Fragen Sie natürlich danach

Fügen Sie in meinem Heldenbereich eine Unschärfe-Einblendanimation für H1 und CTA hinzu.✓ Kopiert

→ Der Agent ruft searchRegistryItems für „Blur Fade“ auf und gibt die Komponente zurück
Installieren + verkabeln

Installieren Sie die Komponente und fügen Sie sie in app/page.tsx ein, wobei Sie den aktuellen Helden ersetzen.✓ Kopiert

→ Der Installationsbefehl wird ausgeführt. Importe hinzugefügt; Held aktualisiert
Passen Sie das Timing an

Langsamerer Eingang – 600 ms Verzögerung zwischen H1 und CTA.✓ Kopiert

→ Requisiten wurden inline aktualisiert

Ergebnis: Eine schiffstaugliche Heldenanimation, ohne den Editor zu verlassen.

Fallstricke

Mischen von Magic UI mit einem Nicht-Tailwind-Setup — Die meisten Komponenten gehen von Tailwind-Klassen aus; Portieren Sie nur dann auf CSS-Module, wenn Sie für diese Arbeit bereit sind

Kombinieren mit: mcp-echarts

Durchsuchen Sie alle Magic UI-Komponenten nach Kategorie

👤 Designer erkunden die Bibliothek ⏱ ~10 min beginner

Wann einsetzen: Sie befinden sich noch am Anfang der Entwurfsphase und möchten prüfen, was verfügbar ist.

Ablauf

Auflistung nach Art

Listen Sie alle Magic UI-Komponenten der Art „Animation“ auf – maximal 30.✓ Kopiert

→ listRegistryItems gibt Namen + Titel zurück
Erweitern Sie die interessanten

Zeigen Sie mir die Details für Marquee, Aurora-Text und Shine-Rand.✓ Kopiert

→ Alle Details inkl. Installation + Nutzung pro Komponente

Ergebnis: Eine kurze Liste der Komponenten, die es wert sind, ausprobiert zu werden, finden Sie auf Ihrer nächsten Seite.

Ersetzen Sie eine statische Logoreihe durch eine Reihe von Logos

👤 Marketing-/Landingpage-Inhaber ⏱ ~10 min beginner

Wann einsetzen: Ihre Zeile „Vertrauenswürdig von“ sieht veraltet aus – ein Laufrahmen sorgt für Bewegung.

Ablauf

Finde das Festzelt

Machen Sie die Zeile „Vertrauenswürdig von“ zu einer Logo-Markise.✓ Kopiert

→ Der Agent wählt die Marquee-Komponente aus und passt sie an
Beim Schweben pausieren

Halten Sie die Markierung beim Schweben an, um die Zugänglichkeit zu gewährleisten.✓ Kopiert

→ Requisiten-/Klassen-Optimierung; bewahrt bewegungsreduzierte Benutzer

Ergebnis: Festzeltreihe, die modern aussieht und Bewegungsvorlieben berücksichtigt.

Fallstricke

Ignoriert Preferred-Reduced-Motion — Magic UI-Komponenten berücksichtigen dies normalerweise. Überschreiben Sie nicht, es sei denn, Sie kennen die Benutzer

Kombinieren mit: motion-dev-animations-skill

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

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

Magic UI für vorgefertigte Komponenten, motion.dev für benutzerdefinierte Animationen

Verwenden Sie das Unschärfe-Fade von Magic UI für den Helden und anschließend Motion.dev für eine benutzerdefinierte Scroll-Linked-Parallaxe unten.✓ Kopiert

magic-ui-mcp + figma

Nehmen Sie ein Figma-Design und greifen Sie nach der nächstgelegenen Magic UI-Komponente

Dieser Figma-Kartenabschnitt sieht aus wie das Bento-Gitter von Magic UI. Installieren Sie es und geben Sie den Text ein.✓ Kopiert

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

Figma-zu-Code-Fluss + Verbesserungen der Magic-Benutzeroberfläche

Konvertieren Sie Figma in React; Wo es sinnvoll ist, verwenden Sie Magic UI-Komponenten anstelle von Scratch-Komponenten.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

Werkzeug	Eingaben	Wann aufrufen	Kosten
listRegistryItems	kind?, query?, limit?, offset?	Durchsuchen oder paginieren Sie verfügbare Komponenten	1 registry fetch
searchRegistryItems	query + pagination	Suche nach Komponenten in natürlicher Sprache	1 registry fetch
getRegistryItem	id/name	Sehen Sie sich vor der Installation genau an, was Sie erhalten	1 registry fetch

Kosten & Limits

Was der Betrieb kostet

API-Kontingent: Die Registrierung ist ein öffentlicher Abruf – bei normaler Verwendung gibt es keine Probleme mit der Rate
Tokens pro Aufruf: Kleine Metadaten pro Aufruf
Kosten in €: Frei
Tipp: Verwenden Sie listRegistryItems mit Art-Filter. Rufen Sie nicht jedes Element ab, nur um es zu durchsuchen.

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: Keine Anmeldeinformationen

Datenabfluss: Schreibgeschützte Abrufe in die Magic UI-Registrierung. Nirgends wird geschrieben.

Jede Komponente, die Sie installieren, zieht Code in Ihr Projekt – lesen Sie die generierte Datei einmal, bevor Sie sie festschreiben, genau wie jede Abhängigkeit.

Fehlerbehebung

Häufige Fehler und Lösungen

Das Tool gibt ein leeres Array zurück

Möglicherweise ist die Registrierung in Ihrem Netzwerk aufgrund der Erreichbarkeit blockiert. Versuchen Sie es erneut und bestätigen Sie, dass DNS für magicui.design aufgelöst wird.

Prüfen: curl -I https://magicui.design/r/index.json

Die Komponente lässt sich installieren, sieht aber ungestylt aus

Tailwind-Konfiguration oder CSS-Variablen fehlen – folgen Sie der einmaligen Einrichtung von Magic UI (globals.css + tailwind.config.ts).

Prüfen: Check tailwind.config.ts for magicui plugin

Animation stottert

Wahrscheinlich eine Re-Rendering-Kaskade. Übergeordnete Komponenten auswendig lernen; Bestätigen Sie, dass es keinen Layout-Thrash gibt.

Prüfen: Chrome DevTools Performance → Frames

Alternativen

Magic UI MCP vs. andere

Alternative	Wann stattdessen	Kompromiss
motion-dev-animations-skill	Sie möchten eine benutzerdefinierte Bewegungslogik und keine Komponentenbibliothek	Mehr Arbeit; mehr Kontrolle
figma	Sie haben bestehende Designs in Figma zum Portieren	Andere Richtung: Design → Code, nicht bibliotheksorientiert
claude-code-design-skills	Sie führen Figma-to-Code durch, keine Bibliotheksübernahme	Deckt einen anderen Teil der Pipeline ab

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen