Magic MCP: MCP-Dienst zur Erzeugung moderner UI-Komponenten

Allgemeine Einführung

Magie MCP 21st.dev ist ein KI-gesteuertes Tool, das vom 21st.dev-Team entwickelt wurde und für Frontend-Entwickler gedacht ist. Es generiert moderne UI-Komponenten on-the-fly aus natürlichsprachlichen Beschreibungen und ist in Entwicklungsumgebungen wie Cursor, WindSurf und VS Code (Cline-Plugin) integriert. Benutzer geben einfache Anforderungen ein, wie z. B. "Erstellen Sie eine moderne Navigationsleiste", und Magic MCP generiert eine moderne UI-Komponente auf der Grundlage der Reagieren Sie Komponentencode mit Tailwind-CSS-Styles und TypeScript-Unterstützung. Das Tool ist vollständig quelloffen, wird auf GitHub gehostet und kann von Entwicklern kostenlos genutzt werden. Es bietet Live-Vorschauen und eine umfangreiche Komponentenbibliothek für schnelles Prototyping oder die Entwicklung im Team.

Funktionsliste

• Komponente zur Erzeugung natürlicher SpracheBeschreiben Sie die Anforderungen in Textform und generieren Sie automatisch den Code der React-Komponente.
• Unterstützung mehrerer IDEsNahtlose Integration mit Cursor, WindSurf und VS Code (Cline Beta).
• Moderne Komponentenbibliothek: bietet eine große Anzahl von anpassbaren Komponenten, die von 21st.dev.
• Vorschau in EchtzeitSofortige Anzeige des Effekts beim Generieren von Komponenten zur einfachen Fehlersuche.
• TypeScript-UnterstützungSicherstellen, dass der generierte Code typsicher ist und Fehler reduziert.
• SVGL-IntegrationIntegrierte professionelle Markensymbole und -logos, die direkt in die Komponente eingebettet sind.
• Komponentenverbesserungen (in Kürze)Erweiterte Funktionen und Animationen zu bestehenden Komponenten hinzufügen.

Hilfe verwenden

Einbauverfahren

Magic MCP muss in einer unterstützten IDE installiert werden, wie im folgenden Beispiel gezeigt Cursor Zum Beispiel können andere IDEs (z.B. WindSurf (oder VS Code + Cline) wird auf ähnliche Weise installiert:

1. Vorbereiten der Umgebung
   Vergewissern Sie sich, dass auf Ihrem Computer Node.js (die neueste LTS-Version wird empfohlen, z. B. v22) und npm installiert sind, die die Grundlage für die Ausführung von Magic MCP bilden.
2. Abrufen des API-Schlüssels
   Besuchen Sie die 21st.dev-Website, loggen Sie sich ein und gehen Sie zur "API"-Seite, erstellen Sie eine neue TWENTY_FIRST_API_KEY. Sie können es ohne Schlüssel ausprobieren, aber die Funktionalität ist eingeschränkt.
3. Installation von Magic MCP
   Öffnen Sie ein Terminal und führen Sie den folgenden Befehl aus:

npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{\"TWENTY_FIRST_API_KEY\":\"你的API密钥\"}"

Oberbefehlshaber (Militär) 你的API密钥 Ersetzen Sie den Schlüssel durch den von der offiziellen Website bezogenen.

4. Konfigurieren der Cursor-IDE
   Öffnen Sie die Einstellungen in Cursor, suchen Sie die Option Model Context Protocol (MCP) und fügen Sie die folgende Konfiguration hinzu:

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "cursor"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

Speichern Sie und starten Sie die IDE neu.

5. Überprüfen der Installation
   Geben Sie im Cursor-Chat-Fenster ein /uiWenn Sie die Aufforderung "Komponenten mit Magic MCP erstellen" erhalten, war die Installation erfolgreich.

WindSurf Konfiguration

existieren ~/.codeium/windsurf/mcp_config.json Hinzufügen:

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "windsurf"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

VS-Code + Cline-Konfiguration (Beta)

existieren Cline wird der MCP-Konfiguration des

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "cline"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

Verwendung der wichtigsten Funktionen

Erzeugen von UI-Komponenten

• Verfahren::
  1. Geben Sie im IDE-Chat-Fenster /uigefolgt von einer Anforderung, wie zum Beispiel /ui 创建一个带搜索功能的导航栏.
  2. Magic MCP erzeugt einen React-Komponentencode, der direkt im Fenster angezeigt wird.
  3. Klicken Sie auf "Code einfügen" und der Code wird automatisch zur Projektdatei hinzugefügt.
• Ausführliche Beschreibung::
  Die Komponente verwendet standardmäßig Tailwind-CSS-Stile und TypeScript, wobei der Code manuell angepasst werden kann. Je spezifischer die Eingabebeschreibung ist, desto relevanter wird das Ergebnis sein.
• typisches Beispiel::
  Eingabe:/ui 一个蓝色按钮
  Ausgabe:

  const BlueButton = () => {
  return (
  <button className="bg-blue-500 text-white px-4 py-2 rounded">
  点击我
  </button>
  );
  };
  export default BlueButton;
  

Vorschau in Echtzeit

• Verfahren::
  1. Nach der Erstellung der Komponente zeigt die IDE ein Vorschaufenster an, um die Wirkung der Komponente zu zeigen.
  2. Nach der Änderung des Codes wird die Vorschau automatisch aktualisiert.
• Ausführliche Beschreibung::
  Wenn das lokale Projekt nicht läuft, basiert die Vorschau auf dem in Magic MCP integrierten Rendering, das leicht vom tatsächlichen Ergebnis abweichen kann.

SVGL-Symbole verwenden

• Verfahren::
  1. Einfuhr /logo 品牌名z.B.. /logo Twitter.
  2. Das Tool liefert den Symbolcode im SVG- oder JSX-Format.
  3. Kopie zur Verwendung in einer Komponente.
• typisches Beispiel::
  Eingabe:/logo GitHub
  Ausgabe:

  const GitHubIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24">
  <!-- GitHub SVG 路径 -->
  </svg>
  );
  

Details zum Betriebsablauf

1. Initiierung von Projekten
   Stellen Sie sicher, dass das Frontend-Projekt erstellt wurde (z.B. mit Create React App). magic MCP generiert Code auf Basis der Projektstruktur.
2. Eingangsanforderung
   Verwenden Sie Beschreibungen in natürlicher Sprache in der IDE, z. B. "eine ansprechende Kartenliste". Klarere Beschreibungen führen zu genaueren Ergebnissen.
3. Anpassungscode
   Prüfen Sie den Code nach der Generierung und ändern Sie den Stil oder die Logik, um die Anforderungen zu erfüllen.
4. Einsatzprüfung
   Speichern Sie den Code und führen Sie das Projekt aus (z. B. npm start), was die Wirkung bestätigt.

caveat

• Begrenzte Anzahl von Generationen pro Monat, nach Überschreiten des Limits müssen Sie den kostenpflichtigen Plan aktualisieren.
• Bei komplexen Komponenten wird empfohlen, sie in mehrere einfache Anforderungen aufzuteilen.
• Treten Sie der Discord-Community bei, um Fragen zu stellen.

Anwendungsszenario

1. Schnelles Prototyping
   Wenn Entwickler UI-Effekte zeigen müssen, spart Magic MCP Zeit, indem es Komponenten schnell generiert.
2. Team Code-Wiederverwendung
   Die Teams nutzen die Komponenten von 21st.dev gemeinsam, um den Stil zu standardisieren und die Effizienz zu steigern.
3. Lernen Sie Front-End-Technologien
   Anfänger verwenden es, um Standardcode zu generieren, während sie lernen, sich zu verändern und schnell mit React zu arbeiten.

QA

1. Ist Magic MCP kostenlos?
   Ja, es ist Open Source auf GitHub, kostenlos für grundlegende Funktionen, mit API-Schlüsseln und kostenpflichtigen Plänen für erweiterte Funktionen erforderlich.
2. Ist der generierte Code kommerziell verfügbar?
   Ja, der Code ist Eigentum des Nutzers und kann für jedes Projekt verwendet werden.
3. Welche IDEs werden unterstützt?
   Unterstützt derzeit Cursor, WindSurf und VS Code (Cline Beta), kann in Zukunft erweitert werden.