OpenUI：AI 实时生成 UI，Docker 3 步部署与本地开发完整指南-创锋一号

OpenUI：AI 实时生成 UI，Docker 3 步部署与本地开发完整指南

【免费下载链接】openuiOpenUI let's you describe UI using your imagination, then see it rendered live.项目地址: https://gitcode.com/GitHub_Trending/op/openui

OpenUI 是一个用自然语言描述、实时渲染 UI 界面的开源工具，生成的组件可转为 React、Svelte 等格式。本篇覆盖 OpenUI 的 Docker 部署、本地开发环境配置与多模型接入。读完你可以独立拉起整套服务并换接自己常用的大模型。

项目速览

OpenUI 把需求写成一句话，界面就在浏览器里逐步渲染出来，还可以继续追问修改。架构上前后端分离：前端是 React + TypeScript（Vite 构建），后端是 Python FastAPI 服务，通过 LiteLLM 统一对接各家大模型。它主打"描述转 HTML 组件，再转成目标框架代码"这条链路。

三步跑起来：Docker 一键部署

前提是本机已有 Docker 和 Docker Compose。

第 1 步，拿代码：

git clone https://gitcode.com/GitHub_Trending/op/openui cd openui

执行后本地得到完整的 openui 目录，后续命令都在该目录下执行。

第 2 步，拉起服务栈：

docker-compose up -d

一条命令把应用和 Ollama 模型服务一起拉起来，两个容器分别在 7878 和 11434 端口上监听。

第 3 步，补一个模型（首次必需）：

docker exec -it ollama ollama pull llava

下载 llava 到容器内的 Ollama；不确定容器名时先用docker ps确认，也可以把 llava 换成任意 Ollama 支持的模型。

怎么确认跑通了

浏览器打开http://localhost:7878，输入一段描述，能看到界面实时渲染即正常
Ollama 侧执行curl http://localhost:11434/api/tags，返回包含 llava 的模型列表说明模型服务可用

看懂服务架构

两个服务都由 docker-compose.yaml 定义：

服务	端口	作用
openui	7878	主应用：FastAPI 后端 + 打包后的前端，入口见 backend/openui/server.py
ollama	11434	本地大模型服务，容器名`ollama`，模型数据落在挂载卷里

openui 容器通过环境变量OLLAMA_HOST=http://ollama:11434找到模型服务，无需在宿主机单独装 Ollama。前端本地开发时 Vite dev server 另占 5173 端口，届时以该端口为入口。

接入不同大模型：环境变量怎么配

各提供商只需要在启动前导出对应变量，Docker 场景下这些 key 会被透传进容器：

提供商	环境变量	默认值
OpenAI	`OPENAI_API_KEY`	无
Anthropic	`ANTHROPIC_API_KEY`	无
Groq	`GROQ_API_KEY`	无
Gemini	`GEMINI_API_KEY`	无
Ollama	`OLLAMA_HOST`	`http://127.0.0.1:11434`
OpenAI 兼容端点	`OPENAI_COMPATIBLE_ENDPOINT`+`OPENAI_COMPATIBLE_API_KEY`	无

自定义模型走 LiteLLM：后端会依据环境变量自动生成代理配置（逻辑在 backend/openui/litellm.py）。想完全接管时，自备litellm-config.yaml放到当前目录、容器内的/app/下，或用OPENUI_LITELLM_CONFIG指定路径，再以python -m openui --litellm启动。Docker 场景加-v $(pwd)/litellm-config.yaml:/app/litellm-config.yaml挂载即可。

进阶开发速览

后端调试：cd backend后执行uv sync --frozen --extra litellm并激活.venv，再用python -m openui --dev起热重载服务，调试器附加到该进程即可
前端调试：cd frontend后npm install && npm run dev，Vite HMR 在 5173 端口生效，改动即时刷新
开发容器：仓库自带 .devcontainer/devcontainer.json，VS Code 里选 "Reopen in Container" 可一次装齐 Python、Node 和 Ollama

常见坑位

现象	排查命令	处理办法
7878 打不开页面	`netstat -tulpn \\| grep 7878`	端口被占用：改掉 compose 里的端口映射或停掉占用进程
容器起不来或秒退	`docker logs openui`、`docker logs ollama`	按日志补 API key 或模型依赖
模型列表为空 / 连不上 Ollama	`curl http://localhost:11434/api/tags`	确认 Ollama 已运行且已 pull 模型；宿主机跑 Ollama、容器跑应用时，把`OLLAMA_HOST`指向`http://host.docker.internal:11434`

写在最后

OpenUI 给了两条路径：Docker Compose 负责快速跑起来，本地源码负责二次开发；换模型只是改环境变量的事。

官方文档：README.md
后端源码：backend/openui/
前端源码：frontend/
API 文档：docs/index.html

现在就可以执行docker-compose up -d，等 7878 端口就绪后，从一句"做一个响应式的产品展示页"开始。

【免费下载链接】openuiOpenUI let's you describe UI using your imagination, then see it rendered live.项目地址: https://gitcode.com/GitHub_Trending/op/openui

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析