Git Product home page Git Product logo

openv0's Introduction

openv0

project website - openv0.com

openv0 is a generative UI component framework

It allows you to AI generate and iterate on UI components, with live preview.

  • openv0 makes use of open source component libraries and icons to build a library of assets for the generative pipeline.
  • openv0 is highly modular, and structured for elaborate generative processes
  • Component generation is a multipass pipeline - where every pass is a fully independent plugin

(say hi @n_raidenai ๐Ÿ‘‹)

image


Currently Supported

  • Frontend frameworks
    • React
    • Next.js
    • Svelte
  • UI libraries
    • NextUI
    • Flowbite
    • Shadcn
  • Icons libraries
    • Lucide

The latest openv0 update makes it easier to integrate new frameworks, libraries and plugins.

Docs & guides on how to do so will be soon posted.

Next updates :

  • public explore+share web app on openv0.com (you can use the openv0 share API already)
  • multimodal UIray vision model (more details soon)
  • better validation passes, more integrations & plugins

Demos

Current version

openv0_component.mp4

Previous version

openv0_demo.webm

Install

  • Open your terminal and run
npx openv0@latest

It will download openv0, configure it based on your choices & install dependencies. Then :

  • Start the local server + webapp
    • start server cd server && node api.js
    • start webapp cd webapp && npm run dev
  • Open you web browser, go to http://localhost:5173/

That is all. Have fun ๐ŸŽ‰


Alternatively - you can also clone this repo and install manually

To do so :

  • Clone repo, run npm i in server/
  • Unzip server/library/icons/lucide/vectordb/index.zip into that same folder
  • Configure your OpenAI key in server/.env
  • Web apps starter templates are in webapps-starters/
    • run npm i in the web app starter of your choice
    • make sure that WEBAPP_ROOT variable server/.env matches your webapp folder path
  • Start the server with node api.js and the web app with npm run dev

How It Works

Multipass Workflow

A simple explanation is the following image

openv0_process

Codebase

Youtube video by user @elie2222 explains parts of the previous openv0 code base

@elie2222

openv0's People

Contributors

raidendotai avatar insightfulfuture avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.