关注公众号
AI Ollama Python 大模型 对比

OpenUI：一句话生成UI界面

核心结论

OpenUI 是 Weights & Biases 开源的 LLM-to-UI 生成工具，GitHub 22.5k 星。你只需用自然语言描述界面，它就能实时渲染出可交互的 UI，并支持一键导出为 HTML / React / Svelte / Web Components。

一句话概括：它就是开源版的 v0.dev，但模型后端随便换。

OpenUI 工作界面

为什么要用 OpenUI

做前端开发或者技术写作的人，经常面对一个尴尬场景：

想法很清楚，就是不想写 CSS。

或者更具体一点——你要快速验证一个 UI 布局方案、做个原型给客户看、或者给自己的 AI 项目搭个管理后台。以前要么自己手写 HTML/CSS，要么拖 Figma，都不算快。

OpenUI 把这条路缩短成两步：

  1. 你描述想要什么
  2. AI 直接生成可交互的 UI

而且它不是"生成一张截图给你看"那种——生成的是真实可操作的 HTML 页面，你可以直接复制到项目里用。

三大核心能力

1. 自然语言 → UI 组件

输入 “创建带搜索栏和表格的管理后台页面”，OpenUI 会解析语义，生成完整的 UI 结构。支持增量修改——“把按钮改成蓝色并加个图标”，它会基于当前 UI 状态做局部调整。

2. 实时渲染与交互

前端界面实时刷新，不是静态图片。你可以在浏览器里直接操作生成的组件，边改边看效果。

3. 多格式导出

导出格式适用场景
HTML原型验证、快速交付
React前端项目集成
SvelteSvelte 项目
Web Components跨框架复用
JSON结构化数据存储

支持的模型后端（阵容全）

OpenUI 不绑定任何特定模型，你可以自由选择：

提供商环境变量说明
OpenAIOPENAI_API_KEYGPT-4o / 4 系列
GroqGROQ_API_KEY超低延迟推理
GeminiGEMINI_API_KEY免费额度充足
AnthropicANTHROPIC_API_KEYClaude 系列
CohereCOHERE_API_KEY企业级模型
MistralMISTRAL_API_KEY开源模型
OllamaOLLAMA_HOST本地运行，完全离线
OpenAI 兼容OPENAI_COMPATIBLE_ENDPOINT可接入 localai 等

多模型架构图

安装：两种方式

方式一：Docker（推荐，5分钟搞定）

# 拉取镜像并启动
docker run --rm -p 7878:7878 \
  -e OPENAI_API_KEY=sk-your-key \
  ghcr.io/wandb/openui

然后浏览器打开 http://localhost:7878 就能用了。

如果要用 Ollama 本地模型：

docker run --rm -p 7878:7878 \
  -e OPENAI_API_KEY=sk-your-key \
  -e OLLAMA_HOST=http://host.docker.internal:11434 \
  ghcr.io/wandb/openui

方式二：Python 源码安装

# 需要 git 和 uv
git clone https://github.com/wandb/openui.git
cd openui

# 设置 API Key
export OPENAI_API_KEY=sk-your-key

# 启动
uv run python -m openui

方式三：Docker Compose（含 Ollama）

# 从项目根目录执行
docker compose up

这会同时启动 OpenUI 和 Ollama，并自动拉取 llava 模型。有 GPU 的话改一下镜像标签就能利用显卡加速。

配置指南

多模型切换

启动后，点击界面左上角齿轮图标→Settings，就能在已配置的模型间切换。所有模型共享同一个 UI 描述上下文，你可以 A/B 对比不同模型生成的 UI 质量。

LiteLLM 自定义

OpenUI 内置了 LiteLLM 代理，可以接入几乎任何 LLM 服务。自动根据环境变量生成配置，也支持自定义配置文件：

# 自定义 litellm 配置
docker run --rm -p 7878:7878 \
  -v $(pwd)/litellm-config.yaml:/app/litellm-config.yaml \
  -e OPENUI_LITELLM_CONFIG=/app/litellm-config.yaml \
  ghcr.io/wandb/openui

本地模型（Ollama）

如果你完全离线运行，需要先在本地安装 Ollama 并拉取模型：

ollama pull llava   # 至少需要一个支持图片的模型
ollama pull llama3  # 纯文本模型，效果更好

然后设置 OLLAMA_HOST 指向你的 Ollama 服务地址。

实战场景

快速原型验证

产品经理或设计师可以用自然语言描述 UI 想法，几分钟内拿到可交互原型，省去 Figma 切图再开发的等待时间。

前端组件参考

想要一个登录页、数据表格、设置面板但又不想从头写？描述你想要的样子，让 OpenUI 生成后再微调。

代码导出到项目

生成的 UI 可以导出为 React 组件，直接复制到你的项目中使用。这点对开发效率提升非常明显。

踩坑记录

问题原因解决
Docker 启动后页面空白未设置 API Key 或 Key 无效检查 OPENAI_API_KEY 环境变量
Ollama 模型无法连接OLLAMA_HOST 未正确指向Docker 内用 http://host.docker.internal:11434
生成 UI 质量不高模型本身能力限制换 GPT-4o 或 Claude 效果更好
图片上传不显示模型不支持多模态llava 支持图片，llama 不支持
导出的 React 代码报错缺少依赖检查是否安装了 tailwindcss

总结

维度评价
上手难度★☆☆☆☆ Docker 一键启动，零配置也能跑
功能完整度★★★★☆ 实时渲染 + 多模型 + 多格式导出
模型灵活性★★★★★ 8 种后端，想换就换
代码质量★★★★☆ W&B 团队出品，TypeScript + Python 双栈
社区活跃度★★★★★ 22.5k 星，活跃维护

适合谁用： 前端开发者、产品经理、独立开发者、AI 应用开发者。

不适合谁用： 追求像素级设计的 UI 设计师（它更偏原型和快速迭代）。

如果你对用 AI 生成 UI 感兴趣，OpenUI 是目前最值得试的开源方案。Docker 一行命令就能跑起来，试错成本几乎为零。

如果觉得有帮助，点个「赞」和「在看」支持一下 👇

数据附注：据斯坦福 HAI 2026 年 AI 指数报告，中美顶级模型能力差距已缩小至 2.7%；中国 AI 论文与专利数量全球第一，工业机器人部署量是美国的 9 倍。AI 基础设施的普及正在重塑软件开发全流程，从代码生成到 UI 生成，每个环节都在被重写。

← 返回文章列表