21st.dev Magic

Magic MCP → 21st MCP

Magic MCP ist jetzt der 21st MCP. Der Magic MCP-Server (@21st-dev/magic) wurde durch den vereinheitlichten 21st MCP ersetzt, der über die 21st CLI installiert wird – Einrichtung unter 21st.dev/mcp. Dieses Paket bleibt als dünner 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ügen Sie ihn manuell hinzu – es handelt sich um einen einfachen HTTP-MCP-Server:

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

Holen Sie sich einen API-Schlüssel 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. Erzeugen Sie einen neuen Schlüssel unter 21st.dev/mcp.

Was dieses Paket jetzt tut (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 weiterhin – sie sprechen jetzt jedoch mit demselben Server wie die 21st CLI, mit den Tools, die für das authentifizierte Konto verfügbar sind.

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

KI-Zugriff

Der Builder-Komponentenzugriff aktiviert nicht das gehostete 21st AI. Der Server listet generate und iterate_generation nur auf, wenn der KI-Zugriff aktiviert ist. Prüfen Sie get_usage.aiGenerationEnabled; dies meldet den Zugriff, nicht das verbleibende KI-Guthaben. Bei deaktivierter KI verwenden Sie search und get_component und passen Sie den Code mit Ihrem eigenen Coding-Agenten an. Bestehende Entwürfe bleiben lesbar.

Ein zwischengespeicherter oder veralteter Generierungsaufruf kann ai_subscription_required zurückgeben. Wiederholen Sie den Vorgang erst, wenn KI aktiviert ist. Aktualisieren Sie die Client-Tool-Liste oder verbinden Sie sich nach dem Aktivieren der KI neu. Der Proxy leitet die Erkennung an den Server weiter, sodass bestehende Proxy- Versionen dieses Verhalten ohne npm-Update erhalten.

server.json spiegelt die offizielle dev.21st/mcp-Registry-Auflistung wider. Die Registry- Version ist unabhängig von der Version dieses Kompatibilitätspakets.

Alte Toolnamen → neue Toolnamen

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

Legacy-Magic-Tool	21st MCP-Tool
21st_magic_component_builder	generate
21st_magic_component_inspiration	get_inspiration
21st_magic_component_refiner	generate (neue Generierung aus dem Verfeinerungsprompt)
logo_search	search_logo (eine Abfrage pro Aufruf)

Der aktuelle Server bietet viel mehr als die alten vier Tools: Katalogsuche über Komponenten/Themes/Vorlagen, kostenpflichtigen Codeabruf, Lesezeichen, Team-Bibliotheken, UI-Generierung mit Varianten, Profilverwaltung und mehr. Verbinden Sie sich und rufen Sie tools/list auf, um die für Ihr Konto verfügbaren Tools zu sehen.

Als Plugin installieren

Dieses Repository ist auch als Agenten-Plugin verpackt (MCP-Server + eine UI-Fähigkeit). Sie müssen nicht auf einen Store warten – dieses Repository IST ein Marktplatz, fügen Sie es direkt hinzu:

# Claude Code
claude plugin marketplace add 21st-dev/magic-mcp   # then: /plugin install 21st

# Grok Build
grok plugin marketplace add 21st-dev/magic-mcp && grok plugin install 21st --trust

# Codex CLI
codex plugin marketplace add 21st-dev/magic-mcp    # then install "21st" from /plugins

Setzen Sie Ihren API-Schlüssel in der Variable API_KEY_21ST (kostenloser Schlüssel unter 21st.dev/mcp).

Store-Auflistungen:

• Cursor / Grok Bot – installieren Sie „21st" aus dem Cursor Marketplace, setzen Sie dann Ihren API_KEY_21ST unter Plugins → Konfigurieren. Holen Sie sich einen Schlüssel unter 21st.dev/mcp.
• Grok Build – grok plugin install 21st --trust (aus dem offiziellen xAI-Marktplatz), exportieren Sie dann API_KEY_21ST.
• Claude Code – das Repository enthält ein .claude-plugin/-Manifest: /plugin install es aus einem beliebigen Marktplatz, der dieses Repository auflistet, oder laden Sie es lokal mit claude --plugin-dir . und exportieren Sie API_KEY_21ST.

Die Plugin-Konfiguration erwartet den API-Schlüssel in der Variable API_KEY_21ST in jedem Client.

Links

• 21st MCP-Einrichtung & API-Schlüssel: https://21st.dev/mcp
• 21st CLI auf npm: https://www.npmjs.com/package/@21st-dev/cli
• 21st.dev – UI-Komponenten entdecken, veröffentlichen und generieren: https://21st.dev

FAQ

Warum funktioniert mein alter Magic MCP nicht mehr? Das Magic-Backend (magic.21st.dev) wurde durch den vereinheitlichten 21st MCP ersetzt, und alle alten API-Schlüssel wurden aus Sicherheitsgründen zurückgesetzt. Aktualisieren Sie auf einen neuen Schlüssel von 21st.dev/mcp – Ihre bestehende @21st-dev/magic-Konfiguration funktioniert dann wieder über diesen Kompatibilitäts-Proxy, obwohl wir empfehlen, auf npx @21st-dev/cli@latest init umzusteigen.

Ist /ui noch ein Ding? Verwenden Sie natürliche Sprache: Bitten Sie Ihren Agenten, bei 21st nach Komponenten zu suchen (search), oder verwenden Sie die gehostete UI-Generierung (generate), wenn KI aktiviert ist. Die alten /ui, /21-Auslösephrasen waren eine Konvention der Beschreibungen der Legacy-Tools, nicht des Protokolls.