21st.dev Magic

offiziell

Erstelle maßgeschneiderte UI-Komponenten, inspiriert von den besten Design-Ingenieuren von 21st.dev.

GitHub

5.6k

Was kann man mit 21st Dev Magic MCP machen?

21st.dev-Katalog durchsuchen — finden Sie Komponenten, Themes oder Vorlagen, indem Sie mit dem search-Tool beschreiben, was Sie benötigen.
UI-Komponenten aus einer Eingabeaufforderung generieren — fordern Sie eine React-Komponente an, die einer Beschreibung entspricht, und erhalten Sie sofort einsatzbereiten Code über generate.
Komponenten-Inspiration erhalten — rufen Sie kuratierte Komponentenbeispiele für einen bestimmten Anwendungsfall mit get_inspiration ab.
Firmenlogos nachschlagen — finden Sie SVG-Logos nach Firmennamen mit search_logo (eine Abfrage pro Aufruf).
Bezahlten Code abrufen — greifen Sie auf Premium-Komponenten zu, die Sie über die Plattform erworben haben.

Dokumentation

Magic MCP → 21st MCP

Magic MCP ist jetzt der 21st MCP. Der Magic MCP-Server (@21st-dev/magic) wurde durch den einheitlichen 21st MCP ersetzt, der über die 21st CLI installiert wird — Einrichtung unter 21st.dev/mcp. Dieses Paket bleibt als schlanker Kompatibilitäts-Proxy veröffentlicht, damit alte Konfigurationen weiterhin funktionieren.

Den 21st MCP installieren (empfohlen)

npx @21st-dev/cli@latest init --client cursor   # or: claude | vscode | windsurf | codex

Oder füge ihn manuell hinzu — es ist ein einfacher HTTP-MCP-Server:

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": { "x-api-key": "YOUR_21ST_API_KEY" }
    }
  }
}

Einen API-Schlüssel erhältst du unter 21st.dev/mcp.

Alte Magic-API-Schlüssel wurden zurückgesetzt. Schlüssel, die von der alten Magic-Konsole ausgestellt wurden, funktionieren nirgendwo mehr. Erstelle einen neuen Schlüssel unter 21st.dev/mcp.

Was dieses Paket jetzt macht (v0.2.0+)

npx -y @21st-dev/magic@latest API_KEY="..." funktioniert weiterhin: Seit v0.2.0 ist es ein kleiner Stdio-Proxy, der jede MCP-Nachricht an den 21st MCP-Server weiterleitet. Bestehende mcp.json-Einträge, die auf @21st-dev/magic verweisen, funktionieren weiter — sie kommunizieren jetzt jedoch mit demselben Server wie die 21st CLI, mit dem vollständigen aktuellen Toolset.

Der API-Schlüssel wird in allen historischen Formen akzeptiert: positionale API_KEY="...", --API_KEY=..., /API_KEY:..., -API_KEY ... oder die Umgebungsvariablen TWENTY_FIRST_API_KEY / API_KEY_21ST.

Alte Tool-Namen → neue Tool-Namen

Der 21st MCP akzeptiert weiterhin die alten Magic-Tool-Namen und übersetzt sie, sodass Agenten, die sich die alten Namen merken, weiterhin funktionieren. Bevorzuge die neuen Namen:

Altes Magic-Tool	21st MCP-Tool
`21st_magic_component_builder`	`generate`
`21st_magic_component_inspiration`	`get_inspiration`
`21st_magic_component_refiner`	`generate` (neue Generation aus dem Verfeinerungs-Prompt)
`logo_search`	`search_logo` (eine Abfrage pro Aufruf)

Der aktuelle Server bietet viel mehr als die alten vier Tools: Katalogsuche über Komponenten/Themes/Vorlagen, Abruf von kostenpflichtigem Code, Lesezeichen, Team-Bibliotheken, UI-Generierung mit Varianten, Profilverwaltung und mehr. Verbinde dich und rufe tools/list auf, um das vollständige Set zu sehen.

FAQ

Warum hat mein alter Magic MCP aufgehört zu funktionieren? Das Magic-Backend (magic.21st.dev) wurde durch den einheitlichen 21st MCP abgelöst, und alle alten API-Schlüssel wurden aus Sicherheitsgründen zurückgesetzt. Aktualisiere auf einen neuen Schlüssel von 21st.dev/mcp — deine bestehende @21st-dev/magic-Konfiguration funktioniert dann über diesen Kompatibilitäts-Proxy wieder, obwohl wir den Wechsel zu npx @21st-dev/cli@latest init empfehlen.

Ist /ui noch relevant? Verwende natürliche Sprache: Bitte deinen Agenten, 21st nach Komponenten zu durchsuchen (search) oder neue UI zu generieren (generate). Die alten /ui, /21-Triggerphrasen waren eine Konvention der Beschreibungen der alten Tools, nicht des Protokolls.