openv0
项目网站 - openv0.com
openv0 是一个生成式UI组件框架
它允许你通过AI生成和迭代UI组件,并提供实时预览。
- openv0 利用开源组件库和图标来构建生成管道的资产库。
- openv0 高度模块化,并为复杂的生成过程结构化
- 组件生成是一个多通道的管道 - 每个通道都是一个完全独立的插件
(打招呼 @n_raidenai 👋)
当前支持
- 前端框架
- React
- Next.js
- Svelte
- UI库
- NextUI
- Flowbite
- Shadcn
- 图标库
- Lucide
最新的 openv0 更新使得集成新框架、库和插件变得更加容易。
文档和指南将很快发布。
下一个更新:
- 公共探索+分享web应用在openv0.com (你已经可以使用openv0分享API)
- 多模态
UIray
视觉模型 (更多细节即将发布) - 更好的验证通道,更多集成和插件
演示
当前版本
https://github.com/raidendotai/openv0/assets/127366981/a249cf0d-ae44-4155-a5c1-fc2528bf05b5
之前版本
安装
- 打开终端并运行
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密钥 - web应用启动模板在
webapps-starters/
- 在你选择的web应用启动模板中运行
npm i
- 确保
server/.env
中的WEBAPP_ROOT
变量与你的web应用文件夹路径匹配
- 在你选择的web应用启动模板中运行
- 使用
node api.js
启动服务器,用npm run dev
启动web应用
试用openv0
你可以通过最小化配置试用openv0(使用React作为框架)
Replit
StackBlitz
工作原理
多通道工作流程
以下图片简要说明
代码库
Youtube用户@elie2222的视频解释了之前openv0代码库的一部分