Magic MCP: UI-Komponenten sofort mit natürlicher Sprache erzeugen 187

Was ist Magic MCP?

Magic MCP (Magic Magic Component Platform) ist ein von 21st.dev entwickeltes, KI-gestütztes Tool, das Entwicklern hilft, durch natürlichsprachliche Beschreibungen schnell moderne UI-Komponenten zu generieren. Durch die Integration in gängige IDEs (wie Cursor, WindSurf und VSCode) können damit Oberflächenelemente wie Buttons, Navigationsleisten und Login-Felder erstellt werden, mit Echtzeit-Vorschau, sodass man die Komponentenwirkung sofort sehen und den generierten Code jederzeit anpassen kann.

Kernfunktionen von Magic MCP

Die Kernfunktion von Magic MCP ist die Generierung von UI-Komponenten durch natürlichsprachliche Beschreibungen. Entwickler müssen lediglich im Chat-Feld des KI-Agenten eine Beschreibung eingeben (z. B. /ui create a modern navigation bar with responsive design), und Magic MCP generiert anhand dieser Beschreibung sofort eine vollständige UI-Komponente und fügt sie dem Projekt hinzu.

Hervorhebende Funktionen von Magic MCP

• KI-gestützte UI-Generierung: Erstellung von Komponenten durch natürlichsprachliche Beschreibungen, ohne manuell Code schreiben zu müssen.

• Unterstützung mehrerer IDEs: Unterstützt verschiedene gängige IDEs, einschließlich:

• Cursor IDE: Integration über Kommandozeilen-Tool.

• WindSurf: Integration über Konfigurationsdatei.

• VSCode + Cline (Beta): Integration über die Cline-Erweiterung.

• Moderne Komponentenbibliothek: Bietet eine große Auswahl an vorgefertigten, anpassbaren Komponenten, inspiriert von der Komponentenbibliothek von 21st.dev.

• Echtzeit-Vorschau: Sofortige Anzeige der Wirkung beim Erstellen von Komponenten, ohne manuelles Neuladen.

• TypeScript-Unterstützung: Bietet ein typsicheres Entwicklungserlebnis, ideal für die moderne Frontend-Entwicklung.

• SVGL-Integration: Bietet umfangreiche Marken-Assets und Logos für die schnelle Erstellung professioneller UIs.

• Komponenten-Erweiterung: Künftig wird die KI-gestützte Erweiterung bestehender Komponenten um erweiterte Funktionen und Animationen unterstützt.

Nutzungsablauf von Magic MCP

1. Anforderungen beschreiben

• Geben Sie /ui im Chat-Feld des KI-Agenten ein und beschreiben Sie dann die gewünschte Komponente. Beispiel: /ui create a modern navigation bar with responsive design

2. Komponente generieren

• Magic MCP generiert anhand der Beschreibung eine vollständige UI-Komponente. Die generierte Komponente folgt dem Stil der Komponentenbibliothek von 21st.dev und ist vollständig anpassbar.

3. In das Projekt integrieren

• Die generierte Komponente wird automatisch zu Ihrem Projekt hinzugefügt und Sie können sie sofort verwenden. Alle Komponenten können wie normale React-Komponenten bearbeitet und geändert werden.

Geeignete Einsatzszenarien für Magic MCP

• Schnelle Prototypenentwicklung: Schnelle Generierung von UI-Komponenten durch natürliche Sprache, um Zeit zu sparen.

• Teamzusammenarbeit: Gemeinsame Nutzung der Komponentenbibliothek mit Teammitgliedern zur Steigerung der Entwicklungseffizienz.

• Lernen und Experimentieren: Schnelles Ausprobieren neuer UI-Designs und Erkunden verschiedener Designstile.

Installation und Konfiguration von Magic MCP

Vor der Nutzung von Magic MCP ist eine einfache Konfiguration erforderlich. Nachfolgend finden Sie die Installations- und Konfigurationsmethoden für verschiedene IDEs:

Cursor IDE

npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{\"TWENTY_FIRST_API_KEY\":\"your-api-key\"}"

WindSurf

Fügen Sie die folgende Konfiguration in ~/.codeium/windsurf/mcp_config.json hinzu:

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli@latest",
        "install",
        "@21st-dev/magic-mcp",
        "--client",
        "windsurf"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}

VSCode + Cline (Beta)

Fügen Sie Folgendes in die MCP-Konfiguration von Cline hinzu:

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli@latest",
        "install",
        "@21st-dev/magic-mcp",
        "--client",
        "cline"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}

Häufig gestellte Fragen zu Magic MCP

F1: Wie geht Magic MCP mit meiner Codebasis um?

Magic MCP schreibt oder ändert nur Dateien, die mit der Generierung von Komponenten zusammenhängen, folgt dem Code-Stil und der Struktur des Projekts und beeinflusst keine anderen Teile.

F2: Können die generierten Komponenten angepasst werden?

Ja! Die generierten Komponenten sind vollständig bearbeitbar, die Codestruktur ist klar, und Sie können sie wie gewöhnliche React-Komponenten bearbeiten.

F3: Was passiert, wenn die Generierungsanzahl überschritten wird?

Wenn Sie Ihr monatliches Generierungslimit überschreiten, fordert Sie das System auf, Ihren Plan zu upgraden. Bestehende Komponenten können weiterhin normal verwendet werden.

F4: Gibt es eine Begrenzung für die Komplexität der Komponenten?

Magic MCP kann Komponenten unterschiedlicher Komplexität verarbeiten, von einfachen Buttons bis hin zu komplexen interaktiven Formularen. Es wird empfohlen, sehr komplexe UIs in mehrere kleinere Komponenten aufzuteilen.

GitHub-Repository: https://github.com/21st-dev/magic-mcp

Projekt-Website: https://21st.dev/magic