注：

openv0 已不再维护，新项目是 Cofounder

---

openv0

项目官网 - openv0.com

openv0 是一个生成式 UI 组件框架。

它允许你通过 AI 生成和迭代 UI 组件，并提供实时预览功能。

• openv0 利用开源组件库和图标库，构建用于生成流程的资源库。
• openv0 具有高度模块化的设计，专为复杂的生成流程而构建。
• 组件生成是一个多阶段的流水线——每一阶段都是一个完全独立的插件。

（欢迎联系 @n_raidenai 👋）

---

当前支持

• 前端框架
  • React
  • Next.js
  • Svelte
• UI 库
  • NextUI
  • Flowbite
  • Shadcn
• 图标库
  • Lucide

最新的 openv0 更新使得集成新的框架、库和插件变得更加容易。

相关的文档和指南将很快发布。

接下来的更新：

• 在 openv0.com 上推出公开的探索与分享 Web 应用程序 (您现在就可以使用 openv0 的分享 API)
• 多模态 UIray 视觉模型 (更多细节即将公布)
• 更完善的验证流程、更多的集成与插件

---

演示

当前版本

https://github.com/raidendotai/openv0/assets/127366981/a249cf0d-ae44-4155-a5c1-fc2528bf05b5

之前版本

openv0_demo.webm

---

安装

• 打开终端并运行

npx openv0@latest

它会下载 openv0，根据您的选择进行配置，并安装依赖。然后：

• 启动本地服务器 + Web 应用程序
  • 启动服务器：cd server && node api.js
  • 启动 Web 应用程序：cd webapp && npm run dev
• 打开浏览器，访问 http://localhost:5173/

就这些了。尽情享受吧 🎉

---

或者，您也可以克隆这个仓库并手动安装。

操作步骤如下：

• 克隆仓库，在 server/ 目录下运行 npm i；
• 将 server/library/icons/lucide/vectordb/index.zip 解压到同一文件夹中；
• 在 server/.env 中配置您的 OpenAI API 密钥；
• Web 应用程序的启动模板位于 webapps-starters/ 中：
  • 在您选择的 Web 应用程序启动模板中运行 npm i；
  • 确保 server/.env 中的 WEBAPP_ROOT 变量与您的 Web 应用程序文件夹路径一致；
• 使用 node api.js 启动服务器，使用 npm run dev 启动 Web 应用程序。

---

体验 openv0

您可以通过以下极简配置来体验 openv0（使用 React 作为框架）。

Replit

StackBlitz

---

工作原理

多阶段工作流

简单来说，可以用下图来解释：

代码库

用户 @elie2222 的 YouTube 视频解释了之前 openv0 代码库的部分内容。

openv0 快速上手指南

⚠️ 重要提示：本项目 (openv0) 已停止维护。作者推荐迁移至新项目 Cofounder。以下指南仅适用于希望体验旧版生成式 UI 组件框架的开发者。

openv0 是一个生成式 UI 组件框架，支持通过 AI 生成并迭代 React、Next.js、Svelte 等前端框架的组件，并提供实时预览功能。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• 操作系统：Windows, macOS 或 Linux
• Node.js：建议安装 LTS 版本 (v18+)
• 包管理器：npm 或 yarn
• API Key：需要配置有效的 OpenAI API Key (用于驱动生成流程)
• 代码编辑器：VS Code 或其他支持的编辑器

安装步骤

您可以选择使用 npx 一键安装（推荐），或手动克隆仓库进行配置。

方式一：一键安装 (推荐)

在终端中运行以下命令，工具将自动下载、配置并安装依赖：

npx openv0@latest

安装完成后，需分别启动后端服务和前端应用：

1. 启动服务器：

   cd server && node api.js
   

2. 启动 Web 应用 (新开一个终端窗口)：

   cd webapp && npm run dev
   

3. 访问界面： 打开浏览器访问 http://localhost:5173/

方式二：手动克隆安装

如果您需要自定义配置或查看源码，请按以下步骤操作：

1. 克隆仓库并安装服务端依赖：

   git clone https://github.com/raidendotai/openv0.git
   cd openv0/server
   npm i
   

2. 解压图标向量库： 将 server/library/icons/lucide/vectordb/index.zip 解压到同一文件夹 (server/library/icons/lucide/vectordb/) 中。

3. 配置 OpenAI Key： 编辑 server/.env 文件，填入您的 OpenAI API Key：

   OPENAI_API_KEY=sk-your-key-here
   

4. 配置前端项目：

   • 进入 webapps-starters/ 目录，选择您喜欢的模板（如 React）。
   • 运行 npm i 安装依赖。
   • 回到 server/.env，确保 WEBAPP_ROOT 变量指向您刚才初始化的 webapp 文件夹绝对路径。

5. 启动服务：

   • 服务端：node api.js (在 server 目录下)
   • 前端：npm run dev (在对应的 webapp 目录下)

基本使用

启动成功后，即可在浏览器中体验 AI 生成组件的功能。

1. 访问界面：打开 http://localhost:5173/。
2. 输入提示词：在输入框中描述您想要的 UI 组件（例如："创建一个带有深色模式的登录表单，包含邮箱和密码输入框"）。
3. 生成与迭代：
   • 系统将通过多阶段管道（Multipass Pipeline）调用 AI 生成代码。
   • 右侧将实时预览生成的组件效果。
   • 您可以继续输入指令对组件进行修改和迭代（例如："把按钮颜色改成蓝色"）。

在线试用 (无需本地安装)

如果您想快速体验基于 React 的版本，可以使用以下在线平台：

• Replit: Run on Repl.it
• StackBlitz: Run on StackBlitz

---

注：当前版本支持 React, Next.js, Svelte 框架，以及 NextUI, Flowbite, Shadcn 组件库和 Lucide 图标库。