OpenUI: KI-basierter UI-Generator

1. Projektübersicht

OpenUI ist eine Open-Source-, LLM-basierte Anwendung, die es Entwicklern ermöglicht, eine Benutzeroberfläche in einfachem Englisch zu beschreiben und sofort live im Browser gerendert zu sehen. Das Ergebnis kann dann als sauberes HTML/CSS oder frameworkspezifischer Code (React, Svelte, Web Components und mehr) exportiert werden.

2. Hintergrund & Positionierung

OpenUI wurde von Weights & Biases (W&B) entwickelt — einem Unternehmen, das vor allem für das Tracking von Machine-Learning-Experimenten bekannt ist — als internes Prototypprojekt, um zu erkunden, wie die nächste Generation von LLM-basierten Entwicklertools aussehen könnte. Es wurde veröffentlicht, damit die breitere Community mit derselben Idee experimentieren kann: die Umwandlung von Absichten in natürlicher Sprache in funktionierenden Front-End-Code ohne manuelles Schreiben von Markup.

Konzeptionell bewegt sich OpenUI im selben Bereich wie proprietäre „Text-zu-UI“-Generatoren, unterscheidet sich jedoch dadurch, dass es unter einer freizügigen Lizenz vollständig Open Source ist, anbieterunabhängig ist (es ist nicht an einen einzigen KI-Anbieter gebunden) und selbst hostbar ist — Teams können es vollständig auf ihrer eigenen Infrastruktur ausführen, einschließlich lokaler Modelle über Ollama, anstatt von einem geschlossenen, gehosteten Service abhängig zu sein.

3. Funktionskategorien

🤖 LLM-Anbieter-Integrationen — 9 unterstützte Backends — OpenAI, Anthropic Claude, Google Gemini, Groq, Mistral, Cohere, Ollama (lokale Modelle), jeder OpenAI-kompatible Endpunkt und LiteLLM als vereinheitlichender Proxy — ermöglicht es Teams, einen Cloud-Anbieter, ein selbst gehostetes lokales Modell oder eine Mischung aus mehreren zu wählen, je nach Kosten-, Datenschutz- und Latenzanforderungen.
🎨 Code-Exportziele — 4+ Ausgabeformate — reines HTML/CSS, React, Svelte und Web Components — wandelt das generierte Markup in das Framework um, das ein Team bereits verwendet, sodass die Ausgabe direkt in eine bestehende Codebasis eingefügt werden kann.
🖥️ Live-Vorschau & Iteration — chatgesteuerte Verfeinerung, sofortige gerenderte Vorschau, Nachrichtenverlauf pro Nachricht — ermöglicht es einem Entwickler, weiterhin Änderungen zu beschreiben („Mach den Button größer“, „Wechsle zu einem dunklen Design“) und zu sehen, wie sich die Benutzeroberfläche in Echtzeit aktualisiert, ohne Code zu berühren.
👁️ Visionsgestützte Verfeinerung — screenshotbasiertes Feedback für fähige Modelle mit Bilderkennung — ermöglicht es Benutzern, einen Screenshot (z. B. eines Design-Mockups oder eines Rendering-Fehlers) anzuhängen, damit das LLM die generierte Benutzeroberfläche an einem visuellen Referenzbild ausrichten kann.
🐳 Bereitstellungsoptionen — 4 Einrichtungspfade — vorgefertigtes Docker-Image, Docker Compose (mit gebündeltem Ollama), Quellinstallation über uv und vorgefertigte Dev-Container für GitHub Codespaces/Gitpod — deckt alles ab, von einem einzeiligen Demo bis hin zu einer vollständig angepassten lokalen Entwicklungsumgebung.

4. Wichtigste Highlights

Generierung von natürlicher Sprache zu UI — beschreibe eine Komponente oder ein vollständiges Layout in einem Satz und erhalte in Sekunden ein gerendertes, bearbeitbares Ergebnis, was das Problem des leeren Blattes beim Erstellen einer neuen Benutzeroberfläche von Grund auf beseitigt.
Anbieterunabhängige Architektur — wird unter der Haube von LiteLLM angetrieben, sodass der Wechsel von beispielsweise OpenAI zu einem lokalen Ollama-Modell eine Konfigurationsänderung und keine Codeänderung ist.
Multi-Framework-Export — dasselbe generierte Design kann in reines HTML, React, Svelte oder Web Components umgewandelt werden, was Nacharbeit reduziert, wenn ein Design in einen bestimmten Technologie-Stack integriert werden muss.
Local-First-Option über Ollama — Teams mit Datenschutz- oder Kosteneinschränkungen können die gesamte Pipeline offline mit lokalen Modellen mit offenen Gewichten ausführen, einschließlich Bilderkennungsmodellen wie Llava für screenshotbasierte Verfeinerung.
Konversationsschleife zur Iteration — Verfeinerungen erfolgen über Chat statt durch manuelles CSS-Anpassen, was die Rückmeldungsschleife für sowohl technische als auch weniger technische Benutzer schnell hält.
Testen ohne Reibung — ein einziger docker run-Befehl mit einem API-Schlüssel reicht aus, um eine funktionierende Instanz zu haben, und es ist eine öffentliche Demo zur Evaluierung vor jeder lokalen Einrichtung verfügbar.

5. Anwendungsfälle nach Rolle

Allgemeine Entwickler — schnell UI-Komponenten erstellen oder Layouts aus einer Beschreibung in einfacher Sprache prototypisieren und dann direkt in das im aktuellen Projekt verwendete Framework exportieren.
Daten-/Forschungswissenschaftler — einfache Front-Ends für interne Tools, Dashboards oder ML-Demo-Apps ohne tiefe Front-End-Expertise erstellen, besonders nützlich für Teams, die bereits W&B für das Tracking von Experimenten verwenden.
Projektmanager / Produktverantwortliche — eine Funktionsbeschreibung oder Wireframe-Idee in Minuten in einen klickbaren, visuellen Prototyp umwandeln, um Stakeholder vor Beginn der Entwicklungsarbeit abzustimmen.

6. Erste Schritte

Finde, was du brauchst — lies die Haupt-README und die komponentenspezifische Dokumentation in backend/README.md und der Front-End-README, oder probiere die gehostete Demo vor der Installation aus:

open https://openui.fly.dev

Installieren / Integrieren — der schnellste Weg ist das vorgefertigte Docker-Image:

docker run --rm --name openui -p 7878:7878 -e OPENAI_API_KEY ghcr.io/wandb/openui

Besuche dann http://localhost:7878. Um aus dem Quellcode auszuführen (benötigt git und uv):

git clone https://github.com/wandb/openui.git
cd openui/backend
uv sync --all-extras
export OPENAI_API_KEY=xxxx
uv run python -m openui --dev

Beitragen — forke das Repository, öffne einen Branch gegen main und reiche einen Pull Request nach den bestehenden PR-Konventionen ein:

git clone https://github.com/wandb/openui.git
cd openui
git checkout -b my-feature

Überprüfe offene Issues auf gute Erstaufgaben, bevor du mit neuer Arbeit beginnst.

7. Projektstruktur

openui/
├── backend/          # Python-API-Server: LLM-Orchestrierung, LiteLLM-Konfiguration, HTML-Generierung
│   └── README.md     # Backend-spezifische Einrichtung und Umgebungsvariablen
├── frontend/         # React-basierte Web-UI: Chat-Oberfläche, Live-Vorschau, Code-Export
├── .devcontainer/     # Vorkonfigurierte Entwicklungsumgebungen für Codespaces / Gitpod
└── docker-compose.yml # Compose-Setup, das OpenUI mit einer lokalen Ollama-Instanz bündelt

Schlüsseldateien: backend/ enthält die Modell-Routing-Logik, die einen Chat-Prompt in gerendertes Markup umwandelt; frontend/ rendert die Live-Vorschau und übernimmt die Konvertierung in React/Svelte/Web Components; .devcontainer/ ermöglicht es Mitwirkenden, mit einem Klick eine funktionierende Umgebung zu erhalten.

8. Verwandtes Ökosystem

Upstream-Abhängigkeiten: LiteLLM (vereinheitlichter LLM-API-Proxy), Ollama (Laufzeitumgebung für lokale Modelle) und die verschiedenen Cloud-LLM-APIs, mit denen es integriert ist (OpenAI, Anthropic, Google Gemini, Groq, Mistral, Cohere).
Ursprungsorganisation: entwickelt von Weights & Biases, dessen Plattform zur Experimentverfolgung OpenUI ursprünglich als internes Tool-Prototyp ergänzen sollte.
Ergänzende Tools: steht neben anderen „Prompt-zu-UI“-Tools im weiteren Bereich der KI-gestützten Front-End-Entwicklung und bietet eine Open-Source-, selbst hostbare Alternative zu geschlossenen, gehosteten Generatoren.

9. Lizenz

OpenUI wird unter der Apache License 2.0 veröffentlicht.

✅ Kommerzielle Nutzung, Modifikation, Verbreitung und private Nutzung sind alle gestattet.
✅ Du darfst Unterlizenzen vergeben und darauf aufbauend proprietäre Produkte entwickeln, sofern Lizenz- und Urheberrechtshinweise erhalten bleiben.
❌ Die Lizenz bietet keine Gewährleistung und keine Haftungsfreistellung durch die Autoren.
ℹ️ Apache-2.0 enthält eine ausdrückliche Patenteinräumung durch Mitwirkende, was viele Teams für die Unternehmensnutzung gegenüber weniger ausdrücklichen, freizügigen Lizenzen bevorzugen.

10. FAQ

F: Brauche ich jeden LLM-Anbieter-API-Schlüssel, um OpenUI zu nutzen?
A: Nein. Alle Anbieter-Schlüssel sind optional — du musst nur den/die Schlüssel für den/die Anbieter setzen, den/die du verwenden möchtest, z. B. nur OPENAI_API_KEY, oder gar keine, wenn du vollständig lokal über Ollama arbeitest.

F: Kann ich OpenUI nutzen, ohne Daten an einen Cloud-KI-Anbieter zu senden?
A: Ja. OpenUI kann vollständig über lokale Modelle über Ollama ausgeführt werden, einschließlich Bilderkennungsmodellen, über das gebündelte docker-compose.yml-Setup.

F: In welche Frameworks kann ich die generierte Benutzeroberfläche exportieren?
A: Reines HTML/CSS, React, Svelte und Web Components werden alle als Exportziele unterstützt.

F: Wo kann ich OpenUI ausprobieren, bevor ich etwas installiere?
A: Die öffentliche Demo ist unter openui.fly.dev verfügbar.

F: Wie passe ich an, welche Modelle OpenUI verwendet?
A: OpenUI generiert automatisch eine LiteLLM-Konfiguration aus deinen Umgebungsvariablen; du kannst auch eine benutzerdefinierte Konfiguration über den Pfad OPENUI_LITELLM_CONFIG oder durch das Ablegen einer Konfigurationsdatei im Arbeitsverzeichnis bereitstellen.

11. Schnelllinks

Repository: github.com/wandb/openui
Backend-Dokumentation: backend/README.md
Issues / Beitrags-Tracker: github.com/wandb/openui/issues
Pull Requests: github.com/wandb/openui/pulls
Live-Demo: openui.fly.dev

12. Zusammenfassung

OpenUI wandelt den mühsamen ersten Schritt der Front-End-Entwicklung — die Übersetzung einer Idee in Markup — in einen konversationellen, nahezu sofortigen Prozess um, der von jedem LLM angetrieben wird, das das Team wählt, ob Cloud oder lokal. Es ist am wertvollsten für Entwickler und Produktteams, die schnell Benutzeroberflächen prototypisieren, LLM-gestützte Design-Workflows evaluieren oder eine vollständig selbst gehostete Alternative zu geschlossenen Text-zu-UI-Tools betreiben möchten, alles unter einer freizügigen Open-Source-Lizenz.