[{"data":1,"prerenderedAt":175},["ShallowReactive",2],{"seo-verification":3,"blog-heberger-openui-vps-ma-fr":6,"promo-bar-likely":166},{"google":4,"bing":5},"EycwPY2XMyTkVzas3n1ygeNJFGAH513qrMjfDljzsMQ","",{"key":7,"data":8},"blog-heberger-openui-vps-ma-fr",{"id":9,"slug":10,"slugs":11,"title":15,"excerpt":16,"readTime":17,"views":18,"isPinned":19,"noindex":19,"publishedAt":20,"updatedAt":21,"category":22,"categories":27,"featuredImage":29,"bgImage":30,"posterImage":31,"relatedSolution":29,"intro":32,"sections":33,"ctaTitle":116,"ctaBody":117,"ctaButton":118,"ctaUrl":119,"relatedPosts":120},23,"heberger-openui-vps",{"fr":10,"en":12,"ar":13,"es":14},"how-to-host-openui-on-a-vps","كيفية-استضافة-openui-على-خادم-vps","como-alojar-openui-en-un-vps","Comment héberger OpenUI sur un VPS","Déployez OpenUI (Wandb) sur un VPS pour générer des composants HTML\u002FTailwind\u002FReact par description textuelle, les rendre en direct et les partager avec votre équipe —.",8,1,false,"2026-05-28T00:00:00+00:00","2026-10-18T21:57:59+00:00",{"id":18,"name":23,"slug":24,"color":25,"icon":26},"Intelligence Artificielle","intelligence-artificielle","bg-purple-500\u002F10 text-purple-400","ia",[28],{"id":18,"name":23,"slug":24,"color":25,"icon":26},null,"\u002Fblog\u002Fcovers\u002Fbg.svg","\u002Fblog\u002Fcovers\u002Fheberger-openui-vps-poster.svg","OpenUI est un outil open source développé par Wandb qui génère des composants d'interface web à partir d'une simple description textuelle, puis les rend en direct dans le navigateur. À ne pas confondre avec Open WebUI (interface de chat pour Ollama\u002FLLM) : OpenUI est un générateur de code UI. Auto-hébergé sur un VPS, il devient un atelier de prototypage UI privé que toute votre équipe peut utiliser sans dépendre d'un service tiers. Voici comment le déployer avec Docker, le brancher sur un modèle, le sécuriser derrière un reverse proxy et le tenir prêt pour un usage en production.",[34,38,48,51,73,76,79,104,107,110,113],{"type":35,"title":36,"body":37},"h2","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\u002FTailwind\u002FReact fonctionnel, rendu instantanément dans le navigateur. Plutôt que de dépendre d'un service en ligne avec des limites de génération et des risques de confidentialité, 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 LLM pour générer le code — vous le pointez soit sur un modèle externe via clé API (OpenAI, Anthropic, Mistral…), 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 : vous décrivez, vous voyez, vous copiez le code dans votre projet.",{"type":39,"title":40,"items":41},"ul","Les bénéfices concrets de l'auto-hébergement",[42,43,44,45,46,47],"Atelier de prototypage UI partagé via une simple URL interne, sans installation côté client.","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.",{"type":35,"title":49,"body":50},"Prérequis matériels et logiciels","OpenUI lui-même est léger : l'application (backend Python + front) tient sur un VPS 2 vCPU \u002F 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 cible : comptez 8 à 16 Go de RAM supplémentaires pour un modèle 7B quantifié (ex. Qwen2.5-Coder-7B-Q4), et jusqu'à 32 Go pour un 13B. Prévoyez quelques Go de disque pour les images Docker et davantage si vous stockez des modèles Ollama (chaque modèle pèse 4 à 8 Go). Côté logiciel : Ubuntu 22.04, Docker et Docker Compose, une clé API de modèle (ou Ollama installé), git, et un sous-domaine configuré type `ui.mondomaine.com` pointant sur votre VPS.",{"type":52,"title":53,"steps":54},"steps","Déploiement pas à pas",[55,58,61,64,67,70],{"title":56,"body":57},"Récupérer le projet","En SSH, clonez le dépôt : `git clone https:\u002F\u002Fgithub.com\u002Fwandb\u002Fopenui` puis placez-vous dans le dossier `backend`. OpenUI fournit un `Dockerfile` et des instructions de build prêtes à l'emploi. Vérifiez la branche courante : `git log --oneline -3` pour vous assurer de partir d'un commit stable.",{"title":59,"body":60},"Choisir le backend de modèle","Pour un modèle externe, renseignez votre clé dans une variable d'environnement (`OPENAI_API_KEY` ou équivalent selon le fournisseur). Pour rester local, installez Ollama (`curl -fsSL https:\u002F\u002Follama.com\u002Finstall.sh | sh`), récupérez un modèle orienté code avec `ollama pull qwen2.5-coder:7b` et pointez OpenUI dessus via `OLLAMA_HOST=http:\u002F\u002Flocalhost:11434`.",{"title":62,"body":63},"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 message indiquant que le serveur est prêt. Si le build échoue sur les dépendances Python, vérifiez que vous utilisez bien la version du `Dockerfile` fournie dans `backend\u002F`.",{"title":65,"body":66},"Vérifier le rendu","Ouvrez `http:\u002F\u002FIP_DU_VPS:7878`, tapez une description de composant (ex. \"un bouton primaire avec icône et état disabled\") et confirmez que le code est généré ET rendu en direct dans le preview. Si la génération échoue avec une erreur de connexion au modèle, vérifiez les logs et assurez-vous que la variable d'environnement de clé est bien injectée.",{"title":68,"body":69},"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.com`. Restreignez l'accès au port brut via le pare-feu (`ufw deny 7878`). Voir la section dédiée ci-dessous pour la configuration Nginx complète.",{"title":71,"body":72},"Partager à l'équipe","Communiquez l'URL `https:\u002F\u002Fui.mondomaine.com` à 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.",{"type":35,"title":74,"body":75},"Configuration nginx et TLS","Voici une configuration nginx minimale pour exposer OpenUI avec Basic Auth et HTTPS. Créez `\u002Fetc\u002Fnginx\u002Fsites-available\u002Fopenui` avec le contenu suivant : définissez un `upstream openui_backend` pointant sur `127.0.0.1:7878`, puis un bloc `server` écoutant sur 443 avec votre certificat (Let's Encrypt via Certbot ou DNS-01). Dans le bloc `location \u002F`, ajoutez `proxy_pass http:\u002F\u002Fopenui_backend`, `proxy_http_version 1.1`, les headers `Upgrade` et `Connection` pour le WebSocket (OpenUI utilise des connexions persistantes pour le rendu temps réel), et `auth_basic` avec un fichier `.htpasswd` généré par `htpasswd -c \u002Fetc\u002Fnginx\u002F.htpasswd user`. Ajoutez un second bloc `server` sur le port 80 qui redirige en 301 vers HTTPS. Activez le site avec `ln -s` dans `sites-enabled` et rechargez nginx. Pensez à bloquer le port 7878 directement : `ufw deny 7878` pour qu'aucun accès non authentifié ne soit possible en contournant le proxy.",{"type":35,"title":77,"body":78},"OpenUI et Open WebUI : deux outils à ne pas confondre","La confusion est fréquente dans les recherches et les discussions : OpenUI (par Wandb\u002FW&B) et Open WebUI sont deux projets distincts avec des usages très différents. OpenUI génère du code de composants d'interface utilisateur à partir d'une description textuelle — c'est un outil de prototypage et de génération de code front-end. Open WebUI est une interface de chat web pour interagir avec des LLM (Ollama, OpenAI…), proche de ce que propose ChatGPT mais en auto-hébergé. Pour résumer : si vous voulez créer des composants UI par description, c'est OpenUI. Si vous voulez une interface de chat pour vos modèles locaux, c'est Open WebUI. Les deux peuvent cohabiter sur le même VPS et partager le même backend Ollama — ils se complètent sans se concurrencer.",{"type":80,"title":81,"headers":82,"rows":85},"comparison","OpenUI vs Open WebUI : quel outil pour quel usage ?",[83,84],"OpenUI (Wandb)","Open WebUI",[86,89,92,95,98,101],[87,88],"Génère des composants HTML\u002FTailwind\u002FReact\u002FSvelte","Interface de chat web pour LLM (type ChatGPT self-hosted)",[90,91],"Rendu visuel en direct dans le navigateur","Gestion multi-modèles, RAG, historique de conversations",[93,94],"Export du code source prêt à intégrer","Idéal pour l'assistance, la recherche, les tâches générales",[96,97],"Idéal pour le prototypage UI et la génération de code front","Nécessite Ollama ou une API OpenAI-compatible",[99,100],"Nécessite un LLM (API externe ou Ollama local)","Gestion des utilisateurs et des rôles intégrée",[102,103],"Port par défaut : 7878","Port par défaut : 3000",{"type":35,"title":105,"body":106},"Configuration avancée avec docker-compose","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. Définissez deux services : `ollama` (image `ollama\u002Follama`) et `openui` (image buildée depuis `.\u002Fbackend`). Ajoutez un réseau personnalisé `ai_net` et rattachez les deux services à ce réseau. Dans les variables d'environnement d'OpenUI, pointez le backend sur `http:\u002F\u002Follama:11434` — le DNS Docker résout le nom du service automatiquement, sans jamais exposer Ollama sur Internet. Côté qualité de génération, un modèle orienté code (Qwen2.5-Coder, CodeLlama) donne de recommandé composants Tailwind\u002FReact qu'un modèle généraliste de même taille. Testez plusieurs et gardez celui dont le rendu est le plus fidèle à vos prompts. Pour activer la persistance des sessions et des préférences utilisateur, montez un volume Docker sur le répertoire de données d'OpenUI (`\u002Fapp\u002F.openui`) afin de conserver la configuration entre les redémarrages.",{"type":35,"title":108,"body":109},"Variables d'environnement et authentification en production","OpenUI reconnaît plusieurs variables d'environnement utiles pour un déploiement sécurisé. `OPENAI_API_KEY` : clé pour les modèles OpenAI-compatibles (OpenAI, Mistral, Groq…). `ANTHROPIC_API_KEY` : pour les modèles Claude d'Anthropic. `OLLAMA_HOST` : URL du backend Ollama (ex. `http:\u002F\u002Follama:11434` en Docker Compose). `HOST` et `PORT` : adresse d'écoute interne (laissez `0.0.0.0:7878` derrière le proxy). Ne stockez jamais vos clés API en clair dans le `docker-compose.yml` : utilisez un fichier `.env` (ajouté à `.gitignore`) ou un gestionnaire de secrets. L'authentification native d'OpenUI étant limitée, privilégiez la Basic Auth nginx pour un accès équipe restreint, ou un proxy d'identité (Authelia, Authentik) si vous avez besoin de SSO et de logs d'accès par utilisateur.",{"type":35,"title":111,"body":112},"Dépannage : erreurs courantes","Voici les problèmes rencontrés le plus souvent lors du déploiement d'OpenUI sur VPS. **Port 7878 inaccessible** : vérifiez que le pare-feu laisse passer le port temporairement pour les tests (`ufw allow 7878`) ou testez depuis le VPS lui-même avec `curl http:\u002F\u002Flocalhost:7878`. **Erreur de connexion au modèle** : vérifiez que la variable d'environnement de clé est bien injectée (`docker compose exec openui env | grep API`). Si vous utilisez Ollama local, vérifiez qu'il est démarré et accessible (`curl http:\u002F\u002Flocalhost:11434\u002Fapi\u002Ftags`). **Build Docker qui échoue** : assurez-vous de builder depuis le dossier `backend\u002F` et non depuis la racine du dépôt. **Preview vide après génération** : OpenUI utilise WebSocket pour le rendu temps réel — vérifiez que votre configuration nginx passe bien les headers `Upgrade: websocket` et `Connection: Upgrade`. **Mémoire insuffisante avec Ollama** : si le conteneur est tué (OOMKilled), réduisez la taille du modèle (passer à un 3B ou 7B quantifié Q4) ou augmentez la RAM de votre VPS.",{"type":114,"body":115},"tip","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:\u002F\u002Follama: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 recommandé composants Tailwind\u002FReact 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.","Prototypez vos interfaces sur un VPS Cloud ServOrbit","Déployez OpenUI (et Ollama si vous le souhaitez) sur un VPS Cloud avec Docker préconfiguré. Un atelier de génération d'UI privé, partageable et disponible en continu.","Découvrir le VPS Cloud","\u002Fvps-cloud",[121,138,156],{"id":18,"slug":122,"slugs":123,"title":127,"excerpt":128,"readTime":129,"views":18,"isPinned":19,"noindex":19,"publishedAt":130,"updatedAt":131,"category":132,"categories":133,"featuredImage":29,"bgImage":30,"posterImage":135,"relatedSolution":136},"heberger-open-webui",{"fr":122,"en":124,"ar":125,"es":126},"how-to-host-open-webui-on-a-vps","كيفية-استضافة-open-webui-على-خادم-vps","como-alojar-open-webui-en-un-vps","Comment héberger Open WebUI sur un VPS","Déployez Open WebUI sur votre propre VPS : gardez le contrôle de vos données, évitez les coûts des API cloud et accédez à vos LLMs depuis une interface web propre.",9,"2026-06-01T00:00:00+00:00","2026-11-09T20:55:18+00:00",{"id":18,"name":23,"slug":24,"color":25,"icon":26},[134],{"id":18,"name":23,"slug":24,"color":25,"icon":26},"\u002Fblog\u002Fcovers\u002Fheberger-open-webui-poster.svg",{"categorySlug":26,"appSlug":137},"open-webui",{"id":139,"slug":140,"slugs":141,"title":145,"excerpt":146,"readTime":147,"views":18,"isPinned":19,"noindex":19,"publishedAt":148,"updatedAt":149,"category":150,"categories":151,"featuredImage":29,"bgImage":30,"posterImage":153,"relatedSolution":154},2,"deployer-dify-vps",{"fr":140,"en":142,"ar":143,"es":144},"deploying-dify-on-a-vps-ai-workflows-under-control","نشر-dify-على-vps-سير-عمل-الذكاء-الاصطناعي-تحت-السيطرة","desplegar-dify-en-un-vps","Déployer Dify sur un VPS : guide de l'installation aux plugins","Installez Dify sur un VPS ServOrbit : prérequis, Docker Compose, plugins offline, limites de l'installation Docker, sauvegarde avant mise à jour, dépannage.",15,"2026-02-11T00:00:00+00:00","2026-10-29T03:10:23+00:00",{"id":18,"name":23,"slug":24,"color":25,"icon":26},[152],{"id":18,"name":23,"slug":24,"color":25,"icon":26},"\u002Fblog\u002Fcovers\u002Fdeployer-dify-vps-poster.svg",{"categorySlug":24,"appSlug":155},"dify",{"id":157,"slug":158,"slugs":159,"title":163,"excerpt":164,"readTime":165,"views":18,"isPinned":19,"noindex":166,"publishedAt":167,"updatedAt":168,"category":169,"categories":170,"featuredImage":29,"bgImage":30,"posterImage":172,"relatedSolution":173},121,"heberger-openclaw-vps",{"fr":158,"en":160,"ar":161,"es":162},"hosting-openclaw-on-a-vps","استضافة-openclaw-على-خادم-vps","alojar-openclaw-en-un-vps","Héberger OpenClaw sur un VPS","Hébergez OpenClaw sur votre VPS : l'assistant IA personnel open source joignable depuis WhatsApp, Telegram, Discord et 50+ messageries. Docker, LLM et HTTPS.",4,true,"2026-02-23T00:00:00+00:00","2026-11-09T20:55:19+00:00",{"id":18,"name":23,"slug":24,"color":25,"icon":26},[171],{"id":18,"name":23,"slug":24,"color":25,"icon":26},"\u002Fblog\u002Fcovers\u002Fheberger-openclaw-vps-poster.svg",{"categorySlug":26,"appSlug":174},"openclaw",1794270727427]