文章目录OpenUI用想象力画界面描述一下就能渲染出来1、 它解决什么问题2、 模型支持范围3、 两种部署方式4、 LiteLLM 的接入逻辑5、 适合谁用6、 二次开发与云端环境小结OpenUI用想象力画界面描述一下就能渲染出来OpenUI 在 GitHub 上已经累积 22,444 个 Star。WB 开源的这款工具做一件事让用户用自然语言描述想要的界面模型当场渲染出来再按要求继续改。它支持把生成的 HTML 转成 React、Svelte、Web Components 等多种前端代码。它的对标产品是 v0差别在于 OpenUI 开源但完成度没 v0 那么细致。1、 它解决什么问题写 UI 组件这种活向来耗费前端工程师大量时间。OpenUI 把流程压缩成描述、生成、修改三步用户在输入框写一句话模型给出可运行的前端界面再追加要求继续优化。WB 内部也在用它验证基于大模型的新一代工具产品。2、 模型支持范围OpenUI 接入了 OpenAI、Groq、Gemini、Anthropic、Cohere、Mistral 等主流商业模型也支持通过 LiteLLM 对接更广泛的服务。本地部署这块Ollama 可以加载 Llava 这类开源模型。开发者只需把对应 API Key 设为环境变量就能在界面右上角的设置里切换。如果公司里跑了 localai 这类 OpenAI 兼容接口配置OPENAI_COMPATIBLE_ENDPOINT和OPENAI_COMPATIBLE_API_KEY也能直接接进来。3、 两种部署方式Docker 是官方推荐的路径exportANTHROPIC_API_KEYxxxexportOPENAI_API_KEYxxxdockerrun--rm--nameopenui-p7878:7878-eOPENAI_API_KEY-eANTHROPIC_API_KEY-eOLLAMA_HOSThttp://host.docker.internal:11434 ghcr.io/wandb/openui跑起来访问http://localhost:7878就能用了。源码方式安装需要 git 和 uvgitclone https://github.com/wandb/openuicdopenui/backend uvsync--frozen--extralitellmsource.venv/bin/activateexportOPENAI_API_KEYxxx python-mopenui4、 LiteLLM 的接入逻辑OpenUI 通过 LiteLLM 屏蔽了不同模型服务之间的差异。它根据环境变量自动生成配置开发者也可以放一个litellm-config.yaml在当前目录、/app/litellm-config.yaml或通过OPENUI_LITELLM_CONFIG环境变量指定路径来覆盖默认行为。这层抽象让本地 Ollama、商业 API、企业内部代理服务都能以统一方式接入切换模型只需在设置面板里点选。5、 适合谁用前端工程师想快速验证界面原型、不想从零写组件产品经理或设计师需要把想法可视化为可点击的界面AI 应用开发者研究大模型生成 UI 的能力和边界WB 这类工具厂商验证大模型上层的 Agent 产品形态6、 二次开发与云端环境仓库内置了 dev container 配置VS Code 远程容器能直接起开发环境。Codespace 用户选 New with options把 OPENAI_API_KEY 设成占位符或真实 Key就能挂在云端跑。Gitpod 也做了预配置启动后服务自动拉起。前后端热加载分别在 5173 和 7878 端口改完即见效果。小结OpenUI 把 UI 生成的门槛压得很低几行命令就能本地起服务。配合 LiteLLM 支持的模型广度开发者不用绑定单一供应商。作为 WB 内部工具的开源版本它代表了一种趋势把大模型能力直接接入开发流程的最痛环节。型广度开发者不用绑定单一供应商。作为 WB 内部工具的开源版本它代表了一种趋势把大模型能力直接接入开发流程的最痛环节。