OpenUI

构建 UI 组件可能是个苦差事。OpenUI 旨在让这个过程变得有趣、快速且灵活。这也是我们在 W&B 使用的一个工具，用于测试和原型化我们的下一代工具，以便在 LLM 之上构建强大的应用程序。

概述

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，只需从 OPENAI_API_KEY 行中删除 =xxx。你也可以将上面命令中的 llava 替换为你选择的开源模型 (llava 是目前支持图像的少数 Ollama 模型之一)。现在你应该可以访问 http://localhost:7878 上的 OpenUI。

如果你修改了前端或后端，需要运行 docker-compose build 才能使更改在服务中生效。

开发

此仓库中配置了一个 开发容器，这是最快上手的方式。

Codespace

创建 Codespace 时选择更多选项，然后选择 New with options...。如果你想要非常快的启动时间，请选择 US West 区域。你还需要配置你的 OPENAI_API_KEY 密钥，或者如果你想尝试 Ollama （你至少需要 16GB 内存），可以将其设置为 xxx。

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

cd /workspaces/openui/frontend
npm run dev

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

Ollama

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

Gitpod

你可以通过 Gitpod 轻松使用 Open UI，它已预配置了 Open AI。

启动后，Open UI 会自动安装并启动。

在使用 Gitpod 之前：

• 确保你有一个 Gitpod 账户。
• 要使用 Open AI 模型，请在 Gitpod 用户账户 中设置 OPENAI_API_KEY 环境变量。将范围设置为 wandb/openui（或者如果你分叉了仓库，则设置为你的仓库）。

注意：其他（本地）模型也可能在更大的 Gitpod 实例类型中使用。Gitpod 中没有预配置所需的模型，但可以按照上述文档轻松添加。

资源

请参阅 前端 和 后端 目录中的自述文件。