[{"data":1,"prerenderedAt":176},["ShallowReactive",2],{"seo-verification":3,"blog-how-to-host-openui-on-a-vps-ma-en":6,"promo-bar-likely":167},{"google":4,"bing":5},"EycwPY2XMyTkVzas3n1ygeNJFGAH513qrMjfDljzsMQ","",{"key":7,"data":8},"blog-how-to-host-openui-on-a-vps-ma-en",{"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,"how-to-host-openui-on-a-vps",{"fr":12,"en":10,"ar":13,"es":14},"heberger-openui-vps","كيفية-استضافة-openui-على-خادم-vps","como-alojar-openui-en-un-vps","How to host OpenUI on a VPS","Deploy OpenUI (by Wandb) on a VPS to generate HTML\u002FTailwind\u002FReact components from text descriptions, render them live and share them with your team — complete Docker,.",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},"Artificial Intelligence","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 is an open-source tool developed by Wandb that generates web interface components from a simple text description, then renders them live in the browser. Not to be confused with Open WebUI (a chat interface for Ollama\u002FLLM): OpenUI is a UI code generator. Self-hosted on a VPS, it becomes a private UI prototyping workshop that your whole team can use without depending on a third-party service. Here is how to deploy it with Docker, connect it to a model, secure it behind a reverse proxy and keep it ready for production use.",[34,38,48,51,73,76,79,104,107,110,113],{"type":35,"title":36,"body":37},"h2","Why self-host OpenUI on a VPS","OpenUI is aimed at front-end developers and designers who want to turn an idea (\"a login form with a blue button and a forgotten-password option\") into functional HTML\u002FTailwind\u002FReact code, rendered instantly in the browser. Rather than depending on an online service with generation limits and privacy risks, hosting it on your VPS gives you a permanent endpoint, shareable via an internal link, where anyone can prototype without a local installation. Key point: OpenUI needs an LLM to generate the code — you point it either to an external model via API key (OpenAI, Anthropic, Mistral…), or to a local Ollama running on the same VPS, which keeps the entire chain in-house. The real-time rendering of components hugely accelerates mock-up iterations: describe, see, copy the code into your project.",{"type":39,"title":40,"items":41},"ul","The concrete benefits of self-hosting",[42,43,44,45,46,47],"UI prototyping workshop shared via a simple internal URL, no client-side installation.","Live rendering of the generated components (HTML, Tailwind, React, Svelte).","Choice of model backend: external API key or 100% local Ollama.","No generation limit imposed by a third-party service.","Clean code export, ready to copy into your project codebase.","Confidentiality of client briefs and mock-ups kept on your VPS.",{"type":35,"title":49,"body":50},"Hardware and software prerequisites","OpenUI itself is lightweight: the application (Python backend + front) fits on a 2 vCPU \u002F 2 to 4 GB RAM VPS if you use an external API key for the model. If you want to keep everything local with Ollama on the same machine, size it according to the target model: count on 8 to 16 GB of additional RAM for a quantized 7B model (e.g. Qwen2.5-Coder-7B-Q4), and up to 32 GB for a 13B. Plan for a few GB of disk for Docker images and more if you store Ollama models (each model weighs 4 to 8 GB). On the software side: Ubuntu 22.04, Docker and Docker Compose, a model API key (or Ollama installed), git, and a configured subdomain like `ui.mydomain.com` pointing to your VPS.",{"type":52,"title":53,"steps":54},"steps","Step-by-step deployment",[55,58,61,64,67,70],{"title":56,"body":57},"Grab the project","Via SSH, clone the repository: `git clone https:\u002F\u002Fgithub.com\u002Fwandb\u002Fopenui` then move into the `backend` folder. OpenUI provides a `Dockerfile` and ready-to-use build instructions. Check the current branch: `git log --oneline -3` to make sure you are starting from a stable commit.",{"title":59,"body":60},"Choose the model backend","For an external model, fill in your key in an environment variable (`OPENAI_API_KEY` or equivalent depending on the provider). To stay local, install Ollama (`curl -fsSL https:\u002F\u002Follama.com\u002Finstall.sh | sh`), pull a code-oriented model with `ollama pull qwen2.5-coder:7b` and point OpenUI to it via `OLLAMA_HOST=http:\u002F\u002Flocalhost:11434`.",{"title":62,"body":63},"Build and run the container","Build the image then start: `docker compose up -d`. OpenUI exposes port `7878` by default. Follow the startup with `docker compose logs -f` until you see the server ready message. If the build fails on Python dependencies, make sure you are using the `Dockerfile` provided in `backend\u002F`.",{"title":65,"body":66},"Check the rendering","Open `http:\u002F\u002FVPS_IP:7878`, type a component description (e.g. \"a primary button with icon and disabled state\") and confirm that the code is generated AND rendered live in the preview. If generation fails with a model connection error, check the logs and ensure the API key environment variable is properly injected.",{"title":68,"body":69},"Secure behind a reverse proxy","OpenUI has no strong authentication by default: place Caddy or Nginx in front of port 7878 with Basic Auth, and enable automatic SSL for `ui.mydomain.com`. Restrict access to the raw port via the firewall (`ufw deny 7878`). See the dedicated section below for the full Nginx configuration.",{"title":71,"body":72},"Share with the team","Communicate the URL `https:\u002F\u002Fui.mydomain.com` to your developers and designers. Everyone can prototype from their browser without installing anything, and copy the generated code directly into the project.",{"type":35,"title":74,"body":75},"Nginx configuration and TLS","Here is a minimal nginx configuration to expose OpenUI with Basic Auth and HTTPS. Create `\u002Fetc\u002Fnginx\u002Fsites-available\u002Fopenui` with: an `upstream openui_backend` pointing to `127.0.0.1:7878`, then a `server` block listening on 443 with your certificate (Let's Encrypt via Certbot or DNS-01). In the `location \u002F` block, add `proxy_pass http:\u002F\u002Fopenui_backend`, `proxy_http_version 1.1`, the `Upgrade` and `Connection` headers for WebSocket (OpenUI uses persistent connections for real-time rendering), and `auth_basic` with a `.htpasswd` file generated by `htpasswd -c \u002Fetc\u002Fnginx\u002F.htpasswd user`. Add a second `server` block on port 80 that 301-redirects to HTTPS. Enable the site with `ln -s` in `sites-enabled` and reload nginx. Remember to block port 7878 directly: `ufw deny 7878` so that no unauthenticated access is possible by bypassing the proxy.",{"type":35,"title":77,"body":78},"OpenUI vs Open WebUI: two tools not to confuse","The confusion is frequent in searches and discussions: OpenUI (by Wandb\u002FW&B) and Open WebUI are two distinct projects with very different uses. OpenUI generates user interface component code from a text description — it is a prototyping and front-end code generation tool. Open WebUI is a web chat interface for interacting with LLMs (Ollama, OpenAI…), similar to what ChatGPT offers but self-hosted. To summarize: if you want to create UI components by description, use OpenUI. If you want a chat interface for your local models, use Open WebUI. Both can coexist on the same VPS and share the same Ollama backend — they complement each other without competing.",{"type":80,"title":81,"headers":82,"rows":85},"comparison","OpenUI vs Open WebUI: which tool for which use case?",[83,84],"OpenUI (Wandb)","Open WebUI",[86,89,92,95,98,101],[87,88],"Generates HTML\u002FTailwind\u002FReact\u002FSvelte components","Web chat interface for LLMs (self-hosted ChatGPT-style)",[90,91],"Live visual rendering in the browser","Multi-model management, RAG, conversation history",[93,94],"Ready-to-integrate source code export","Ideal for assistance, research, general tasks",[96,97],"Ideal for UI prototyping and front-end code generation","Requires Ollama or an OpenAI-compatible API",[99,100],"Requires an LLM (external API or local Ollama)","Built-in user and role management",[102,103],"Default port: 7878","Default port: 3000",{"type":35,"title":105,"body":106},"Advanced configuration with docker-compose","For a fully sovereign chain, have OpenUI and Ollama coexist in the same `docker-compose.yml` on an internal Docker network. Define two services: `ollama` (image `ollama\u002Follama`) and `openui` (image built from `.\u002Fbackend`). Add a custom `ai_net` network and attach both services to it. In OpenUI's environment variables, point the backend to `http:\u002F\u002Follama:11434` — Docker DNS resolves the service name automatically, without ever exposing Ollama to the Internet. For generation quality, a code-oriented model (Qwen2.5-Coder, CodeLlama) gives far better Tailwind\u002FReact components than a generalist model of the same size. Test several and keep the one whose rendering is most faithful to your prompts. To enable session and user preference persistence, mount a Docker volume on OpenUI's data directory (`\u002Fapp\u002F.openui`) to preserve configuration between restarts.",{"type":35,"title":108,"body":109},"Environment variables and authentication in production","OpenUI recognizes several environment variables useful for a secure deployment. `OPENAI_API_KEY`: key for OpenAI-compatible models (OpenAI, Mistral, Groq…). `ANTHROPIC_API_KEY`: for Anthropic's Claude models. `OLLAMA_HOST`: Ollama backend URL (e.g. `http:\u002F\u002Follama:11434` in Docker Compose). `HOST` and `PORT`: internal listening address (leave `0.0.0.0:7878` behind the proxy). Never store your API keys in plain text in `docker-compose.yml`: use a `.env` file (added to `.gitignore`) or a secrets manager. Since OpenUI's native authentication is limited, prefer nginx Basic Auth for restricted team access, or an identity proxy (Authelia, Authentik) if you need SSO and per-user access logs.",{"type":35,"title":111,"body":112},"Troubleshooting: common errors","Here are the most common issues encountered when deploying OpenUI on a VPS. **Port 7878 unreachable**: check that the firewall temporarily allows the port for testing (`ufw allow 7878`) or test from the VPS itself with `curl http:\u002F\u002Flocalhost:7878`. **Model connection error**: verify that the API key environment variable is properly injected (`docker compose exec openui env | grep API`). If using local Ollama, check that it is running and accessible (`curl http:\u002F\u002Flocalhost:11434\u002Fapi\u002Ftags`). **Docker build fails**: make sure you build from the `backend\u002F` folder, not from the repository root. **Empty preview after generation**: OpenUI uses WebSocket for real-time rendering — verify that your nginx configuration passes the `Upgrade: websocket` and `Connection: Upgrade` headers. **Insufficient memory with Ollama**: if the container is killed (OOMKilled), reduce the model size (switch to a 3B or Q4-quantized 7B) or increase your VPS RAM.",{"type":114,"body":115},"tip","For a fully sovereign chain, have OpenUI and Ollama coexist in the same `docker-compose.yml` on an internal Docker network: OpenUI calls Ollama via `http:\u002F\u002Follama:11434` without ever exposing the LLM to the Internet. On the generation-quality side, a code-oriented model (CodeLlama, Qwen2.5-Coder) produces far better Tailwind\u002FReact components than a generalist model of the same size — test several and keep the one whose rendering is most faithful to your prompts.","Prototype your interfaces on a ServOrbit Cloud VPS","Deploy OpenUI (and Ollama if you wish) on a Cloud VPS with preconfigured Docker. A private, shareable UI-generation workshop, continuously available.","Discover the Cloud VPS","\u002Fvps-cloud",[121,139,157],{"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},"how-to-host-open-webui-on-a-vps",{"fr":124,"en":122,"ar":125,"es":126},"heberger-open-webui","كيفية-استضافة-open-webui-على-خادم-vps","como-alojar-open-webui-en-un-vps","How to Host Open WebUI on a VPS","A complete guide to deploying Open WebUI on your own VPS. Keep control of your data, avoid cloud API costs, and access your LLMs from a clean web interface.",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":137,"appSlug":138},"artificial-intelligence","open-webui",{"id":140,"slug":141,"slugs":142,"title":146,"excerpt":147,"readTime":148,"views":18,"isPinned":19,"noindex":19,"publishedAt":149,"updatedAt":150,"category":151,"categories":152,"featuredImage":29,"bgImage":30,"posterImage":154,"relatedSolution":155},2,"deploying-dify-on-a-vps-ai-workflows-under-control",{"fr":143,"en":141,"ar":144,"es":145},"deployer-dify-vps","نشر-dify-على-vps-سير-عمل-الذكاء-الاصطناعي-تحت-السيطرة","desplegar-dify-en-un-vps","Deploy Dify on a VPS: Complete Guide from Installation to Plugins","Install Dify on a ServOrbit VPS: requirements, Docker Compose, offline plugins, known Docker limits, backup before upgrading, and troubleshooting.",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},[153],{"id":18,"name":23,"slug":24,"color":25,"icon":26},"\u002Fblog\u002Fcovers\u002Fdeployer-dify-vps-poster.svg",{"categorySlug":24,"appSlug":156},"dify",{"id":158,"slug":159,"slugs":160,"title":164,"excerpt":165,"readTime":166,"views":18,"isPinned":19,"noindex":167,"publishedAt":168,"updatedAt":169,"category":170,"categories":171,"featuredImage":29,"bgImage":30,"posterImage":173,"relatedSolution":174},121,"hosting-openclaw-on-a-vps",{"fr":161,"en":159,"ar":162,"es":163},"heberger-openclaw-vps","استضافة-openclaw-على-خادم-vps","alojar-openclaw-en-un-vps","Hosting OpenClaw on a VPS","Host OpenClaw on your VPS: the open source personal AI assistant reachable from WhatsApp, Telegram, Discord and 50+ messaging apps. Docker, LLM setup and 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},[172],{"id":18,"name":23,"slug":24,"color":25,"icon":26},"\u002Fblog\u002Fcovers\u002Fheberger-openclaw-vps-poster.svg",{"categorySlug":137,"appSlug":175},"openclaw",1794270427467]