3步快速上手OpenUI本地部署与模型接入完整指南【免费下载链接】openuiOpenUI lets you describe UI using your imagination, then see it rendered live.项目地址: https://gitcode.com/GitHub_Trending/op/openuiOpenUI 是一个用自然语言实时生成 UI 界面的开源工具这份指南带你从本地部署到源码调试一步步走通。读完并按顺序敲完命令后你就能在浏览器里打开 OpenUI用一句话生成界面再接上自己手里任意一个大模型来驱动它。它能做什么一句话到界面的生成过程打开页面后交互逻辑非常直接在输入框里描述你想要的界面比如做一个三档定价表高亮最超值的一档右侧立刻渲染出可交互的预览改需求就再补一句话它会持续修改不满意可以随时切换代码格式——HTML、JSX还能转成 React、Svelte、Web Components左侧 History 面板保存着每一次生成的版本可以回溯。下面这张图是生成一个定价表格的真实过程能看到预览区和代码区是联动的整个工具分前后端两层前端是 React TypeScript后端是 Python FastAPI两者通过 HTTP 通信。理解这一点后后面的部署和调试思路就顺了。最快路径Docker Compose 拉起跑起来 如果只想先看效果这是最短路径。仓库根目录的 docker-compose.yaml 定义了两个容器一个跑 OpenUI 本体端口 7878一个跑 Ollama 本地模型服务端口 11434并自动把OLLAMA_HOST指到容器内的 Ollama。克隆并启动服务先克隆代码再启动服务栈-d表示后台运行git clone https://gitcode.com/GitHub_Trending/op/openui cd openui docker-compose up -d给 Ollama 拉一个模型容器起来后还是空壳需要给 Ollama 下载一个模型。首次运行执行docker exec -it ollama ollama pull llava选 llava 不是随便挑的——它目前是在 Ollama 里少数支持图片输入的模型后续看图改界面的能力要靠它。现在访问 http://localhost:7878 就能用了。两点提醒官方 README 里也提到纯 CPU 跑 Ollama 会比较慢有 GPU 的话可以给ollama容器换带 GPU 支持的镜像 tag改了前后端源码后容器里的代码不会自动更新需要重新执行docker-compose build。想用云端模型先设 Key 再启动compose 配置 会把你环境里的OPENAI_API_KEY、ANTHROPIC_API_KEY、GROQ_API_KEY转发进容器也支持根目录的.env文件。在docker-compose up -d之前执行export OPENAI_API_KEY你的key不设 key 也完全没问题Ollama 路线是开箱即用的。模型接入清单环境变量一览 OpenUI 不绑定任何一家模型厂商通过环境变量声明你有哪些模型的钥匙。启动后点左上角的齿轮图标就能在设置面板里切换下拉列表会按来源分组OpenAI、Ollama……并支持修改 System Prompt 和 Temperature按 README 与 config.py 中的实际逻辑各提供商对应关系如下想用的模型要设置的环境变量OpenAIOPENAI_API_KEYAnthropic (Claude)ANTHROPIC_API_KEYGroqGROQ_API_KEYGeminiGEMINI_API_KEYCohere / MistralCOHERE_API_KEY/MISTRAL_API_KEYOllama 本地模型OLLAMA_HOST默认http://127.0.0.1:11434任意 OpenAI 兼容服务OPENAI_COMPATIBLE_ENDPOINTOPENAI_COMPATIBLE_API_KEY两个细节值得注意如果你的 Ollama 不在本机默认地址比如容器场景把它指到宿主机-e OLLAMA_HOSThttp://host.docker.internal:11434想接 LiteLLM 支持的其他服务设OPENAI_COMPATIBLE_ENDPOINT后模型会自动出现在设置面板的 LiteLLM 分组下。用自定义 LiteLLM 配置覆盖默认行为后端默认会根据环境变量自动生成一份 LiteLLM 配置逻辑见 litellm.py查找顺序是当前目录的litellm-config.yaml→ 容器内的/app/litellm-config.yaml→OPENUI_LITELLM_CONFIG指定的路径。自己写一份挂载进去即可接管例如单容器运行docker run --rm -p 7878:7878 -v $(pwd)/litellm-config.yaml:/app/litellm-config.yaml ghcr.io/wandb/openui切到源码开发前后端热重载 想改代码的话分两个终端跑后端和前端改动保存即生效。后端uv 装依赖后起热重载服务先装 uvcd openui/backend uv sync --frozen --extra litellm source .venv/bin/activate export OPENAI_API_KEY你的key python -m openui --dev服务端监听 7878 端口入口代码在 server.py依赖清单在 pyproject.toml。前端Vite 起 5173 端口另开一个终端装依赖并启动cd openui/frontend npm install npm run dev浏览器访问 5173 端口这个地址开发模式下前端走 Vite 而非后端的 7878前后端任何文件的改动都会自动刷新到页面。调试时后端可以直接把 Python 调试器附加到python -m openui --dev进程上。懒人方案Dev Container 一键带齐环境仓库里内置了 .devcontainer/devcontainer.json创建容器时会自动装好 Node、Python 并装好 Ollama llava 模型postStartCommand里还带起了ollama serve。用 VS Code 的 Dev Containers 扩展打开项目后选 Reopen in Container就跳过了上面所有手工步骤。常见坑位与排查⚠️ 按出现频率排了个序遇到卡壳先过一遍服务起不来 / 页面打不开先确认端口有没有被占netstat -tulpn | grep -E 7878|11434再看两个容器的日志找具体报错docker logs openui和docker logs ollama。Ollama 连不上或没有可选模型用一条命令验证 Ollama 是否在正常应答curl http://localhost:11434/api/tags如果列表里没有你想要的模型执行ollama pull 模型名后再刷新设置面板新模型会自动出现。源码改了没生效确认你是在源码模式python -m openui --devnpm run dev下改的如果跑的是docker-compose源码改动需要docker-compose build重新打包才进得去容器。继续往下挖官方说明与全部部署方式README.md前后端各自的开发文档backend/README.md、frontend/README.md模型与环境变量的默认值backend/openui/config.py自动生成的 LiteLLM 配置逻辑backend/openui/litellm.py接口文档docs/index.html后端测试用例backend/tests/test_openui.py服务跑起来之后打开 http://localhost:7878试试输入做一个响应式的产品定价页三档方案——你的第一个生成式 UI 就出来了。【免费下载链接】openuiOpenUI lets you describe UI using your imagination, then see it rendered live.项目地址: https://gitcode.com/GitHub_Trending/op/openui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
