21st-dev Magic MCP Server

Was macht der „21st-dev Magic“ MCP Server?

Der 21st-dev Magic MCP Server ist eine KI-basierte Plattform, die Entwicklern hilft, wunderschöne, moderne UI-Komponenten sofort per natürlicher Sprachbeschreibung zu erstellen. Er fungiert als Brücke zwischen KI-Assistenten und Ihrer Entwicklungsumgebung und ermöglicht nahtlose UI-Generierung, Live-Vorschauen sowie die Integration professioneller Markenassets und Logos. Mit Unterstützung für beliebte IDEs wie Cursor, Windsurf, VSCode und Cline optimiert er Frontend-Workflows, indem Nutzer die gewünschte UI beschreiben und der Magic MCP Server polierte, anpassbare Komponenten direkt ins Projekt einfügt. Ziel ist es, die Entwicklerproduktivität zu steigern, indem sich wiederholende UI-Aufgaben automatisiert und KI-gestützte Kreativität in den Alltag integriert werden.

Liste der Prompts

In der bereitgestellten Repository-Dokumentation sind keine expliziten Prompt-Vorlagen aufgeführt.

Liste der Ressourcen

In der bereitgestellten Repository-Dokumentation sind keine expliziten Ressourcen aufgeführt.

Liste der Tools

In der bereitgestellten Repository-Dokumentation oder in server.py (oder gleichwertig) sind keine expliziten Tools aufgeführt.

Anwendungsfälle dieses MCP Servers

• KI-gestützte UI-Generierung: Erstellen Sie moderne UI-Komponenten sofort durch Beschreibung in natürlicher Sprache und sparen Sie damit viel Zeit beim Boilerplate und Design.
• Komponenten-Verbesserung: Rüsten Sie bestehende UI-Komponenten mit erweiterten Features und Animationen auf (Funktion in Kürze verfügbar) und beschleunigen Sie so die iterative Entwicklung.
• Markenasset-Integration: Greifen Sie einfach auf professionelle Markenassets und Logos zu und integrieren Sie diese in Ihr Frontend, um Designkonsistenz und Professionalität zu wahren.
• Echtzeit-Vorschau: Sehen Sie Komponenten direkt bei der Erstellung und ermöglichen Sie so schnelles Prototyping und Feedback-Schleifen.
• Unterstützung mehrerer IDEs: Verwenden Sie den selben KI-UI-Generierungs-Workflow in Cursor, Windsurf, VSCode und Cline und stellen Sie so konsistente Entwicklungserfahrungen sicher.

Einrichtung

Windsurf

1. Voraussetzung: Node.js (neueste LTS) installieren.
2. API-Schlüssel erhalten: Über 21st.dev Magic Console generieren.
3. Konfigurationsdatei öffnen: ~/.codeium/windsurf/mcp_config.json bearbeiten.
4. Magic MCP Server hinzufügen:

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

5. Speichern und Windsurf neu starten, um die Änderungen zu übernehmen.

Sichere API-Schlüssel: Verwenden Sie Umgebungsvariablen in Ihrer Konfiguration:

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

Claude

1. Voraussetzung: Node.js (neueste LTS) installieren.
2. API-Schlüssel erhalten: Über 21st.dev Magic Console generieren.
3. Konfigurationsdatei öffnen: ~/.claude/mcp_config.json bearbeiten.
4. Magic MCP Server hinzufügen:

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

5. Speichern und Claude neu starten, um die Änderungen zu übernehmen.

Sichere API-Schlüssel:

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

Cursor

1. Voraussetzung: Node.js (neueste LTS) installieren.
2. API-Schlüssel erhalten: Über 21st.dev Magic Console generieren.
3. Konfigurationsdatei öffnen: ~/.cursor/mcp.json bearbeiten.
4. Magic MCP Server hinzufügen:

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

5. Speichern und Cursor neu starten, um die Änderungen zu übernehmen.

Sichere API-Schlüssel:

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

Cline

1. Voraussetzung: Node.js (neueste LTS) installieren.
2. API-Schlüssel erhalten: Über 21st.dev Magic Console generieren.
3. Konfigurationsdatei öffnen: ~/.cline/mcp_config.json bearbeiten.
4. Magic MCP Server hinzufügen:

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

5. Speichern und Cline neu starten, um die Änderungen zu übernehmen.

Sichere API-Schlüssel:

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

Nutzung dieses MCP in Flows

Verwendung von MCP in FlowHunt

Um MCP-Server in Ihren FlowHunt-Workflow zu integrieren, fügen Sie zunächst die MCP-Komponente zu Ihrem Flow hinzu und verbinden Sie sie mit Ihrem KI-Agenten:

Klicken Sie auf die MCP-Komponente, um das Konfigurationspanel zu öffnen. Im Bereich „System MCP Konfiguration“ fügen Sie Ihre MCP-Server-Details im folgenden JSON-Format ein:

{
  "magic-mcp": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

Ist die Konfiguration abgeschlossen, kann der KI-Agent dieses MCP als Tool verwenden und erhält Zugriff auf alle Funktionen und Möglichkeiten. Denken Sie daran, "magic-mcp" durch den tatsächlichen Namen Ihres MCP-Servers zu ersetzen und Ihre eigene MCP-Server-URL einzutragen.

Übersicht

Roots-Unterstützung ist im Repository nicht angegeben.

Unser Fazit

Der 21st-dev Magic MCP Server verfügt über exzellente Dokumentation zur Installation und Einrichtung auf mehreren Plattformen, mit klaren Praxisbeispielen und einer großen, aktiven Nutzerbasis. Allerdings schränkt der Mangel an expliziter Dokumentation zu MCP-Prompts, Ressourcen, Tools und fortgeschrittenen MCP-Konzepten wie Roots und Sampling die Transparenz für fortgeschrittene Anwender und Integratoren ein.

MCP Score

Bewertung: 6/10

Der 21st-dev Magic MCP Server punktet bei Bedienbarkeit, Aktivität und Klarheit der Einrichtung, verliert aber durch fehlende fortgeschrittene technische Details und fehlende explizite MCP-Primitiven in der öffentlichen Dokumentation an Wert.