Tutorial

Cómo alojar OpenUI en un VPS

Inteligencia Artificial8 min de lectura6 pasos

OpenUI es una herramienta open source desarrollada por Wandb que genera componentes de interfaz web a partir de una simple descripción textual y después los renderiza en directo en el navegador. No hay que confundirla con Open WebUI (una interfaz de chat para Ollama/LLM): OpenUI es un generador de código de interfaz de usuario. Autoalojada en un VPS, se convierte en un taller de prototipado de interfaces privado que todo su equipo puede usar sin depender de ningún servicio externo. Le mostramos cómo desplegarla con Docker, conectarla a un modelo, protegerla detrás de un reverse proxy y tenerla lista para uso en producción.

Contenido· Por qué autoalojar OpenUI en un VPS1/10
  1. 01Por qué autoalojar OpenUI en un VPS
  2. 02Los beneficios concretos del autoalojamiento
  3. 03Requisitos de hardware y software
  4. 04Despliegue paso a paso
  5. 05Configuración de nginx y TLS
  6. 06OpenUI frente a Open WebUI: dos herramientas que no hay que confundir
  7. 07OpenUI vs Open WebUI: ¿qué herramienta para qué caso de uso?
  8. 08Configuración avanzada con docker-compose
  9. 09Variables de entorno y autenticación en producción
  10. 10Solución de problemas: errores más comunes

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

  1. Obtener el proyecto

    Por SSH, clone el repositorio: git clone https://github.com/wandb/openui y sitúese después en la carpeta backend. OpenUI proporciona un Dockerfile e instrucciones de build listas para usar. Verifique la rama actual: git log --oneline -3 para asegurarse de partir de un commit estable.

  2. Elegir el backend de modelo

    Para un modelo externo, indique su clave en una variable de entorno (OPENAI_API_KEY o 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 con ollama pull qwen2.5-coder:7b y apunte OpenUI hacia él mediante OLLAMA_HOST=http://localhost:11434.

  3. Construir y arrancar el contenedor

    Construya la imagen y después inicie: docker compose up -d. OpenUI expone por defecto el puerto 7878. Siga el arranque con docker compose logs -f hasta ver el mensaje de servidor listo. Si el build falla en las dependencias de Python, asegúrese de usar el Dockerfile que se encuentra en backend/.

  4. 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.

  5. 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.

  6. Compartir con el equipo

    Comunique la URL https://ui.midominio.com a 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/SvelteInterfaz de chat web para LLM (tipo ChatGPT autoalojado)
Renderizado visual en directo en el navegadorGestión multi-modelo, RAG, historial de conversaciones
Exportación del código fuente listo para integrarIdeal para asistencia, investigación y tareas generales
Ideal para prototipado de UI y generación de código front-endRequiere 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: 7878Puerto 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.

Prototipe sus interfaces en un VPS Cloud ServOrbit

Despliegue OpenUI (y Ollama si lo desea) en un VPS Cloud con Docker preconfigurado. Un taller de generación de interfaces privado, compartible y disponible de forma continua.

¿Necesita ayuda?

Consulte nuestro centro de ayuda y nuestra FAQ, o contacte con nuestro equipo: llamada, WhatsApp o correo electrónico. Soporte en francés, inglés y árabe.

Escribir por WhatsAppse abre en una pestaña nueva