Zum Inhalt springen
WingoUI

Wingo UI für Cursor

Eine Komponentenbibliothek, die Cursor installiert.

Ein Befehl fügt eine Cursor-Projektregel und den Wingo-UI-MCP-Server hinzu. Danach durchsucht Cursor 374 Komponenten, Blöcke und Hooks, liest Props und Designregeln und installiert den Quellcode in dein Projekt.

Kostenlosen API-Schlüssel holenPreise ansehen

75 kostenlose Elemente mit einem kostenlosen Konto. Pro ab 8 $ im Monat.

In zwei Befehlen eingerichtet

  1. Im Terminal anmelden

    npx wingo-ui@latest login

  2. Für Cursor installieren

    npx wingo-ui@latest agents install cursor

Aktivier den Server wingo-ui einmal unter Cursor Settings > MCP.

Einrichtung

Was die Installation schreibt

Führ beide Befehle in deinem Projektordner aus. Die Installation lässt sich gefahrlos wiederholen: Sie ändert nur die Teile, die sie verwaltet, und npx wingo-ui@latest agents update aktualisiert sie.

  • .cursor/rules/wingo-ui.mdcEine Projektregel für .tsx-, .jsx- und .css-Dateien mit dem Wingo-UI-Ablauf.
  • .cursor/mcp.jsonDer MCP-Server wingo-ui für dieses Projekt.

npx wingo-ui@latest login öffnet deinen Browser, um die CLI freizugeben, und speichert einen Schlüssel für die CLI und den lokalen MCP-Server. Für ein kostenloses Konto reicht eine E-Mail-Adresse.

Ist WINGO_UI_API_KEY in deiner Shell gesetzt, zeigt die Konfiguration auf den Remote-Server und liest den Schlüssel aus dieser Variable. Sonst startet sie den lokalen Server (npx wingo-ui mcp), der den beim Login gespeicherten Schlüssel nutzt.

Lieber von Hand einrichten?

Erstell in deinem Konto unter API-Schlüssel einen Schlüssel, exportier ihn als WINGO_UI_API_KEY und füg den Server hinzu:

In .cursor/mcp.json einfügen

.cursor/mcp.json
{
  "mcpServers": {
    "wingo-ui": {
      "url": "https://wingo-ui.com/mcp",
      "headers": {
        "Authorization": "Bearer ${env:WINGO_UI_API_KEY}"
      }
    }
  }
}
Agenten-Doku lesen

Prompts zum Ausprobieren

Drei Screens für den Anfang

Füg einen davon in Cursor ein. Das sind die Blöcke, die der Agent findet und installiert.

Kostenlos und Pro

Kostenlos starten, Pro bei Bedarf

Suche, Doku, Props und Designregeln funktionieren ohne Schlüssel. Für den Quellcode brauchst du einen Schlüssel: die kostenlosen Elemente mit einem kostenlosen Konto, alle Elemente mit Pro.

Kostenloses Konto

0 $ohne Karte

  • 75 von 374 Elementen mit vollem Quellcode
  • Ein API-Schlüssel für den MCP-Server und die CLI
  • Anmeldung nur mit einer E-Mail-Adresse
Kostenlosen API-Schlüssel holen

Pro

8 $im Monat

Oder 80 $ im Jahr, oder einmalig 150 $ für Lifetime.

  • Alle 374 Elemente mit vollem Quellcode
  • 107 Blöcke, darunter Seitenvorlagen und App-Screens
  • 14 Tage Rückerstattung beim ersten Kauf, solange kein Pro-Element heruntergeladen wurde
Preise ansehen

FAQ

Fragen zu Cursor

Ja, einmal. Öffne nach der Installation Cursor Settings > MCP und aktivier wingo-ui. Die Regel in .cursor/rules/wingo-ui.mdc greift bei .tsx-, .jsx- und .css-Dateien und stört so andere Arbeit nicht.

Beim Remote-Server liest .cursor/mcp.json den Schlüssel über Cursors env:-Syntax aus der Umgebungsvariable WINGO_UI_API_KEY, damit er nicht in der Datei steht. Ohne diese Variable nutzt die Installation den lokalen Server, der den mit npx wingo-ui@latest login gespeicherten Schlüssel liest.

Nein. Suche, Doku, Props und Designregeln funktionieren ohne Schlüssel, und ein kostenloses Konto (nur E-Mail, keine Karte) bekommt einen Schlüssel mit dem Quellcode aller 75 kostenlosen Elemente. Pro schaltet den Quellcode aller Elemente frei, ab 8 $ im Monat. Siehe Preise.

Nein. Der MCP-Server bekommt nur die Tool-Aufrufe, die Cursor macht, etwa eine Suchanfrage oder einen Komponentennamen. Deine Projektdateien bleiben bei dir und deinem Agenten.

Anleitungen

Alle Agenten-Funktionen

Dein nächster Screen, schon gebaut.

Erstell einen kostenlosen Schlüssel, führ die Installation aus und bitte Cursor um deinen nächsten Screen.

Pläne ansehenKomponenten ansehen