Por qué autoalojar OpenUI en un VPS
OpenUI está pensado para los desarrolladores front-end y los diseñadores que quieren convertir una idea («un formulario de inicio de sesión con un botón azul y una opción de contraseña olvidada») en código HTML/Tailwind/React funcional, renderizado al instante en el navegador. En lugar de depender de un servicio en línea con límites de generación y riesgos de privacidad, alojarlo en su VPS le da un endpoint permanente, compartible mediante un enlace interno, donde cada uno puede prototipar sin instalación local. Punto clave: OpenUI necesita un LLM para generar el código — usted lo apunta o bien a un modelo externo mediante clave API (OpenAI, Anthropic, Mistral…), o bien a un Ollama local que corre en el mismo VPS, lo que mantiene toda la cadena en casa. El renderizado en tiempo real de los componentes acelera enormemente las iteraciones de maquetado.
Los beneficios concretos del autoalojamiento
- Taller de prototipado de interfaces compartido mediante una simple URL interna, sin instalación en el cliente.
- Renderizado en directo de los componentes generados (HTML, Tailwind, React, Svelte).
- Elección del backend de modelo: clave API externa u Ollama 100% local.
- Ningún límite de generaciones impuesto por un servicio de terceros.
- Exportación de código limpio, listo para copiar en la base de su proyecto.
- Confidencialidad de los briefs y de las maquetas de clientes, que permanecen en su VPS.
Requisitos de hardware y software
OpenUI en sí mismo es ligero: la aplicación (backend Python + front) cabe en un VPS de 2 vCPU y 2 a 4 GB de RAM si utiliza una clave API externa para el modelo. Si quiere mantenerlo todo en local con Ollama en la misma máquina, dimensione según el modelo objetivo: calcule entonces de 8 a 16 GB de RAM adicionales para un modelo 7B cuantizado (ej. Qwen2.5-Coder-7B-Q4), y hasta 32 GB para un 13B. Prevea unos cuantos GB de disco para las imágenes Docker (y más si almacena modelos de Ollama — cada modelo pesa entre 4 y 8 GB). En cuanto al software: Ubuntu 22.04, Docker y Docker Compose, una clave API de modelo (u Ollama instalado), git y un subdominio configurado del tipo ui.midominio.com apuntando a su VPS.
Despliegue paso a paso
Obtener el proyecto
Por SSH, clone el repositorio:
git clone https://github.com/wandb/openuiy sitúese después en la carpetabackend. OpenUI proporciona unDockerfilee instrucciones de build listas para usar. Verifique la rama actual:git log --oneline -3para asegurarse de partir de un commit estable.Elegir el backend de modelo
Para un modelo externo, indique su clave en una variable de entorno (
OPENAI_API_KEYo equivalente según el proveedor). Para permanecer en local, instale Ollama (curl -fsSL https://ollama.com/install.sh | sh), descargue un modelo orientado a código conollama pull qwen2.5-coder:7by apunte OpenUI hacia él medianteOLLAMA_HOST=http://localhost:11434.Construir y arrancar el contenedor
Construya la imagen y después inicie:
docker compose up -d. OpenUI expone por defecto el puerto7878. Siga el arranque condocker compose logs -fhasta ver el mensaje de servidor listo. Si el build falla en las dependencias de Python, asegúrese de usar elDockerfileque se encuentra enbackend/.Verificar el renderizado
Abra
http://IP_VPS:7878, escriba una descripción de componente (ej. «un botón primario con icono y estado deshabilitado») y confirme que el código se genera Y se renderiza en directo en la vista previa. Si la generación falla con un error de conexión al modelo, compruebe los logs y asegúrese de que la variable de entorno de la clave API está correctamente inyectada.Proteger detrás de un reverse proxy
OpenUI no tiene autenticación fuerte por defecto: coloque Caddy o Nginx delante del puerto 7878 con una Basic Auth y active el SSL automático para
ui.midominio.com. Restrinja el acceso al puerto en bruto mediante el firewall (ufw deny 7878). Consulte la sección dedicada más abajo para la configuración completa de Nginx.Compartir con el equipo
Comunique la URL
https://ui.midominio.coma sus desarrolladores y diseñadores. Cada uno puede prototipar desde su navegador sin instalar nada, y copiar el código generado directamente en el proyecto.
Configuración de nginx y TLS
Aquí tiene una configuración mínima de nginx para exponer OpenUI con Basic Auth y HTTPS. Cree /etc/nginx/sites-available/openui con: un upstream openui_backend apuntando a 127.0.0.1:7878, y un bloque server escuchando en el puerto 443 con su certificado (Let's Encrypt mediante Certbot o DNS-01). En el bloque location /, añada proxy_pass http://openui_backend, proxy_http_version 1.1, las cabeceras Upgrade y Connection para WebSocket (OpenUI usa conexiones persistentes para el renderizado en tiempo real), y auth_basic con un fichero .htpasswd generado por htpasswd -c /etc/nginx/.htpasswd user. Añada un segundo bloque server en el puerto 80 que redirija con un 301 a HTTPS. Active el sitio con ln -s en sites-enabled y recargue nginx. Recuerde bloquear el puerto 7878 directamente: ufw deny 7878 para que ningún acceso no autenticado sea posible saltándose el proxy.
OpenUI frente a Open WebUI: dos herramientas que no hay que confundir
La confusión es frecuente en las búsquedas y los debates: OpenUI (de Wandb/W&B) y Open WebUI son dos proyectos distintos con usos muy diferentes. OpenUI genera código de componentes de interfaz de usuario a partir de una descripción textual — es una herramienta de prototipado y generación de código front-end. Open WebUI es una interfaz de chat web para interactuar con LLM (Ollama, OpenAI…), similar a lo que ofrece ChatGPT pero autoalojado. En resumen: si quiere crear componentes de UI mediante descripción, use OpenUI. Si quiere una interfaz de chat para sus modelos locales, use Open WebUI. Ambos pueden coexistir en el mismo VPS y compartir el mismo backend de Ollama — se complementan sin competir.
OpenUI vs Open WebUI: ¿qué herramienta para qué caso de uso?
Desplace la tabla
| OpenUI (Wandb) | Open WebUI |
|---|---|
| Genera componentes HTML/Tailwind/React/Svelte | Interfaz de chat web para LLM (tipo ChatGPT autoalojado) |
| Renderizado visual en directo en el navegador | Gestión multi-modelo, RAG, historial de conversaciones |
| Exportación del código fuente listo para integrar | Ideal para asistencia, investigación y tareas generales |
| Ideal para prototipado de UI y generación de código front-end | Requiere Ollama o una API compatible con OpenAI |
| Requiere un LLM (API externa u Ollama local) | Gestión de usuarios y roles integrada |
| Puerto por defecto: 7878 | Puerto por defecto: 3000 |
Configuración avanzada con docker-compose
Para una cadena completamente soberana, haga convivir OpenUI y Ollama en el mismo docker-compose.yml sobre una red Docker interna. Defina dos servicios: ollama (imagen ollama/ollama) y openui (imagen construida desde ./backend). Añada una red personalizada ai_net y adjunte ambos servicios a ella. En las variables de entorno de OpenUI, apunte el backend a http://ollama:11434 — el DNS de Docker resuelve el nombre del servicio automáticamente sin exponer nunca Ollama a Internet. En cuanto a la calidad de generación, un modelo orientado a código (Qwen2.5-Coder, CodeLlama) da componentes Tailwind/React mucho mejores que un modelo generalista del mismo tamaño. Pruebe varios y quédese con aquel cuyo renderizado sea más fiel a sus prompts. Para activar la persistencia de sesiones y preferencias de usuario, monte un volumen Docker en el directorio de datos de OpenUI (/app/.openui) con el fin de conservar la configuración entre reinicios.
Variables de entorno y autenticación en producción
OpenUI reconoce varias variables de entorno útiles para un despliegue seguro. OPENAI_API_KEY: clave para modelos compatibles con OpenAI (OpenAI, Mistral, Groq…). ANTHROPIC_API_KEY: para los modelos Claude de Anthropic. OLLAMA_HOST: URL del backend de Ollama (ej. http://ollama:11434 en Docker Compose). HOST y PORT: dirección de escucha interna (deje 0.0.0.0:7878 detrás del proxy). Nunca almacene sus claves API en texto plano en docker-compose.yml: use un fichero .env (añadido a .gitignore) o un gestor de secretos. Como la autenticación nativa de OpenUI es limitada, prefiera la Basic Auth de nginx para un acceso restringido al equipo, o un proxy de identidad (Authelia, Authentik) si necesita SSO y registros de acceso por usuario.
Solución de problemas: errores más comunes
Estos son los problemas más frecuentes al desplegar OpenUI en un VPS. Puerto 7878 inaccesible: compruebe que el firewall permita el puerto temporalmente para las pruebas (ufw allow 7878) o pruebe desde el propio VPS con curl http://localhost:7878. Error de conexión al modelo: verifique que la variable de entorno de la clave API está correctamente inyectada (docker compose exec openui env | grep API). Si usa Ollama local, compruebe que está en marcha y accesible (curl http://localhost:11434/api/tags). Fallo del build de Docker: asegúrese de construir desde la carpeta backend/, no desde la raíz del repositorio. Vista previa vacía tras la generación: OpenUI usa WebSocket para el renderizado en tiempo real — verifique que su configuración de nginx pase las cabeceras Upgrade: websocket y Connection: Upgrade. Memoria insuficiente con Ollama: si el contenedor es eliminado (OOMKilled), reduzca el tamaño del modelo (pase a un 3B o un 7B cuantizado Q4) o aumente la RAM de su VPS.
Para una cadena totalmente soberana, haga convivir OpenUI y Ollama en el mismo docker-compose.yml sobre una red Docker interna: OpenUI llama a Ollama vía http://ollama:11434 sin exponer nunca el LLM a Internet. En cuanto a la calidad de generación, un modelo orientado a código (CodeLlama, Qwen2.5-Coder) da componentes Tailwind/React mucho mejores que un modelo generalista del mismo tamaño — pruebe varios y quédese con aquel cuyo renderizado sea más fiel a sus prompts.