首页/新闻资讯/正文详情

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

发布时间:2026/9/24 16:42:53 来源:云帆数科 栏目:资讯中心
OpenUI:AI 实时生成 UI,Docker 3 步部署与本地开发完整指南
OpenUIAI 实时生成 UIDocker 3 步部署与本地开发完整指南【免费下载链接】openuiOpenUI lets you describe UI using your imagination, then see it rendered live.项目地址: https://gitcode.com/GitHub_Trending/op/openuiOpenUI 是一个用自然语言描述、实时渲染 UI 界面的开源工具生成的组件可转为 React、Svelte 等格式。本篇覆盖 OpenUI 的 Docker 部署、本地开发环境配置与多模型接入。读完你可以独立拉起整套服务并换接自己常用的大模型。项目速览OpenUI 把需求写成一句话界面就在浏览器里逐步渲染出来还可以继续追问修改。架构上前后端分离前端是 React TypeScriptVite 构建后端是 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 定义服务端口作用openui7878主应用FastAPI 后端 打包后的前端入口见 backend/openui/server.pyollama11434本地大模型服务容器名ollama模型数据落在挂载卷里openui 容器通过环境变量OLLAMA_HOSThttp://ollama:11434找到模型服务无需在宿主机单独装 Ollama。前端本地开发时 Vite dev server 另占 5173 端口届时以该端口为入口。接入不同大模型环境变量怎么配各提供商只需要在启动前导出对应变量Docker 场景下这些 key 会被透传进容器提供商环境变量默认值OpenAIOPENAI_API_KEY无AnthropicANTHROPIC_API_KEY无GroqGROQ_API_KEY无GeminiGEMINI_API_KEY无OllamaOLLAMA_HOSThttp://127.0.0.1:11434OpenAI 兼容端点OPENAI_COMPATIBLE_ENDPOINTOPENAI_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 devVite HMR 在 5173 端口生效改动即时刷新开发容器仓库自带 .devcontainer/devcontainer.jsonVS Code 里选 Reopen in Container 可一次装齐 Python、Node 和 Ollama常见坑位现象排查命令处理办法7878 打不开页面netstat -tulpn \| grep 7878端口被占用改掉 compose 里的端口映射或停掉占用进程容器起不来或秒退docker logs openui、docker logs ollama按日志补 API key 或模型依赖模型列表为空 / 连不上 Ollamacurl 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 lets you describe UI using your imagination, then see it rendered live.项目地址: https://gitcode.com/GitHub_Trending/op/openui创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

相关推荐

Nex-N2.5-mini chat_template.jinja逐行精讲:154行完整解析工具调用XML格式、多步工具链与思考块
Nex-N2.5-mini chat_template.jinja逐行精讲:154行完整解析工具调用XML格式、多步工具链与思考块

Nex-N2.5-mini chat_template.jinja逐行精讲:154行完整解析工具调用XML格式、多步工具链与思考块 【免费下载链接】Nex-N2.5-mini 项目地址: https://ai.gitcode.com/hf_mirrors/nex-agi/Nex-N2.5-mini 这篇文章对开源多模态智能体模型 Nex-N2.5-mini 的 ch… · 2026/9/24 16:42:53

phpDocumentor ReflectionDocBlock 组件源码解析:PHP DocBlock 解析器的使用、工作原理与扩展机制
phpDocumentor ReflectionDocBlock 组件源码解析:PHP DocBlock 解析器的使用、工作原理与扩展机制

示例工程数据库教程后端 【免费下载链接】sql-server-samples Azure Data SQL Samples - Official Microsoft GitHub Repository containing code samples for SQL Server, Azure SQL, Azure Synapse, and Azure SQL Edge 项目地址: https://gitcode.com/gh_mirrors… · 2026/9/24 16:42:46

使用 Laravel 5.1 + PHP 7 构建 SQL Server 待办事项应用:Myboard 实战解析
使用 Laravel 5.1 + PHP 7 构建 SQL Server 待办事项应用:Myboard 实战解析

示例工程数据库教程后端 【免费下载链接】sql-server-samples Azure Data SQL Samples - Official Microsoft GitHub Repository containing code samples for SQL Server, Azure SQL, Azure Synapse, and Azure SQL Edge 项目地址: https://gitcode.com/gh_mirrors… · 2026/9/24 16:42:46

第28篇-需求分析与建模-从原始需求到需求模型
第28篇-需求分析与建模-从原始需求到需求模型

【软考高级系统分析师全链路通关实战】第 28 篇:需求分析与建模——从原始需求到需求模型 本系列定位:面向有开发经验、从零备考软考高级「系统分析师」的工程师,以《系统分析师教程(第 2 版)》为主线,按「… · 2026/9/24 17:26:04

亲测有效:Codex 搭配 Codex++ 与 Agnes 的 config.toml 配置实战
亲测有效:Codex 搭配 Codex++ 与 Agnes 的 config.toml 配置实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 17:26:04

KH-1.27PH180-2X5P-L7.2-SMT
KH-1.27PH180-2X5P-L7.2-SMT

排针> 双排针 1.27PH 2X5P-L7.2 180贴片带柱>KH-1.27PH180-2X5P-L7.2-SMT KH-1.27PH180-2X5P-L7.2-SMT是一款专为表面贴装技术(SMT)设计的双排针连接器。该产品采用1.27mm的标准间距,具备2行5列的引脚排列,引脚长度为7.2mm&… · 2026/9/24 17:26:04

第30篇-需求验证与确认-让需求在编码前就被检验
第30篇-需求验证与确认-让需求在编码前就被检验

【软考高级系统分析师全链路通关实战】第 30 篇:需求验证与确认——让需求在编码前就被检验 本系列定位:面向有开发经验、从零备考软考高级「系统分析师」的工程师,以《系统分析师教程(第 2 版)》为主线,按… · 2026/9/24 17:25:58

第27篇-需求获取技术-面向六类干系人的实战方法
第27篇-需求获取技术-面向六类干系人的实战方法

【软考高级系统分析师全链路通关实战】第 27 篇:需求获取技术——面向六类干系人的实战方法 本系列定位:面向有开发经验、从零备考软考高级「系统分析师」的工程师,以《系统分析师教程(第 2 版)》为主线,按… · 2026/9/24 17:25:51

27.52TOPS 算力 + PSOC 架构,复旦微 FMQL100TAI 技术优势深度拆解
27.52TOPS 算力 + PSOC 架构,复旦微 FMQL100TAI 技术优势深度拆解

在嵌入式 AI 向边缘侧下沉的行业趋势下,传统「CPU 主板 FPGA 加速卡」的分立方案,逐渐暴露出传输延迟高、集成度低、开发门槛高、功耗体积大等诸多瓶颈。而可编程系统级芯片(PSOC)通过单芯片异构融合,正在成为破解这些… · 2026/9/24 17:25:51

基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程
基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程

简介:这是一套面向计算机、人工智能、自动化等专业学生与教师的毕业设计级项目资源,围绕YOLOv8实现渔船作业监控系统,可用于毕设、课程设计、大作业或项目立项演示。压缩包共97个文件,约24.21MB,以70个Python源码文件为… · 2026/9/24 0:00:13

1D-CNN时间序列建模实战:从Conv1d原理到工业落地
1D-CNN时间序列建模实战:从Conv1d原理到工业落地

简介:面向时间序列数据建模的一维卷积神经网络完整实现,适合深度学习入门者及需要快速验证时序模型的研究者,能够从音频、文本、传感器或股价等序列中挖掘局部特征与时间依赖。压缩包体积很小,只有3KB,内含3个Python脚… · 2026/9/24 0:00:26

柔软的L:汉语语流中被忽视的舌肌张力控制
柔软的L:汉语语流中被忽视的舌肌张力控制

1. 这个“L”不是字母表里的L,而是舌尖上的L最近在几个方言群和语音教学社群里,反复看到有人发一句:“也说字母L:柔软的长舌”。初看以为是英语发音课笔记,点开才发现全是方言爱好者、播音系学生、语言康复师甚至戏曲演… · 2026/9/24 0:00:44

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码