OpenUI UI 生成工具 Docker 部署完整指南：从一键启动到本地开发环境搭建
【免费下载链接】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 等组件格式。它面向想快速体验 UI 生成工具的产品工程师、前端开发者，以及计划在此基础上做二次开发的 LLM 应用实践者。
读完这篇指南，你能完成三件事：用 Docker Compose 一键部署 OpenUI 服务、搭好可调试的本地前后端开发环境、通过环境变量接入多种 LLM 模型。
Docker Compose 四步启动：OpenUI UI 生成服务一键部署
- 环境准备：机器上装好 Docker 与 Docker Compose。服务栈包含两个容器——OpenUI 主应用与 Ollama 本地模型服务。
- 克隆代码仓库：
git clone https://gitcode.com/GitHub_Trending/op/openui cd openui- 启动服务栈，openui 容器对外暴露 7878 端口，ollama 容器映射 11434 端口：
docker-compose up -d- 首次运行需拉取本地模型（llava 是目前 Ollama 中支持图像的主要模型）：
docker exec -it openui-ollama-1 ollama pull llava✅ 验证动作：浏览器打开 http://localhost:7878 ，输入一句界面描述，出现实时渲染的预览即部署成功。
一分钟看懂 OpenUI 架构：前端、FastAPI 后端与模型层协作
OpenUI 采用前后端分离结构：前端是位于 frontend/ 目录的 React + TypeScript 应用，负责对话输入、实时预览与版本管理；后端是 backend/ 目录下的 Python FastAPI 服务，接收提示词并返回生成的组件代码。
模型层由 LiteLLM 承担，统一对接 OpenAI、Groq 等云端模型；通过OLLAMA_HOST环境变量还能切换到 Ollama 本地模型。请求链路是：前端提交描述 → 后端经 LiteLLM 转发给目标模型 → 返回的代码立即在浏览器中渲染。
OpenUI 本地开发环境搭建：后端与前端双端启动
后端（FastAPI + uv）
安装依赖管理工具 uv：
curl -LsSf https://astral.sh/uv/install.sh | sh同步依赖并启动开发服务器：
cd backend uv sync --frozen --extra litellm source .venv/bin/activate export OPENAI_API_KEY=你的API密钥 python -m openui --dev后端入口：backend/openui/server.py；依赖清单：backend/pyproject.toml。
前端（React + Vite）
cd frontend npm install npm run dev启动后前端开发服务监听 5173 端口，浏览器打开该端口即可调试。入口文件：frontend/src/main.tsx；组件示例：frontend/src/components/Chat.tsx。
OpenUI 接入多模型：环境变量与 LiteLLM 自定义扩展
| 模型提供商 | 所需环境变量 |
|---|---|
| OpenAI | OPENAI_API_KEY |
| Anthropic | ANTHROPIC_API_KEY |
| Groq | GROQ_API_KEY |
| Ollama | OLLAMA_HOST（默认 http://localhost:11434） |
后端默认依据上述环境变量自动生成 LiteLLM 配置。若需接入自定义或本地部署模型，可创建litellm-config.yaml文件并挂载进容器来覆盖默认行为：
docker run -v $(pwd)/litellm-config.yaml:/app/litellm-config.yaml ghcr.io/wandb/openuiLiteLLM 接入实现见：backend/openui/litellm.py。
VS Code Dev Container 一键打开 OpenUI 开发容器并调试
仓库内置开发容器配置。安装 VS Code Dev Containers 扩展后打开项目文件夹，选择 “Reopen in Container”，容器会自动装好 Python、Node 与 Ollama 全套依赖。配置文件：.devcontainer/devcontainer.json。
- 后端调试：配置 Python 调试器，附加到运行中的
python -m openui --dev进程即可断点。 - 前端热更新：Vite HMR 默认开启，保存代码后浏览器自动刷新，无需手动重启。
OpenUI 端口冲突与 Ollama 连接故障排查命令
| 症状 | 原因 | 解决 |
|---|---|---|
| 服务起不来、端口被占用 | 7878 或 11434 已被其他进程占用 | 执行netstat -tulpn \| grep 7878与netstat -tulpn \| grep 11434定位并释放端口 |
| 容器在运行但行为异常 | 容器内部报错被掩盖 | 查看docker logs openui与docker logs ollama定位具体异常 |
| 界面连不上本地模型 | Ollama 服务未启动或地址配错 | 执行curl http://localhost:11434/api/tags验证，无正常返回时先启动 Ollama 服务 |
下一步：打开 OpenUI，用一句话生成你的第一个界面
🚀 现在打开 http://localhost:7878 ，输入“创建一个响应式的产品展示页面”，几秒内即可看到实时渲染的 UI 生成效果，再在设置面板中切换不同模型继续迭代细节。
关键资源：
- 官方文档：README.md
- API 文档：docs/index.html
- 测试用例：backend/tests/test_openui.py
- 前端组件库：frontend/src/components/ui/
【免费下载链接】openuiOpenUI let's you describe UI using your imagination, then see it rendered live.项目地址: https://gitcode.com/GitHub_Trending/op/openui
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
