Pourquoi auto-héberger OpenUI sur un VPS
OpenUI s'adresse aux développeurs front-end et aux designers qui veulent transformer une idée ("un formulaire de connexion avec un bouton bleu et une option mot de passe oublié") en code HTML/Tailwind/React fonctionnel, rendu instantanément. Plutôt que de dépendre d'un service en ligne, l'héberger sur votre VPS vous donne un endpoint permanent, partageable par lien interne, où chacun peut prototyper sans installation locale. Point clé : OpenUI a besoin d'un modèle pour générer le code — vous le pointez soit sur un LLM externe via clé API, soit sur un Ollama local tournant sur le même VPS, ce qui garde toute la chaîne en interne. Le rendu temps réel des composants accélère énormément les itérations de maquettage.
Les bénéfices concrets de l'auto-hébergement
- Atelier de prototypage UI partagé via une simple URL interne.
- Rendu en direct des composants générés (HTML, Tailwind, React, Svelte).
- Choix du backend de modèle : clé API externe ou Ollama 100% local.
- Aucune limite de générations imposée par un service tiers.
- Export du code propre, prêt à copier dans votre base de projet.
- Confidentialité des briefs et maquettes clients restés sur votre VPS.
Prérequis matériels et logiciels
OpenUI lui-même est léger : l'application (backend Python + front) tient sur un VPS 2 vCPU / 2 à 4 Go de RAM si vous utilisez une clé API externe pour le modèle. En revanche, si vous voulez tout garder local avec Ollama sur la même machine, dimensionnez selon le modèle : comptez alors 8 à 16 Go de RAM supplémentaires pour un modèle 7B quantifié. Prévoyez quelques Go de disque pour les images Docker (et davantage si vous stockez des modèles Ollama). Côté logiciel : Ubuntu 22.04, Docker et Docker Compose, une clé API de modèle (ou Ollama installé), et un sous-domaine type ui.mondomaine.ma.
Déploiement pas à pas
Récupérer le projet
En SSH, clonez le dépôt : git clone https://github.com/wandb/openui puis placez-vous dans le dossier backend. OpenUI fournit un Dockerfile et des instructions de build prêtes à l'emploi.
Choisir le backend de modèle
Pour un modèle externe, renseignez votre clé dans une variable d'environnement (OPENAI_API_KEY ou équivalent). Pour rester local, installez Ollama (curl -fsSL https://ollama.com/install.sh | sh), récupérez un modèle avec ollama pull llama3 et pointez OpenUI dessus.
Construire et lancer le conteneur
Buildez l'image puis démarrez : docker compose up -d. OpenUI expose par défaut le port 7878. Suivez le démarrage avec docker compose logs -f jusqu'à voir le serveur prêt.
Vérifier le rendu
Ouvrez http://IP_DU_VPS:7878, tapez une description de composant et confirmez que le code est généré ET rendu en direct. Si la génération échoue, vérifiez la connexion au modèle dans les logs.
Sécuriser derrière un reverse proxy
OpenUI n'a pas d'authentification forte par défaut : placez Caddy ou Nginx devant le port 7878 avec une Basic Auth, et activez le SSL automatique pour ui.mondomaine.ma. Restreignez l'accès au port brut via le pare-feu (ufw deny 7878).
Partager à l'équipe
Communiquez l'URL https://ui.mondomaine.ma à vos développeurs et designers. Chacun peut prototyper depuis son navigateur sans rien installer, et copier le code généré directement dans le projet.
Pour une chaîne entièrement souveraine, faites cohabiter OpenUI et Ollama dans le même docker-compose.yml sur un réseau Docker interne : OpenUI appelle Ollama via http://ollama:11434 sans jamais exposer le LLM sur Internet. Côté qualité de génération, un modèle orienté code (CodeLlama, Qwen2.5-Coder) donne de bien meilleurs composants Tailwind/React qu'un modèle généraliste de même taille — testez-en plusieurs et gardez celui dont le rendu est le plus fidèle à vos prompts.
