openv0 Documentation

openv0 supports the following technologies for generative UI:

• Frontend Frameworks: React, Next.js, Svelte
• UI Libraries: NextUI, Flowbite, Shadcn
• Icon Libraries: Lucide

After creating the project and installing dependencies (using npm install, pnpm install, or yarn), start the development server. Use the --open flag to automatically open the application in a new browser tab.

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

To enable type-aware linting for production applications, update your ESLint configuration with the following steps:

1. Configure the top-level parserOptions property to include your TypeScript project files:

2. Update the extends list by replacing plugin:@typescript-eslint/recommended with either plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked.

3. (Optional) Add plugin:@typescript-eslint/stylistic-type-checked to the extends list.

4. Install eslint-plugin-react and add plugin:react/recommended and plugin:react/jsx-runtime to the extends list.

parserOptions: {
  ecmaVersion: 'latest',
  sourceType: 'module',
  project: ['./tsconfig.json', './tsconfig.node.json'],
  tsconfigRootDir: __dirname,
},

After creating your project and installing dependencies (via npm install, pnpm install, or yarn), start the development server using npm run dev. Use the --open flag to automatically open the application in a new browser tab.

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Use npm create svelte@latest to initialize a new Svelte project. You can either create the project in the current directory or specify a directory name.

# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app

To generate a production-ready version of your application, run npm run build. You can then use npm run preview to test the production build locally. Note that for deployment, you may need to install a specific adapter for your target environment.

npm run build

# preview the production build
npm run preview

The fastest way to install and configure openv0 is using npx. This command downloads the package, configures it based on your selections, and installs necessary dependencies.

After installation, follow these steps to run the application:

1. Start the local server:

   cd server && node api.js

2. Start the webapp:

   cd webapp && npm run dev

3. Access the UI: Open your browser and navigate to http://localhost:5173/.

npx openv0@latest

If you prefer to clone the repository and install manually, follow these steps:

1. Clone the repository.
2. Setup the server:
   • Navigate to server/ and run npm i.
   • Unzip server/library/icons/lucide/vectordb/index.zip into the server/ folder.
   • Configure your OpenAI key in server/.env.
   • Start the server with node api.js.
3. Setup a web app starter:
   • Navigate to the desired starter in webapps-starters/.
   • Run npm i.
   • Ensure the WEBAPP_ROOT variable in server/.env matches your webapp folder path.
   • Start the web app with npm run dev.

For production applications, it is recommended to enable type-aware lint rules in your ESLint configuration.

1. Update the parserOptions in your ESLint config to include project and tsconfigRootDir:

2. Update the extends array to use type-checked plugins instead of standard recommended ones:

   • Replace plugin:@typescript-eslint/recommended with plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked.
   • Optionally add plugin:@typescript-eslint/stylistic-type-checked.

3. Install eslint-plugin-react and add plugin:react/recommended and plugin:react/jsx-runtime to the extends list.

parserOptions: {
  ecmaVersion: 'latest',
  sourceType: 'module',
  project: ['./tsconfig.json', './tsconfig.node.json'],
  tsconfigRootDir: __dirname,
},

Running the openv0 command without arguments initiates an interactive setup process. This process clones the repository, configures a webapp starter based on your framework preferences, sets up environment variables, and installs necessary dependencies for both the server and the webapp.

During setup, you will be prompted to select:

• Framework: react, svelte, or next (Note: next is currently API only).
• Components Library: Options vary by framework (e.g., nextui, flowbite, shadcn).
• Icons Library: Options vary by framework (e.g., lucide).
• OpenAI API Key: Your personal key for generative features.
• UI-Ray Debugging: Option to enable debug logs for the open-source vision model.

npx openv0