OpenUI

构建 UI 组件可能是一件枯燥乏味的事情。OpenUI 的目标是让这一过程变得有趣、快速且灵活。同时，这也是我们在 W&B 使用的工具，用于测试和原型设计我们下一代基于大语言模型的强大应用开发工具。

概述

OpenUI 允许你用想象力来描述 UI，然后实时查看其渲染效果。你可以提出修改请求，并将 HTML 转换为 React、Svelte、Web Components 等格式。它有点像 v0，但它是开源的，而且没有那么完善 :stuck_out_tongue_closed_eyes:。

实时演示

尝试演示

本地运行

OpenUI 支持 OpenAI、Groq 以及任何 LiteLLM 所支持的模型，例如 Gemini 或 Anthropic (Claude)。以下环境变量是可选的，但如果要使用其他模型，则需要在你的环境中设置：

• OpenAI OPENAI_API_KEY
• Groq GROQ_API_KEY
• Gemini GEMINI_API_KEY
• Anthropic ANTHROPIC_API_KEY
• Cohere COHERE_API_KEY
• Mistral MISTRAL_API_KEY
• OpenAI 兼容 OPENAI_COMPATIBLE_ENDPOINT 和 OPENAI_COMPATIBLE_API_KEY

例如，如果你正在运行类似 localai 的工具，可以设置 OPENAI_COMPATIBLE_ENDPOINT，并可选地设置 OPENAI_COMPATIBLE_API_KEY，这样这些模型就会出现在 UI 的模型选择器中，作为 LiteLLM 支持的选项。

Ollama

你也可以使用 Ollama 提供的模型。安装 Ollama 并拉取一个模型，比如 Llava。如果 Ollama 没有在 http://127.0.0.1:11434 上运行，你可以设置 OLLAMA_HOST 环境变量，指向你的 Ollama 实例的主机和端口。例如，在 Docker 中运行时，你需要将其指向 http://host.docker.internal:11434，如下所示。

Docker（推荐）

以下命令会从你的 Shell 环境中转发指定的 API 密钥，并告诉 Docker 使用你机器上运行的 Ollama 实例。

export ANTHROPIC_API_KEY=xxx
export OPENAI_API_KEY=xxx
docker run --rm --name openui -p 7878:7878 -e OPENAI_API_KEY -e ANTHROPIC_API_KEY -e OLLAMA_HOST=http://host.docker.internal:11434 ghcr.io/wandb/openui

现在你可以访问 http://localhost:7878，生成新的 UI！

从源码 / Python

假设你已经安装了 git 和 uv：

git clone https://github.com/wandb/openui
cd openui/backend
uv sync --frozen --extra litellm
source .venv/bin/activate
# 设置你想要使用的任何 LLM 的 API 密钥
export OPENAI_API_KEY=xxx
python -m openui

LiteLLM

LiteLLM 可以用来连接几乎任何可用的 LLM 服务。我们会根据你的环境变量自动生成配置文件。你也可以创建自己的 代理配置，以覆盖此行为。我们会按以下顺序查找自定义配置：

1. 当前目录下的 litellm-config.yaml
2. 在 Docker 容器中运行时的 /app/litellm-config.yaml
3. 由 OPENUI_LITELLM_CONFIG 环境变量指定的任意路径

例如，要在 Docker 中使用自定义配置，可以运行：

docker run -n openui -p 7878:7878 -v $(pwd)/litellm-config.yaml:/app/litellm-config.yaml ghcr.io/wandb/openui

如果你想从源码使用 LiteLLM，可以运行：

pip install .[litellm]
export ANTHROPIC_API_KEY=xxx
export OPENAI_COMPATIBLE_ENDPOINT=http://localhost:8080/v1
python -m openui --litellm

Groq

要使用超快速的 Groq 模型，请将 GROQ_API_KEY 设置为你在 这里 找到的 Groq API 密钥。要使用 Groq 的模型，点击导航栏中的设置图标。

Docker Compose

免责声明： 这种方式可能会非常慢。如果你有 GPU，可能需要将 ollama 容器的标签更改为支持 GPU 的版本。如果你使用的是 Mac，请按照上述说明原生运行 Ollama，以充分利用 M1/M2 芯片的优势。

在根目录下，你可以运行：

docker-compose up -d
docker exec -it openui-ollama-1 ollama pull llava

如果你已经在环境中设置了 OPENAI_API_KEY，只需去掉 =xxx 即可。你也可以将上面命令中的 llava 替换为你喜欢的开源模型 (llava 是目前唯一支持图像的 Ollama 模型之一)。现在你应该能够通过 http://localhost:7878 访问 OpenUI。

如果你对前端或后端进行了更改，需要运行 docker-compose build，才能使这些更改反映到服务中。

开发

该仓库配置了一个 开发容器，这是开始工作的最快方式。

Codespace

创建 Codespace 时，选择更多选项，然后选择 New with options...。如果你想获得非常快的启动时间，可以选择美国西部区域。你还需要配置 OPENAI_API_KEY 秘密，或者直接将其设置为 xxx，以便尝试 Ollama (至少需要 16GB 内存)。

进入代码空间后，你可以在一个终端中运行服务器：python -m openui --dev。然后在另一个终端中：

cd /workspaces/openui/frontend
npm run dev

这应该会打开另一个运行在端口 5173 的服务，那就是你想要访问的服务。对前端和后端的所有更改都会自动重新加载，并反映在你的浏览器中。

Ollama

Codespace 会自动安装 Ollama，并下载 llava 模型。你可以通过运行 ollama list 来验证 Ollama 是否正在运行；如果失败，可以打开一个新的终端并运行 ollama serve。在 Codespaces 中，我们会在启动时拉取 llava，因此你应该能在列表中看到它。你可以从应用程序左上角的设置齿轮图标中选择 Ollama 模型。你通过 ollama pull llama 等命令拉取的任何模型都会显示在设置模态框中。

Gitpod

您可以通过 Gitpod 轻松使用 Open UI，它已预先配置好 OpenAI。

启动时，Open UI 会自动安装并运行。

在使用 Gitpod 之前：

• 请确保您已拥有 Gitpod 账户。
• 若要使用 OpenAI 模型，请在您的 Gitpod 用户账户中设置 OPENAI_API_KEY 环境变量，并将作用域设置为 wandb/openui（如果您是 fork 的仓库，则设置为您自己的仓库）。

注意：在更高规格的 Gitpod 实例上，也可以使用其他（本地）模型。Gitpod 并未预配置所需的模型，但可以根据上述说明轻松添加。

资源

请参阅 frontend 和 backend 目录中的 README 文件。

OpenUI 快速上手指南

OpenUI 是一款开源工具，允许你通过自然语言描述来构建 UI 组件，并实时预览渲染效果。它支持将生成的 HTML 转换为 React、Svelte、Web Components 等代码，是原型设计和测试 LLM 应用界面的利器。

环境准备

在开始之前，请确保你的系统满足以下要求：

• 操作系统：Linux, macOS 或 Windows (需安装 Docker Desktop 或 WSL2)。
• 前置依赖（任选其一）：
  • Docker (推荐)：已安装并运行 Docker Engine。
  • Python 环境：安装 Python 3.8+ 及 uv 包管理工具。
  • Git：用于克隆源代码。
• API 密钥： 你需要至少一个大模型服务的 API Key。OpenUI 支持多种模型提供商，请在环境变量中配置对应的 Key：
  • OpenAI: OPENAI_API_KEY
  • Groq (超快推理): GROQ_API_KEY
  • Anthropic (Claude): ANTHROPIC_API_KEY
  • Google Gemini: GEMINI_API_KEY
  • 本地模型 (Ollama): 需安装 Ollama 并拉取模型（如 llava）。若 Ollama 不在默认端口运行，需设置 OLLAMA_HOST。
  • 兼容 OpenAI 接口: OPENAI_COMPATIBLE_ENDPOINT 和 OPENAI_COMPATIBLE_API_KEY。

安装步骤

你可以选择使用 Docker（最简单）或从源码运行。

方式一：使用 Docker（推荐）

此方法会自动处理依赖，并支持直接透传宿主机的 API Key 和本地 Ollama 服务。

1. 在终端中导出你的 API Key（以 OpenAI 和 Anthropic 为例，若使用其他模型请替换对应变量）：

   export ANTHROPIC_API_KEY=xxx
   export OPENAI_API_KEY=xxx
   

2. 运行 Docker 容器。如果你需要使用本地运行的 Ollama，请加上 OLLAMA_HOST 参数：

   docker run --rm --name openui -p 7878:7878 -e OPENAI_API_KEY -e ANTHROPIC_API_KEY -e OLLAMA_HOST=http://host.docker.internal:11434 ghcr.io/wandb/openui
   

   注：若不使用本地 Ollama，可移除 -e OLLAMA_HOST... 部分。

方式二：从源码运行 (Python)

适合需要二次开发或使用特定 LiteLLM 配置的用户。

1. 克隆仓库并进入后端目录：

   git clone https://github.com/wandb/openui
   cd openui/backend
   

2. 使用 uv 同步依赖并激活虚拟环境：

   uv sync --frozen --extra litellm
   source .venv/bin/activate
   

   (Windows PowerShell 用户使用 .venv\Scripts\Activate.ps1)

3. 设置所需的 API Key：

   export OPENAI_API_KEY=xxx
   

4. 启动服务：

   python -m openui
   

基本使用

安装完成后，即可开始构建你的 UI。

1. 访问界面： 打开浏览器访问 http://localhost:7878。

2. 配置模型：

   • 点击导航栏右上角的 设置图标 (齿轮)。
   • 在模型选择器中，选择你已配置好 API Key 的模型（如 OpenAI, Groq, 或本地 Ollama 模型）。
   • 若使用本地 Ollama，确保已在终端运行 ollama pull llava (或其他支持的模型)，它们会自动出现在列表中。

3. 生成 UI：

   • 在输入框中用自然语言描述你想要的界面。
     • 示例："创建一个带有深色模式的登录表单，包含邮箱、密码输入框和一个蓝色的提交按钮。"
   • 按下回车，OpenUI 将实时生成并渲染 UI 组件。

4. 迭代与转换：

   • 修改：继续输入指令进行微调，例如"把按钮变成圆角"或"添加一个忘记密码链接"。
   • 转换框架：你可以要求将当前生成的 HTML 转换为特定框架代码，例如"Convert this to React"或"Turn this into Svelte"。

5. 本地开发模式（可选）： 如果你修改了前端或后端代码并希望热重载，可以使用开发模式：

   • 后端终端：python -m openui --dev
   • 前端终端：

     cd frontend
     npm run dev
     

   • 访问前端服务地址（通常为 http://localhost:5173）。