OpenUI UI 生成工具 Docker 部署完整指南：从一键启动到本地开发环境搭建

OpenUI UI 生成工具 Docker 部署完整指南从一键启动到本地开发环境搭建【免费下载链接】openuiOpenUI lets 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安装依赖管理工具 uvcurl -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 Vitecd frontend npm install npm run dev启动后前端开发服务监听 5173 端口浏览器打开该端口即可调试。入口文件frontend/src/main.tsx组件示例frontend/src/components/Chat.tsx。OpenUI 接入多模型环境变量与 LiteLLM 自定义扩展模型提供商所需环境变量OpenAIOPENAI_API_KEYAnthropicANTHROPIC_API_KEYGroqGROQ_API_KEYOllamaOLLAMA_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.mdAPI 文档docs/index.html测试用例backend/tests/test_openui.py前端组件库frontend/src/components/ui/【免费下载链接】openuiOpenUI lets you describe UI using your imagination, then see it rendered live.项目地址: https://gitcode.com/GitHub_Trending/op/openui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考