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

> Magic MCP verbindet Agenten mit dem Komponenten-Marktplatz von 21st.dev — echte Designer-UI-Komponenten statt AI-generiertem Einheitsbrei, direkt ins Projekt geschrieben.

- URL: https://thevibe-coding.de/mcp/magic-mcp-21st
- Typ: mcp | Veroeffentlicht: 2026-07-18 | Aktualisiert: 2026-07-18
- Autor: Vita Legne | Site: VIBE CODING — thevibe-coding.de

---

**Magic MCP** ist der [MCP](/glossar/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](/guides/ai-design-ohne-slop-tools-stacks-2026) 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`):

```json
{
  "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](/mcp/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](/mcp/refero-mcp): erst Referenzen studieren, dann Komponenten setzen.

## FAQ

### Was unterscheidet Magic MCP von reiner AI-Komponenten-Generierung?

Magic MCP greift auf den Marktplatz von 21st.dev zurück, auf dem Designer echte, produktionserprobte Komponenten veröffentlichen. Der Agent nutzt diese als Vorlage statt frei zu halluzinieren — das Ergebnis sieht designt aus, nicht generiert, und landet als TypeScript-Code direkt im Projekt.

### Was kostet Magic MCP von 21st.dev?

Während der Beta-Phase sind die Features laut Repository kostenlos, mit monatlichem Generierungs-Limit und Upgrade-Option. Der 21st.dev-Builder liegt bei 8 US-Dollar pro Monat (Stand Juli 2026). Für den MCP-Zugriff brauchst du einen API-Key von 21st.dev.

### Mit welchen Editoren funktioniert Magic MCP?

Mit allen MCP-fähigen Clients — dokumentiert sind unter anderem Cursor, Windsurf, VS Code mit Cline und Claude Code. Die Installation läuft wahlweise über das CLI von 21st.dev oder manuell per mcpServers-Eintrag in der jeweiligen Konfigurationsdatei.

## Quellen

- [21st-dev/magic-mcp](https://github.com/21st-dev/magic-mcp) — GitHub / 21st.dev
- [21st.dev — Discover, share and craft UI components](https://21st.dev) — 21st.dev