OpenUI：AI 驱动的 UI 生成器

1. 项目概述

OpenUI 是一款开源的、由 LLM 驱动的应用程序，允许开发者用纯英文描述用户界面，并立即在浏览器中看到其实时渲染效果，随后将结果导出为整洁的 HTML/CSS 或特定框架的代码（React、Svelte、Web Components 等）。

2. 背景与定位

OpenUI 由 Weights & Biases (W&B) 创建——这家公司以机器学习实验跟踪工具闻名——该项目最初是一个内部原型，用于探索下一代由 LLM 驱动的开发者工具会是什么形态。后来将其公开发布，是为了让更广泛的社区能够基于同样的理念进行实验：将自然语言意图转化为可运行的前端代码，而无需手写标记语言。

从概念上讲，OpenUI 与那些专有的“文本转 UI”生成器处于同一领域，但它的独特之处在于：采用宽松的开源许可证完全开源、不绑定特定供应商（不局限于单一的 AI 供应商），并且支持自托管——团队可以完全在自己的基础设施上运行它，包括通过 Ollama 使用本地模型，而不是依赖封闭的托管服务。

3. 功能类别

🤖 LLM 供应商集成 — 支持 9 种后端 —— OpenAI、Anthropic Claude、Google Gemini、Groq、Mistral、Cohere、Ollama（本地模型）、任何兼容 OpenAI 的端点，以及作为统一代理的 LiteLLM —— 允许团队根据成本、隐私和延迟需求，选择云供应商、自托管的本地模型，或将多种模型混合使用。
🎨 代码导出目标 — 4 种以上的输出格式 —— 原始 HTML/CSS、React、Svelte 和 Web Components —— 将生成的标记转换为团队已经在使用的框架，以便将输出直接粘贴到现有的代码库中。
🖥️ 实时预览与迭代 — 对话式改进、即时渲染预览、逐条消息记录历史 —— 允许开发者持续描述更改（“把按钮变大”、“切换到深色主题”），并实时观看 UI 更新，而无需触碰代码。
👁️ 视觉辅助改进 — 针对具备视觉能力的模型提供基于屏幕截图的反馈 —— 允许用户上传屏幕截图（例如设计稿或渲染错误），以便 LLM 将生成的 UI 与视觉参考对齐。
🐳 部署选项 — 4 种设置途径 —— 预构建的 Docker 镜像、Docker Compose（内置 Ollama）、通过 uv 进行源码安装，以及适用于 GitHub Codespaces/Gitpod 的现成开发容器 —— 涵盖了从单行命令演示到完全定制的本地开发环境等各种需求。

4. 核心亮点

自然语言转 UI 生成 — 用一句话描述组件或完整布局，几秒钟内即可获得渲染好且可编辑的结果，消除了从零开始构建新 UI 时面临的空白画布问题。
不绑定供应商的架构 — 底层由 LiteLLM 驱动，因此从 OpenAI 切换到本地 Ollama 模型只需更改配置，无需更改代码。
多框架导出 — 同一生成的设计可以转换为纯 HTML、React、Svelte 或 Web Components，从而减少设计需要迁移到特定技术栈时的返工。
基于 Ollama 的本地优先选项 — 有数据隐私或成本限制的团队可以使用本地、开放权重的模型离线运行整个流程，包括使用 Llava 等视觉模型进行基于屏幕截图的改进。
对话式迭代循环 — 改进通过聊天完成，而不是手动调整 CSS，这使得无论是技术用户还是非技术用户都能保持快速的反馈循环。
零门槛试用 — 只需一条 docker run 命令和 API 密钥即可获得一个可用实例，并且在任何本地设置之前都提供公开演示供评估。

5. 各角色的使用场景

普通开发者 — 从纯语言描述中快速搭建 UI 组件或原型布局，然后直接导出到当前项目使用的框架。
数据/研究科学家 — 无需深厚的前端专业知识即可为内部工具、仪表板或 ML 演示应用构建简单的前端，对于已经在使用 W&B 进行实验跟踪的团队尤其有用。
项目经理 / 产品负责人 — 在几分钟内将功能描述或线框图想法转化为可点击的视觉原型，以便在工程开发开始前统一利益相关者的意见。

6. 入门指南

找到你需要的内容 — 阅读主 README 以及 backend/README.md 和前端 README 中的特定组件文档，或者在安装任何内容之前尝试在线演示：

open https://openui.fly.dev

安装 / 集成 — 最快的途径是使用预构建的 Docker 镜像：

docker run --rm --name openui -p 7878:7878 -e OPENAI_API_KEY ghcr.io/wandb/openui

然后访问 http://localhost:7878。要从源码运行（需要 git 和 uv）：

git clone https://github.com/wandb/openui.git
cd openui/backend
uv sync --all-extras
export OPENAI_API_KEY=xxxx
uv run python -m openui --dev

贡献 — 复刻仓库，基于 main 开分支，并按照现有的 PR 规范提交拉取请求：

git clone https://github.com/wandb/openui.git
cd openui
git checkout -b my-feature

在开始新工作之前，请查看开放的 issues 以寻找适合新手的任务。

7. 项目结构

openui/
├── backend/          # Python API 服务器：LLM 编排、LiteLLM 配置、HTML 生成
│   └── README.md     # 后端特定设置和环境变量
├── frontend/         # 基于 React 的 Web UI：聊天界面、实时预览、代码导出
├── .devcontainer/     # 为 Codespaces / Gitpod 预配置的开发环境
└── docker-compose.yml # 将 OpenUI 与本地 Ollama 实例捆绑的 Compose 设置

关键文件：backend/ 包含将聊天提示转化为渲染标记的模型路由逻辑；frontend/ 负责渲染实时预览并处理向 React/Svelte/Web Components 的转换；.devcontainer/ 让贡献者能够一键获得可用环境。

8. 相关生态

上游依赖：LiteLLM（统一 LLM API 代理）、Ollama（本地模型运行时），以及它集成的各种云 LLM API（OpenAI、Anthropic、Google Gemini、Groq、Mistral、Cohere）。
发源组织：由 Weights & Biases 构建，OpenUI 最初是作为内部工具原型构建的，旨在补充其实验跟踪平台。
互补工具：与更广泛的 AI 辅助前端开发领域中的其他“提示转 UI”工具并存，为封闭的托管生成器提供了一种开源、可自托管的替代方案。

9. 许可证

OpenUI 基于 Apache License 2.0 发布。

✅ 允许商业使用、修改、分发和私人使用。
✅ 你可以进行再授权并在此基础上构建专有产品，前提是保留许可证和版权声明。
❌ 该许可证不提供任何担保，作者也不承担任何责任。
ℹ️ Apache-2.0 包含来自贡献者的明确专利授权，许多团队认为对于企业采用而言，这比那些不够明确的宽松许可证更具优势。

10. 常见问题

问：使用 OpenUI 需要每个 LLM 供应商的 API 密钥吗？
答：不需要。所有供应商的密钥都是可选的——你只需为你打算使用的供应商设置密钥即可，例如只需 OPENAI_API_KEY；如果完全通过 Ollama 在本地运行，则无需任何密钥。

问：我可以在不向云 AI 供应商发送数据的情况下使用 OpenUI 吗？
答：可以。通过内置的 docker-compose.yml 设置，OpenUI 可以完全针对通过 Ollama 运行的本地模型运行，包括视觉模型。

问：我可以将生成的 UI 导出到哪些框架？
答：支持将纯 HTML/CSS、React、Svelte 和 Web Components 作为导出目标。

问：在安装任何东西之前，我可以在哪里试用 OpenUI？
答：公开演示可在 openui.fly.dev 获取。

问：如何自定义 OpenUI 使用的模型？
答：OpenUI 会根据你的环境变量自动生成 LiteLLM 配置；你也可以通过 OPENUI_LITELLM_CONFIG 路径或在工作目录中放置配置文件来提供自定义配置。

11. 快速链接

仓库：github.com/wandb/openui
后端文档：backend/README.md
问题 / 贡献跟踪：github.com/wandb/openui/issues
拉取请求：github.com/wandb/openui/pulls
在线演示：openui.fly.dev

12. 总结

OpenUI 将前端开发中繁琐的第一步——将想法转化为标记语言——变成了一个对话式的、近乎即时的过程，该过程由团队选择的任何 LLM（云端或本地）驱动。对于希望快速制作 UI 原型、评估 LLM 辅助设计工作流，或者运行一个完全自托管以替代封闭的文本转 UI 工具的开发者和产品团队来说，它极具价值，且这一切都在宽松的开源许可证下提供。