Brauche ich Pro, um den MCP-Server zu nutzen?

Nein. Suche, Doku, Designregeln, Tokens und die kostenlosen Komponenten funktionieren ohne Pro, sogar ohne Schlüssel. Für den Quellcode von Pro-Komponenten brauchst du einen Schlüssel aus einem Pro-Konto. Mehr unter Preise.

Welche Agenten und Editoren werden unterstützt?

Jeder Client, der MCP spricht. Für Claude Code, Codex, Gemini CLI, Grok und Cursor gibt es fertige Setups, dazu einen lokalen stdio-Server für Clients ohne Remote-MCP.

Verlässt mein Code meinen Rechner?

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

Wie bleibt mein Agent auf dem neuesten Stand?

Der MCP-Server liefert immer das neueste Release, neue Komponenten und geänderte Props sind also sofort verfügbar. Die Regeldateien verweisen nur auf den Server und ändern sich deshalb selten.

Kann ich stattdessen die shadcn-CLI nutzen?

Ja. Jede Komponente ist auch ein shadcn-Registry-Eintrag, kostenlose Elemente installierst du direkt über ihre URL. Die Installationsanleitung zeigt beide Wege.

Für Coding-Agenten

Dein Agent spricht fließend Wingo UI.

Ein Remote-MCP-Server, eine CLI, Agentenregeln und ein Claude-Skill. Dein Agent findet die richtige Komponente, hält sich an das Designsystem und installiert den Quellcode, statt den nächsten Datepicker neu zu erfinden.

API-Schlüssel holen MCP-Doku lesen

Funktioniert mitClaude CodeCodexGemini CLIGrokCursor

So funktioniert's

In drei Schritten zum ersten Screen

API-Schlüssel erstellen
Melde dich an und erstell unter API-Schlüssel in deinem Konto einen Schlüssel. Schlüssel beginnen mit wui_ und werden nur gehasht gespeichert.
Agent verbinden
Füg den MCP-Server mit einem Befehl hinzu oder führ npx wingo-ui login aus, um die CLI zu nutzen.
Screen beschreiben
Beschreib, was du brauchst. Der Agent durchsucht Wingo UI, liest Props und Regeln und installiert, was passt.

Einrichtung

Wähl deinen Agenten

Die Snippets lesen deinen Schlüssel aus WINGO_UI_API_KEY. Kostenlose Komponenten funktionieren auch ohne Schlüssel.

Lieber im Terminal?

$npx wingo-ui@latest login

Öffnet deinen Browser, um die CLI freizugeben, und speichert den Schlüssel für die CLI und den lokalen MCP-Server.

Im Terminal ausführen

Terminal

claude mcp add --transport http wingo-ui https://wingo-ui.com/mcp --header "Authorization: Bearer $WINGO_UI_API_KEY"

In .mcp.json einfügen

.mcp.json

1{
2  "mcpServers": {
3    "wingo-ui": {
4      "type": "http",
5      "url": "https://wingo-ui.com/mcp",
6      "headers": {
7        "Authorization": "Bearer ${WINGO_UI_API_KEY}"
8      }
9    }
10  }
11}

MCP-Tools

Was dein Agent damit kann

10 Tools über einen einzigen Endpunkt. Quellcode von Pro-Komponenten gibt es mit einem Pro-Schlüssel, alles andere ist frei zugänglich.

search_components
Komponenten, Blocks, Hooks und Helfer nach Stichworten, Kategorie oder Zugang finden.
list_categories
Die Kategorien durchsehen und wie viele Elemente jede enthält.
get_componentPro
Props, Teile, Nutzung, Abhängigkeiten, Installationsbefehl und Quellcode.
get_blockPro
Ein kompletter Screen oder Abschnitt, die verwendeten Komponenten und der Quellcode.
get_design_rules
Tokens, Größen, Bewegung, Formulare, Overlays und Mobile-Regeln.
get_theme_tokens
Die CSS-Variablen für den hellen und den dunklen Modus.
get_install_instructions
Projekt-Setup für Next.js oder Vite, Schritt für Schritt.
check_updates
Deine installierten Komponenten mit dem neuesten Release vergleichen.
get_changelog
Die letzten Releases und was sich darin geändert hat.
get_account_status
Ob der Schlüssel Pro hat, mit Links zum Upgrade.

CLI

Eine CLI für Menschen und Agenten

npx wingo-ui funktioniert in jedem React-Projekt. Jeder Befehl gibt auf Wunsch auch JSON aus, für Skripte und Agenten.

wingo-ui initTokens, Utils und Pfad-Aliase einrichten.
wingo-ui add data-tableKomponenten samt Abhängigkeiten kopieren.
wingo-ui loginÜber deinen Browser anmelden.
wingo-ui outdatedKomponenten mit neueren Versionen auflisten.
wingo-ui updateUpdates zusammenführen, Anpassungen behalten.
wingo-ui agents install claudeRegeln und Skills für deinen Agenten installieren.
wingo-ui mcpEinen lokalen MCP-Server über stdio starten.

Regeln und Skills

Dein Agent lernt euren Stil

wingo-ui agents install schreibt kurze, verwaltete Regeldateien. Die Details kommen live vom MCP-Server, deshalb veralten die Regeln nie.

Claude Code.claude/skills/wingo-ui/SKILL.mdCLAUDE.md
CodexAGENTS.md
Gemini CLIGEMINI.md
GrokAGENTS.md
Cursor.cursor/rules/wingo-ui.mdc

$npx wingo-ui@latest agents install claude

llms.txt lesen

Prompts zum Ausprobieren

Fang mit einem echten Screen an

Kopier einen davon in deinen Agenten und sieh zu, wie er mit Wingo UI baut.

Bau eine Einstellungsseite mit Profilformular, Benachrichtigungs-Schaltern und einer Gefahrenzone. Nutze Wingo UI.
Erstell einen CRM-Pipeline-Screen mit Kanban-Board, Deal-Karten und einem Filter-Sheet auf dem Handy. Nutze Wingo UI.
Bau einen Mobile-first-Checkout mit Adressformular, Gutscheinfeld und fixiertem Bezahlen-Button. Nutze Wingo UI.
Prüf, welche Wingo-UI-Komponenten in diesem Projekt veraltet sind, und aktualisiere sie, ohne meine Änderungen zu verlieren.

FAQ

Dein Agent spricht fließend Wingo UI.

In drei Schritten zum ersten Screen

API-Schlüssel erstellen

Agent verbinden

Screen beschreiben

Wähl deinen Agenten

Was dein Agent damit kann

Eine CLI für Menschen und Agenten

Dein Agent lernt euren Stil

Fang mit einem echten Screen an

Rund um Agenten und MCP

Gib deinem Agenten besseren Geschmack.