Zum Inhalt springen
WingoUI

Wingo UI für Gemini CLI

Gemini CLI baut mit Wingo UI.

Ein Befehl fügt deinem Projekt einen Block in GEMINI.md und den Wingo-UI-MCP-Server hinzu. Danach durchsucht Gemini CLI 374 Komponenten, Blöcke und Hooks, liest ihre Props und installiert den Quellcode mit der CLI.

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 Gemini CLI installieren

    npx wingo-ui@latest agents install gemini

Starte eine neue Gemini-CLI-Sitzung im Projekt, damit sie den neuen Server lädt.

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.

  • GEMINI.mdEin kurzer markierter Block mit den Wingo-UI-Regeln. Dein eigener Text in der Datei bleibt, wie er ist.
  • .gemini/settings.jsonDer MCP-Server wingo-ui unter mcpServers. Deine übrigen Einstellungen bleiben, wie sie sind.

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 .gemini/settings.json einfügen

.gemini/settings.json
{
  "mcpServers": {
    "wingo-ui": {
      "httpUrl": "https://wingo-ui.com/mcp",
      "headers": {
        "Authorization": "Bearer ${WINGO_UI_API_KEY}"
      }
    }
  }
}
Agenten-Doku lesen

Prompts zum Ausprobieren

Drei Screens für den Anfang

Füg einen davon in Gemini CLI 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 Gemini CLI

Einen markierten Block in GEMINI.md und den Server wingo-ui unter mcpServers in .gemini/settings.json. Der Rest beider Dateien bleibt, wie er ist.

Ja. npx wingo-ui@latest agents install gemini --scope user schreibt stattdessen ~/.gemini/GEMINI.md und ~/.gemini/settings.json, damit jedes Projekt auf deinem Rechner es bekommt.

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 Gemini CLI 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 Gemini CLI um deinen nächsten Screen.

Pläne ansehenKomponenten ansehen