Magic MCP von 21st.dev: Designer-Komponenten per Prompt ins Projekt

Magic MCP ist der MCP-Server von 21st.dev, der KI-Agenten mit einem Komponenten-Marktplatz verbindet. Statt UI-Komponenten frei zu generieren, greift der Agent auf echte, von Designern gebaute Komponenten zurück und schreibt sie als TypeScript-Code direkt ins Projekt. Das Open-Source-Repository (21st-dev/magic-mcp) zählt rund 5.500 GitHub-Stars, Stand Juli 2026.

Marktplatz-Komponenten gegen den Design-Slop

Der Kerngedanke von Magic MCP: KI-generierte UIs sehen oft nach Schablone aus — gleiche Gradients, gleiche Cards, gleiche Hero-Sections. 21st.dev setzt dagegen auf einen Marktplatz produktionserprobter Komponenten, die der Agent per natürlicher Sprache abruft („baue eine Pricing-Section mit Toggle"). Die Bausteine im Überblick:

• UI-Generierung per Beschreibung — der Agent wählt passende Marktplatz-Komponenten und passt sie an
• TypeScript-Support — Komponenten landen typisiert im Projekt, kein Copy-Paste aus dem Browser
• SVGL-Integration — Marken-Logos und Assets in korrekter, aktueller Form
• Vorschau — Komponenten vor der Übernahme im Kontext prüfen

In unserem Guide AI-Design ohne Slop läuft 21st.dev deshalb in der Kategorie „echte Designer-Komponenten statt AI-Generierung".

Installation in Claude Code

Zuerst holst du dir einen API-Key auf 21st.dev, dann trägst du den Server in die Projektdatei .mcp.json ein (npm-Paket @21st-dev/magic):

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

Alternativ bietet 21st.dev ein Setup-CLI (npx @21st-dev/cli@latest install <client> --api-key <key>), das die Konfiguration für Cursor, Windsurf, Cline und Co. automatisch schreibt — die aktuelle Client-Liste steht im Repo-README.

Passende und unpassende Einsatzfälle

Magic MCP lohnt sich beim Frontend-Prototyping und überall dort, wo einzelne Komponenten schnell gut aussehen müssen: Landingpage-Sections, Formulare, Navigationen. Weniger geeignet ist der Server, wenn dein Projekt ein striktes eigenes Design-System hat — dann kollidieren Marktplatz-Komponenten mit deinen Tokens, und der Figma MCP mit angeschlossenem UI-Kit ist der sauberere Weg. Für visuelle Recherche vor dem Bauen ergänzt sich Magic MCP gut mit Refero MCP: erst Referenzen studieren, dann Komponenten setzen.