Zum Inhalt springen
WingoUI

Wingo UI für Codex

Codex mit einem Designsystem, dem es folgen kann.

Ein Befehl fügt deiner Codex-Konfiguration den Wingo-UI-MCP-Server und einen kurzen Block in AGENTS.md hinzu. Danach durchsucht Codex 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 Codex installieren

    npx wingo-ui@latest agents install codex

Beim Remote-Server liest Codex den Schlüssel aus WINGO_UI_API_KEY: exportier ihn in deinem Shell-Profil.

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.

  • ~/.codex/AGENTS.mdEin kurzer markierter Block mit den Wingo-UI-Regeln in deinen Codex-Benutzeranweisungen.
  • ~/.codex/config.tomlDer MCP-Server wingo-ui in deiner Codex-Benutzerkonfiguration, unter mcp_servers.wingo-ui.

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:

Im Terminal ausführen

Terminal
codex mcp add wingo-ui --url https://wingo-ui.com/mcp --bearer-token-env-var WINGO_UI_API_KEY

In ~/.codex/config.toml einfügen

~/.codex/config.toml
[mcp_servers.wingo-ui]
url = "https://wingo-ui.com/mcp"
bearer_token_env_var = "WINGO_UI_API_KEY"
Agenten-Doku lesen

Prompts zum Ausprobieren

Drei Screens für den Anfang

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

Codex liest die .codex/config.toml eines Projekts nur in vertrauenswürdigen Projekten. Deshalb fügt die Installation den Server und den AGENTS.md-Block standardmäßig deiner Benutzerkonfiguration in ~/.codex hinzu. Mit --scope project bleibt beides im Projekt.

Nein. Sie fügt einen Block zwischen den Kommentaren wingo-ui:start und wingo-ui:end ein und lässt den Rest der Datei in Ruhe. npx wingo-ui@latest agents update aktualisiert nur diesen Block.

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

Pläne ansehenKomponenten ansehen