21st.dev Magic

21st.dev Magic AI Agent

Magic Component Platform (MCP) ist ein leistungsstarkes, KI-gesteuertes Tool, das Entwicklern hilft, durch Beschreibungen in natürlicher Sprache sofort schöne, moderne UI-Komponenten zu erstellen. Es integriert sich nahtlos in gängige IDEs und bietet einen optimierten Workflow für die UI-Entwicklung.

🌟 Funktionen

• KI-gestützte UI-Generierung: Erstellen Sie UI-Komponenten, indem Sie sie in natürlicher Sprache beschreiben
• Multi-IDE-Unterstützung:
  • Cursor IDE-Integration
  • Windsurf Unterstützung
  • VSCode Unterstützung
  • VSCode + Cline Integration (Beta)
• Moderne Komponentenbibliothek: Zugriff auf eine umfangreiche Sammlung vorgefertigter, anpassbarer Komponenten, inspiriert von 21st.dev
• Echtzeit-Vorschau: Sehen Sie Ihre Komponenten sofort, während Sie sie erstellen
• TypeScript-Unterstützung: Vollständige TypeScript-Unterstützung für typsichere Entwicklung
• SVGL-Integration: Zugriff auf eine umfangreiche Sammlung professioneller Marken-Assets und Logos
• Komponentenverbesserung: Verbessern Sie bestehende Komponenten mit erweiterten Funktionen und Animationen (Demnächst verfügbar)

🎯 So funktioniert es

1. Teilen Sie dem Agenten mit, was Sie benötigen

   • Geben Sie im Chat Ihres KI-Agenten einfach /ui ein und beschreiben Sie die gesuchte Komponente
   • Beispiel: /ui create a modern navigation bar with responsive design

2. Lassen Sie Magic sie erstellen

   • Ihre IDE fordert Sie auf, Magic zu verwenden
   • Magic erstellt sofort eine ausgefeilte UI-Komponente
   • Die Komponenten sind von der Bibliothek von 21st.dev inspiriert

3. Nahtlose Integration

   • Komponenten werden automatisch zu Ihrem Projekt hinzugefügt
   • Beginnen Sie sofort mit der Verwendung Ihrer neuen UI-Komponenten
   • Alle Komponenten sind vollständig anpassbar

🚀 Erste Schritte

Voraussetzungen

• Node.js (neueste LTS-Version empfohlen)
• Eine der unterstützten IDEs:
  • Cursor
  • Windsurf
  • VSCode (mit Cline-Erweiterung)

Installation

1. API-Schlüssel generieren

   • Besuchen Sie die 21st.dev Magic Console
   • Generieren Sie einen neuen API-Schlüssel

2. Installationsmethode wählen

Methode 1: CLI-Installation (Empfohlen)

Ein Befehl zur Installation und Konfiguration von MCP für Ihre IDE:

npx @21st-dev/cli@latest install <client> --api-key <key>

Unterstützte Clients: cursor, windsurf, cline, claude

Methode 2: Manuelle Konfiguration

Wenn Sie die manuelle Einrichtung bevorzugen, fügen Sie dies zur MCP-Konfigurationsdatei Ihrer IDE hinzu:

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

Speicherorte der Konfigurationsdateien:

• Cursor: ~/.cursor/mcp.json
• Windsurf: ~/.codeium/windsurf/mcp_config.json
• Cline: ~/.cline/mcp_config.json
• Claude: ~/.claude/mcp_config.json

Methode 3: VS Code-Installation

Für eine Ein-Klick-Installation klicken Sie auf eine der Installationsschaltflächen unten:

Manuelle VS Code-Einrichtung

Sehen Sie sich zuerst die Installationsschaltflächen oben für eine Ein-Klick-Installation an. Für die manuelle Einrichtung:

Fügen Sie den folgenden JSON-Block zu Ihrer Benutzereinstellungsdatei (JSON) in VS Code hinzu. Sie können dies tun, indem Sie Ctrl + Shift + P drücken und Preferences: Open User Settings (JSON) eingeben:

{
  "mcp": {
    "inputs": [
      {
        "type": "promptString",
        "id": "apiKey",
        "description": "21st.dev Magic API Key",
        "password": true
      }
    ],
    "servers": {
      "@21st-dev/magic": {
        "command": "npx",
        "args": ["-y", "@21st-dev/magic@latest"],
        "env": {
          "API_KEY": "${input:apiKey}"
        }
      }
    }
  }
}

Optional können Sie es zu einer Datei namens .vscode/mcp.json in Ihrem Arbeitsbereich hinzufügen:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "apiKey",
      "description": "21st.dev Magic API Key",
      "password": true
    }
  ],
  "servers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": {
        "API_KEY": "${input:apiKey}"
      }
    }
  }
}

❓ FAQ

Wie geht Magic AI Agent mit meiner Codebasis um?

Magic AI Agent schreibt oder ändert nur Dateien, die mit den von ihm generierten Komponenten zusammenhängen. Es folgt dem Codestil und der Struktur Ihres Projekts und integriert sich nahtlos in Ihre bestehende Codebasis, ohne andere Teile Ihrer Anwendung zu beeinträchtigen.

Kann ich die generierten Komponenten anpassen?

Ja! Alle generierten Komponenten sind vollständig bearbeitbar und verfügen über gut strukturierten Code. Sie können das Styling, die Funktionalität und das Verhalten wie jede andere React-Komponente in Ihrer Codebasis ändern.

Was passiert, wenn meine Generierungen aufgebraucht sind?

Wenn Sie Ihr monatliches Generierungslimit überschreiten, werden Sie aufgefordert, Ihren Plan zu aktualisieren. Sie können jederzeit ein Upgrade durchführen, um weiterhin Komponenten zu generieren. Ihre bestehenden Komponenten bleiben voll funktionsfähig.

Wie schnell werden neue Komponenten zur Bibliothek von 21st.dev hinzugefügt?

Autoren können jederzeit Komponenten auf 21st.dev veröffentlichen, und Magic Agent hat sofortigen Zugriff darauf. Das bedeutet, dass Sie immer Zugriff auf die neuesten Komponenten und Designmuster aus der Community haben.

Gibt es eine Grenze für die Komplexität von Komponenten?

Magic AI Agent kann Komponenten unterschiedlicher Komplexität verarbeiten, von einfachen Schaltflächen bis hin zu komplexen interaktiven Formularen. Für beste Ergebnisse empfehlen wir jedoch, sehr komplexe UIs in kleinere, überschaubare Komponenten zu unterteilen.

🛠️ Entwicklung

Projektstruktur

mcp/
├── app/
│   └── components/     # Core UI components
├── types/             # TypeScript type definitions
├── lib/              # Utility functions
└── public/           # Static assets

Schlüsselkomponenten

• IdeInstructions: Einrichtungsanweisungen für verschiedene IDEs
• ApiKeySection: Schnittstelle zur API-Schlüsselverwaltung
• WelcomeOnboarding: Onboarding-Ablauf für neue Benutzer

🤝 Mitwirken

Wir freuen uns über Beiträge! Treten Sie bitte unserer Discord-Community bei und geben Sie Feedback, um zur Verbesserung von Magic Agent beizutragen. Der Quellcode ist auf GitHub verfügbar.

👥 Community & Support

• Discord-Community – Treten Sie unserer aktiven Community bei
• Twitter – Folgen Sie uns für Updates

⚠️ Beta-Hinweis

Magic Agent befindet sich derzeit in der Beta-Phase. Alle Funktionen sind in diesem Zeitraum kostenlos. Wir schätzen Ihr Feedback und Ihre Geduld, während wir die Plattform weiter verbessern.

📝 Lizenz

MIT-Lizenz

🙏 Danksagungen

• Danke an unsere Beta-Tester und Community-Mitglieder
• Besonderer Dank an die Teams von Cursor, Windsurf und Cline für ihre Zusammenarbeit
• Integration mit 21st.dev zur Komponenteninspiration
• SVGL für die Integration von Logos und Marken-Assets

---

Für weitere Informationen treten Sie unserer Discord-Community bei oder besuchen Sie 21st.dev/magic.