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 的現成 Dev Containers — 涵蓋從單行指令展示到完全自訂的本地開發環境等所有需求。

4. 核心亮點

自然語言轉 UI 生成 — 用一句話描述元件或完整版面，即可在幾秒內獲得渲染完成且可編輯的結果，消除從零開始建構新 UI 時面對空白畫布的障礙。
與供應商無關的架構 — 底層由 LiteLLM 驅動，因此從 OpenAI 切換至本地的 Ollama 模型只需更改設定，而無需修改程式碼。
多框架匯出 — 相同的生成設計可轉換為純 HTML、React、Svelte 或 Web Components，減少設計需要移轉至特定技術堆疊時的重做工作。
透過 Ollama 的本地優先選項 — 有資料隱私或成本考量的團隊，可以使用本地、開放權重的模型離線運行整個流程，包含用於截圖微調的 Llava 等視覺模型。
對話式迭代迴圈 — 微調透過對話進行，而非手動調整 CSS，這使得技術與非技術使用者都能保持快速的回饋迴圈。
零摩擦試用 — 只需一條附帶 API 金鑰的 docker run 指令就足以擁有一個可運作的實例，且在任何本地設定之前，即可使用公開展示版本進行評估。

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

貢獻 — fork 此儲存庫，針對 main 分支開啟新分支，並遵循現有的 PR 慣例提交 pull request：

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. 常見問題

問：我需要每個 LLM 供應商的 API 金鑰才能使用 OpenUI 嗎？
答：不需要。所有供應商金鑰皆為選用——您只需設定打算使用的供應商金鑰即可，例如僅設定 OPENAI_API_KEY；若透過 Ollama 完全在本地運行，則完全不需要設定。

問：我可以在不將資料傳送給雲端 AI 供應商的情況下使用 OpenUI 嗎？
答：可以。OpenUI 可以透過 Ollama 完全針對本地模型運行，包含視覺模型，這可透過隨附的 docker-compose.yml 設定來達成。

問：我可以將生成的 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
Pull requests：github.com/wandb/openui/pulls
即時展示：openui.fly.dev

12. 總結

OpenUI 將前端開發中繁瑣的第一步——將想法轉換為標記——轉變為一個由團隊選擇的任何 LLM（無論雲端或本地）驅動的對話式、近乎即時的過程。對於想要快速製作 UI 原型、評估 LLM 輔助設計工作流程，或運行完全自行託管的封閉文字轉 UI 工具替代方案的開發者與產品團隊來說，它最具價值，且一切皆在寬鬆的開源授權條款下進行。