raidendotai / openv0 Goto Github PK

View Code? Open in Web Editor NEW

3.3K 3.3K 282.0 36.88 MB

AI generated UI components

License: MIT License

JavaScript 32.92% TypeScript 42.16% HTML 0.50% CSS 1.56% Svelte 22.87%

ai generative javascript react tailwind typescript ui

openv0's People

Contributors

Stargazers

Watchers

Forkers

jastor11 prnk28 commerceless tomchapin richmix kevinjscott leonsting alamriku ronalddas sylvesteraswin hirajanwin automationkit jfontestad twelvearrays edokoa octalpixel ryanlanciaux susros leego dakouan18 moxmoussa bracesproul dav1nx1 zoil juliomuhlbauer cbovard 3a1b2c3 babyblue26 chkim116 observedobserver ryanseddon shadhere darkrove huge040430512 memoriaxii deepak-agarwal schmuecker incod3 inerska josephrp chilang brodyaga-dev leisc koksing456 forestcamp louisjs aminefth shadskii afrog33k taqadam-al-ummah lakshayhq zochory stliakis windwp k3ithloh denyncrawford ihupoo tinyx3k tramleit nihanmubashshir ryanimm darrenczen phatdatpq andreslopera dawnraven johnatag koca princerumi nicholas0350 bronifty maisui99 vigneshchinnadurai inier tigawanna stormix amineis hamatoyogi akash1412 yhtsnda jlvvlj sbetamaster f901107 laike brunoqgalvao toolzzlabzz bahamutww skaldo aquaqamelob yoshino-s zheleska jadegeek supermario-ai alitrack elgatoflaco lu-lucifer ruvai2 nicolazj erkutgokergil alexandesigner mentordotgit

openv0's Issues

Video about how openv0 works

https://youtu.be/fAEH2ZBO6BA

Great work! Hope the video helps some people.

Is it possible to use something other than sqlite as the db?
I had 8-10 components built and openv0 crashed and I wasn't able to get it back running.
I was able to find the modules and use the code, but it was difficult.

Could not import

"[could not import]"

After completion I think it fails to run the generated components code maybe due to some syntax error.

Issue with the creation or existence of the index required by Vectra in openv0\server\modules\multipass\passes\build-component-generation-context\rag_icons.js

I have had this error:
:\Users\54342\genuiformchat\src\openv0\server\node_modules\vectra\lib\LocalIndex.js:342
throw new Error('Index does not exist');
^

Error: Index does not exist
at LocalIndex.

And solved with this code snippet

// Check if the index is created, if not, create it if (!await vectorDB_index.isIndexCreated()) { await vectorDB_index.createIndex(); }

Error: Cannot get past 3rd validation

Prompt used:

Design a Website Interface for a Vehicle Information Database

1. Main Content Area:
    - Vehicle Card Layout: Each vehicle's information is displayed in a card format, arranged in a grid (3 cards per row). Each card has:
        - Thumbnail Image: A photo of the vehicle.
        - Vehicle Name: Displayed in bold (e.g., "2023 Toyota Corolla").
        - Real Mileage: (e.g., "45,000 miles").
        - VIN: A unique identifier for the vehicle.
        - More Details Button: Clicking this reveals a dropdown or modal with additional vehicle details.

    - Pagination Controls: Located at the bottom. Allows users to navigate between multiple pages of vehicle listings.

2. Right Sidebar:
    - Filter Section: Allows users to narrow down the vehicle listings based on certain criteria:
        - Make: Dropdown list of car brands.
        - Model: Dropdown list that populates based on the selected make.
        - Year: Slider or dropdown to select a range of years.
        - Mileage: Slider to filter based on mileage range.
        - Apply Filters Button: After selecting the desired filters, users click this to update the vehicle listings.

Here is log dump from the console of the api.js:

Error log

Server is running on http://localhost:3000
Connected to the database
{
module: 'multipass/preset',
preset: {
name: 'componentNew_description',
description: 'generate a new component from a text description'
}
}
{
module: 'multipass/run',
status: 'starting',
query: {
description: Design a Website Interface for a Vehicle Information Database: 1. Main Content Area: - Vehicle Card Layout: Each vehicle's information is displayed in a card format, arranged in a grid (3 cards per row). Each card has: - Thumbnail Image: A photo of the vehicle. - Vehicle Name: Displayed in bold (e.g., "2023 Toyota Corolla"). - Real Mileage: (e.g., "45,000 miles"). - VIN: A unique identifier for the vehicle. - More Details Button: Clicking this reveals a dropdown or modal with additional vehicle details. - Pagination Controls: Located at the bottom. Allows users to navigate between multiple pages of vehicle listings. 2. Right Sidebar: - Filter Section: Allows users to narrow down the vehicle listings based on certain criteria: - Make: Dropdown list of car brands. - Model: Dropdown list that populates based on the selected make. - Year: Slider or dropdown to select a range of years. - Mileage: Slider to filter based on mileage range. - Apply Filters Button: After selecting the desired filters, users click this to update the vehicle listings.,
framework: 'react',
components: 'flowbite',
icons: 'lucide'
},
preset: {
name: 'componentNew_description',
description: 'generate a new component from a text description'
},
passes: [
'design-component-new-from-description',
'build-component-generation-context',
'generate-component-new',
'validate-check-generated-component',
'validate-fix-generated-component',
'postprocess-generated-component',
'store-component',
'export-component'
]
}

pass 0/7
init : passes/design-component-new-from-description
{
"new_component_name": "Vehicle Database Interface",
"new_component_description": "This component would be a comprehensive interface for a comprehensive vehicle information database. It will consist of two primary sections: Main Content Area and a Right Sidebar. The Main Content Area will exhibit the list of vehicles in a card layout arranged in a grid fashion with three cards per row. Each card will have thumbnail image of the vehicle, its name displayed in bold, real mileage, VIN and a button to reveal more details through a dropdown or modal. There will also be a pagination control at the bottom for easy navigation between multiple pages of vehicle listings. The Right Sidebar will serve as a filtration section that allows users to refine the vehicle listings based on certain criteria such as Make, Model, Year, and Mileage. Once the desired filters are picked, users can press the 'Apply Filters' button to update the vehicle listings.",
"new_component_icons_elements": {
"does_new_component_need_icons_elements": true,
"if_so_what_new_component_icons_elements_are_needed": ["Car brand logos"]
},
"use_library_components": [
{
"library_component_name": "Card",
"library_component_usage_reason": "Needed to organize vehicle data in a visually appealing and user-friendly format. Each vehicle's information will be displayed using a card."
},
{
"library_component_name": "Pagination",
"library_component_usage_reason": "This component will be used for bottom of the page navigation between multiple pages of vehicle listings."
},
{
"library_component_name": "Dropdown",
"library_component_usage_reason": "This will be used in the filter section for selecting a car brand or model. The model dropdown populates based on the selected make."
},
{
"library_component_name": "Modal",
"library_component_usage_reason": "This could be used to show additional vehicle details when the 'More Details' button on each card is clicked."
},
{
"library_component_name": "Sidebar",
"library_component_usage_reason": "Will be used to create the right sidebar that contains the filter section for narrowing down the vehicle listings."
},
{
"library_component_name": "Button",
"library_component_usage_reason": "Needed for the 'Apply Filters' and 'More Details' buttons."
},
{
"library_component_name": "Forms",
"library_component_usage_reason": "Will be used to receive user input for Make, Model, Year, and Mileage filters, as well as to encapsulate the 'Apply Filters' button."
}
]
}> pass 1/7
init : passes/build-component-generation-context
tokens for context entry Button : 696 (limit : 600)
tokens for context entry Card : 6525 (limit : 600)
tokens for context entry Dropdown : 605 (limit : 600)
tokens for context entry Forms : 623 (limit : 600)
tokens for context entry Modal : 886 (limit : 600)
tokens for context entry Pagination : 473 (limit : 600)
tokens for context entry Sidebar : 683 (limit : 600)
pass 2/7
init : passes/generate-component-new
{
context: [
{
role: 'system',
content: 'You are an expert at writing React components.\n' +
'Your task is to write a new React component for a web app, according to the provided task details.\n' +
'The React component you write can make use of Tailwind ...'
},
{
role: 'user',
content: 'Library components can be used while making the new React component\n' +
'\n' +
'Suggested library component (1/7) : Button - Enable user interaction with the button component to perform actions on your website a ...'
},
{
role: 'user',
content: 'Library components can be used while making the new React component\n' +
'\n' +
'Suggested library component (2/7) : Card - Get started with the card component to show content in a box such as titles, description ...'
},
{
role: 'user',
content: 'Library components can be used while making the new React component\n' +
'\n' +
'Suggested library component (3/7) : Dropdown - Use the dropdown component to trigger a list of menu items when clicking on an eleme ...'
},
{
role: 'user',
content: 'Library components can be used while making the new React component\n' +
'\n' +
'Suggested library component (4/7) : Forms - Use the forms elements from Flowbite React to start receiving user input data based on ...'
},
{
role: 'user',
content: 'Library components can be used while making the new React component\n' +
'\n' +
'Suggested library component (5/7) : Modal - Use the modal component to show an interactive dialog to your website users that overla ...'
},
{
role: 'user',
content: 'Library components can be used while making the new React component\n' +
'\n' +
'Suggested library component (6/7) : Pagination - Get started with the pagination component to indicate the number of pages with num ...'
},
{
role: 'user',
content: 'Library components can be used while making the new React component\n' +
'\n' +
'Suggested library component (7/7) : Sidebar - Use the sidebar component to show a list of menu items including multi-level dropdown ...'
},
{
role: 'user',
content: 'Icon elements can optionally be used when making the React component.\n' +
'\n' +
'---\n' +
'\n' +
'# example: importing icons in the component (only import the ones you need) :\n' +
'\n' +
'tsx\n' + 'import { Car , CarFront , Figma , Pock ...' }, { role: 'user', content: '- COMPONENT NAME : Vehicle Database Interface_WCH7X\n' + '\n' + '- COMPONENT DESCRIPTION :\n' + '\n' +
'Design a Website Interface for a Vehicle Information Database: 1. Main Content Area: - Vehicle Card Layout: Each ...'
}
]
}
total context prompt tokens (estimate) : 6185

import React from "react";
import { Button, Card, Dropdown, Modal, Select, RangeSlider, Pagination } from 'flowbite-react';
import { Car as CarIcon } from "lucide-react";

export default function VehicleDatabaseInterface_WCH7X() {
  return (
    <div className="flex dark:bg-black">
      <div className="grid grid-cols-3 gap-4 ">
        {Array(9).fill(
          <Card className="max-w-xs">
            <img src="https://via.placeholder.com/150" alt="Vehicle" />
            <h3 className="font-bold">2023 Toyota Corolla</h3>
            <p>Mileage: 45,000 miles</p>
            <p>VIN: 1HGCM82633A123456</p>
            <Button>More details</Button>
            <Modal dismissible show={false} onClose={() => { }}>
              <Modal.Header>More Details</Modal.Header>
              <Modal.Body>
                <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                  Complete vehicle details
                </p>
              </Modal.Body>
            </Modal>
          </Card>
        )}
        <Pagination currentPage={1} totalPages={3} onPageChange={() => { }} />
      </div>
      <div className="flex flex-col bg-gray-200 dark:bg-gray-800 p-4">
        <Dropdown label="Make" dismissOnClick={false}>
          <Dropdown.Item>Ford</Dropdown.Item>
          <Dropdown.Item>Toyota</Dropdown.Item>
          <Dropdown.Item>Nissan</Dropdown.Item>
          <Dropdown.Item>Hyundai</Dropdown.Item>
        </Dropdown>
        <Dropdown label="Model" dismissOnClick={false}>
          <Dropdown.Item>Focus</Dropdown.Item>
          <Dropdown.Item>Corolla</Dropdown.Item>
          <Dropdown.Item>Altima</Dropdown.Item>
          <Dropdown.Item>Elantra</Dropdown.Item>
        </Dropdown>
        <h4 className="font-bold mt-4">Year</h4>
        <RangeSlider id="year-range" min={2000} max={2023} step={1} />
        <h4 className="font-bold mt-4">Mileage</h4>
        <RangeSlider id="mileage-range" min={0} max={150000} step={1000} />
        <Button className="mt-4">Apply Filters</Button>
      </div>
    </div>
  );
}

pass 3/7
init : passes/validate-check-generated-component
C:\Users\todor\Downloads\OpenV0\openv0\server\modules\multipass\passes\validate-check-generated-component\index.js:127
return jsxElements.filter((e) => e[0].toUpperCase() === e[0]);
^

TypeError: Cannot read properties of undefined (reading '0')
at C:\Users\todor\Downloads\OpenV0\openv0\server\modules\multipass\passes\validate-check-generated-component\index.js:127:37
at Array.filter ()
at _babel_extract_nodes (C:\Users\todor\Downloads\OpenV0\openv0\server\modules\multipass\passes\validate-check-generated-component\index.js:127:22)
at validate (C:\Users\todor\Downloads\OpenV0\openv0\server\modules\multipass\passes\validate-check-generated-component\index.js:384:32)
at Object.run (C:\Users\todor\Downloads\OpenV0\openv0\server\modules\multipass\passes\validate-check-generated-component\index.js:489:16)
at run (C:\Users\todor\Downloads\OpenV0\openv0\server\modules\multipass\index.js:31:65)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.preset (C:\Users\todor\Downloads\OpenV0\openv0\server\modules\multipass\index.js:80:10)
at async C:\Users\todor\Downloads\OpenV0\openv0\server\api.js:138:21

Node.js v18.15.0

Looks like an issue in:

 C:\Users\todor\Downloads\OpenV0\openv0\server\modules\multipass\passes\validate-check-generated-component\index.js:127
  return jsxElements.filter((e) => e[0].toUpperCase() === e[0]);
TypeError: Cannot read properties of undefined (reading '0')  <- e[0].toUppderCase()

Sorry if my issue is badly structured. I'm new to this

Public Sharing via Openv0.com

On the website it says we would have had this in October week 2, it’s November now and still not implemented

illegal operation on a directory

Getting this error when loading the home view for the first time or navigating back to it.

EISDIR: illegal operation on a directory, read C:/Projekte/openv0/openv0_vitereact/src/components/ui

Feature Request: Add Docker Support

Hi @raidendotai , are you planning on adding Docker support anytime soon? If not, I can help with this feature

FetchError: request to https://api.openai.com/v1/chat/completions failed, reason: connect ETIMEDOU

An error occurred during local startup.
The API key is correct, but the request has been consistently timed out.
Does anyone know what happened ？thanks
wrong info:
cause: FetchError: request to https://api.openai.com/v1/chat/completions failed, reason: connect ETIMEDOUT 202.160.128.210:443
at ClientRequest. (D:\project\openv0\server\node_modules\node-fetch\lib\index.js:1501:11)
at ClientRequest.emit (node:events:513:28)
at TLSSocket.socketErrorListener (node:_http_client:494:9)
at TLSSocket.emit (node:events:525:35)
at emitErrorNT (node:internal/streams/destroy:157:8)
at emitErrorCloseNT (node:internal/streams/destroy:122:3)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
type: 'system',
errno: 'ETIMEDOUT',
code: 'ETIMEDOUT'
}

Error when cloning the repo

⠋ creating openv0/webbapp from : openv0/webapps-starters/next/shadcnError: [Error: ENOENT: no such file or directory, lstat 'C:\Users\54342\genuifromchat\src\openv0\webapps-starters\next\shadcn'] {
errno: -4058,
code: 'ENOENT',
syscall: 'lstat',
path: 'C:\Users\54342\genuifromchat\src\openv0\webapps-starters\next\shadcn'
}

Bug: External libraries not supported

When you ask to make components with external libraries, the app will crash.
Example:
A component with a lottie animation

It will try to start the require("lottie")

Quick fix: Add to the prompt: "Do not use external libraries"

eason: read ECONNRESET

cause: FetchError: request to https://api.openai.com/v1/chat/completions failed, reason: read ECONNRESET

HTMX support

It would be great to see htmx support in openv0. Thanks!

Error: Cannot redefine property: File

Getting the following error when following the install instructions and running npm run dev in the webapp folder.

failed to load config from /Users/marklyck/web/openv0/webapp/vite.config.ts
error when starting dev server:
TypeError: Cannot redefine property: File
    at Function.defineProperty (<anonymous>)
    at Object.<anonymous> (/Users/marklyck/web/openv0/webapp/node_modules/@babel/core/lib/index.js:7:8)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at Object.<anonymous> (/Users/marklyck/web/openv0/webapp/node_modules/@babel/core/lib/config/helpers/config-api.js:16:14)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)

Server seems to start fine.

I tried clearing node_modules and reinstalling, but still the same issue. Tried with bun instead npm but also same issue.

Here's the vite.config.ts file it's complaining about:

import path from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

in the setup options I chose:

react
ShadCN
Lucide
I pasted my OpenAI API key
(Y) to the last recommended option.

installation had no issues

Any workaround to use it for free?

Greetings.

I came across this repo yesterday and thought of trying it on my local system, I was successful configuring but didn't have a paid openai account as I ran out of credits. So is there any workaround to use it for free?

Please let me know, eager to try this out!. Appreciate the great work put into this masterpiece.

Regards
Dawn Saju

Code clean up

While studying the codebase, some low hanging issues to clean up the codebase I'd address are:

Add Prettier.
Fix up warnings. A lot of yellow warnings across the app.
Remove unused packages.

Beyond that:

Remove hard coded localhost strings.
Will production version write version files to disk? Or use a database?

I know the v1 was put together very quickly which is why much of this wasn't addressed.

Is this project alive?

Import failure

[plugin:vite:import-analysis] Failed to resolve import "@components/ui/card" from "src/components/openv0_generated/landingpage_n7h7m/1695641110405.tsx". Does the file exist?

Any simple way to solve this?

Fatal: Too many arguments

When I run npx openv0, I get this:

$ npx openv0
⠋ cloning https://github.com/raidendotai/openv0.git in C:\...\openv0fatal: Too many arguments.

usage: git clone [<options>] [--] <repo> [<dir>]

    -v, --verbose         be more verbose
    -q, --quiet           be more quiet
    --progress            force progress reporting
    --reject-shallow      don't clone shallow repository
    -n, --no-checkout     don't create a checkout
    --bare                create a bare repository
    --mirror              create a mirror repository (implies bare)
    -l, --local           to clone from a local repository
    --no-hardlinks        don't use local hardlinks, always copy
    -s, --shared          setup as shared repository
    --recurse-submodules[=<pathspec>]
                          initialize submodules in the clone
    --recursive ...       alias of --recurse-submodules
    -j, --jobs <n>        number of submodules cloned in parallel
    --template <template-directory>
                          directory from which templates will be used
    --reference <repo>    reference repository
    --reference-if-able <repo>
                          reference repository
    --dissociate          use --reference only while cloning
    -o, --origin <name>   use <name> instead of 'origin' to track upstream
    -b, --branch <branch>
                          checkout <branch> instead of the remote's HEAD
    -u, --upload-pack <path>
                          path to git-upload-pack on the remote
    --depth <depth>       create a shallow clone of that depth
    --shallow-since <time>
                          create a shallow clone since a specific time
    --shallow-exclude <revision>
                          deepen history of shallow clone, excluding rev
    --single-branch       clone only one branch, HEAD or --branch
    --no-tags             don't clone any tags, and make later fetches not to follow them       
    --shallow-submodules  any cloned submodules will be shallow
    --separate-git-dir <gitdir>
                          separate git dir from working tree
    -c, --config <key=value>
                          set config inside the new repository
    --server-option <server-specific>
                          option to transmit
    -4, --ipv4            use IPv4 addresses only
    -6, --ipv6            use IPv6 addresses only
    --filter <args>       object filtering
    --also-filter-submodules
                          apply partial clone filters to submodules
    --remote-submodules   any cloned submodules will use their remote-tracking branch
    --sparse              initialize sparse-checkout file to include only files at root

Error: Command failed: git clone --depth 1 https://github.com/raidendotai/openv0.git C:\...\openv0
fatal: Too many arguments.

usage: git clone [<options>] [--] <repo> [<dir>]

    -v, --verbose         be more verbose
    -q, --quiet           be more quiet
    --progress            force progress reporting
    --reject-shallow      don't clone shallow repository
    -n, --no-checkout     don't create a checkout
    --bare                create a bare repository
    --mirror              create a mirror repository (implies bare)
    -l, --local           to clone from a local repository
    --no-hardlinks        don't use local hardlinks, always copy
    -s, --shared          setup as shared repository
    --recurse-submodules[=<pathspec>]
                          initialize submodules in the clone
    --recursive ...       alias of --recurse-submodules
    -j, --jobs <n>        number of submodules cloned in parallel
    --template <template-directory>
                          directory from which templates will be used
    --reference <repo>    reference repository
    --reference-if-able <repo>
                          reference repository
    --dissociate          use --reference only while cloning
    -o, --origin <name>   use <name> instead of 'origin' to track upstream
    -b, --branch <branch>
                          checkout <branch> instead of the remote's HEAD
    -u, --upload-pack <path>
                          path to git-upload-pack on the remote
    --depth <depth>       create a shallow clone of that depth
    --shallow-since <time>
                          create a shallow clone since a specific time
    --shallow-exclude <revision>
                          deepen history of shallow clone, excluding rev
    --single-branch       clone only one branch, HEAD or --branch
    --no-tags             don't clone any tags, and make later fetches not to follow them       
    --shallow-submodules  any cloned submodules will be shallow
    --separate-git-dir <gitdir>
                          separate git dir from working tree
    -c, --config <key=value>
                          set config inside the new repository
    --server-option <server-specific>
                          option to transmit
    -4, --ipv4            use IPv4 addresses only
    -6, --ipv6            use IPv6 addresses only
    --filter <args>       object filtering
    --also-filter-submodules
                          apply partial clone filters to submodules
    --remote-submodules   any cloned submodules will use their remote-tracking branch
    --sparse              initialize sparse-checkout file to include only files at root


    at checkExecSyncError (node:child_process:885:11)
    at execSync (node:child_process:957:15)
    at main (C:\...\\AppData\Local\npm-cache\_npx\fabb3733df22c199\node_modules\openv0\bin.js:28:3)
    at Object.<anonymous> (C:\...\\AppData\Local\npm-cache\_npx\fabb3733df22c199\node_modules\openv0\bin.js:61:1)
    at Module._compile (node:internal/modules/cjs/loader:1218:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
    at Module.load (node:internal/modules/cjs/loader:1081:32)
    at Module._load (node:internal/modules/cjs/loader:922:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {     
  status: 129,
  signal: null,
  output: [
    null,
    <Buffer >,
    <Buffer 66 61 74 61 6c 3a 20 54 6f 6f 20 6d 61 6e 79 20 61 72 67 75 6d 65 6e 74 73 2e 0a 0a 
75 73 61 67 65 3a 20 67 69 74 20 63 6c 6f 6e 65 20 5b 3c 6f 70 74 ... 2514 more bytes>
  ],
  pid: 23644,
  stdout: <Buffer >,
3 2e 0a 0a 75 73 61 67 65 3a 20 67 69 74 20 63 6c 6f 6e 65 20 5b 3c 6f 70 74 ... 2514 more bytes>     
⠹ cloning https://github.com/raidendotai/openv0.git in C:\...\openv0

and then it just spins forever with the ⠹. I am on Windows 10 and this happens in Powershell and Git Bash.

Blank screen after openv0 attempts to generate a component

I'm ending up with a blank white screen after openv0 generates a component. It was working fine previously, and the only way to fix this is to run npx openv0 again to reinstall the app.

After passing in the baseURL for the OPENAI object, Api will report an error when generating the component

I have modified the code in these areas of the program


const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
  baseURL: 'my api url',
});


/openv0/server/modules/multipass/passes/build-component-generation-context/rag_icons.js
  7,16: const openai = new OpenAI({
/openv0/server/modules/multipass/passes/design-component-iteration-from-description/index.js
  10,16: const openai = new OpenAI({
/openv0/server/modules/multipass/passes/design-component-iteration-from-json/index.js
  10,16: const openai = new OpenAI({
/openv0/server/modules/multipass/passes/design-component-new-from-description/index.js
  10,16: const openai = new OpenAI({
/server/modules/multipass/passes/design-component-new-from-json/index.js
  10,16: const openai = new OpenAI({
/server/modules/multipass/passes/generate-component-iteration/index.js
  6,16: const openai = new OpenAI({
/server/modules/multipass/passes/generate-component-new/index.js
  6,16: const openai = new OpenAI({
/server/modules/multipass/passes/validate-fix-generated-component/index.js
  9,16: const openai = new OpenAI({

I am confident that my interface address can be accessed and used normally. It supports the GPT4 model, and I have tested it using the OpenAI package in my own program. But in this program, I encountered an error while generating the component using my own Api address. The error is as follows：

gpt-4 model

Server is running on http://localhost:3000
Connected to the database
{
  module: 'multipass/preset',
  preset: {
    name: 'componentNew_description',
    description: 'generate a new component from a text description'
  }
}
{
  module: 'multipass/run',
  status: 'starting',
  query: {
    description: 'google search ui',
    framework: 'react',
    components: 'nextui',
    icons: 'lucide'
  },
  preset: {
    name: 'componentNew_description',
    description: 'generate a new component from a text description'
  },
  passes: [
    'design-component-new-from-description',
    'build-component-generation-context',
    'generate-component-new',
    'validate-check-generated-component',
    'validate-fix-generated-component',
    'postprocess-generated-component',
    'store-component',
    'export-component'
  ]
}
> pass 0/7
> init : passes/design-component-new-from-description
undefined:1
()
 ^

SyntaxError: Unexpected token ')'
    at Object.run (/home/orzmiku/DevDrive/aicode/openv0/server/modules/multipass/passes/design-component-new-from-description/index.js:154:17)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async run (/home/orzmiku/DevDrive/aicode/openv0/server/modules/multipass/index.js:31:22)
    at async Object.preset (/home/orzmiku/DevDrive/aicode/openv0/server/modules/multipass/index.js:80:10)
    at async /home/orzmiku/DevDrive/aicode/openv0/server/api.js:138:21

Node.js v18.18.0

gpt-3.5-turbo model

(base) orzmiku@DevMiku:~/DevDrive/aicode/openv0/server$ node api.js 
Server is running on http://localhost:3000
Connected to the database
{
  module: 'multipass/preset',
  preset: {
    name: 'componentNew_description',
    description: 'generate a new component from a text description'
  }
}
{
  module: 'multipass/run',
  status: 'starting',
  query: {
    description: 'google search ui',
    framework: 'react',
    components: 'nextui',
    icons: 'lucide'
  },
  preset: {
    name: 'componentNew_description',
    description: 'generate a new component from a text description'
  },
  passes: [
    'design-component-new-from-description',
    'build-component-generation-context',
    'generate-component-new',
    'validate-check-generated-component',
    'validate-fix-generated-component',
    'postprocess-generated-component',
    'store-component',
    'export-component'
  ]
}
> pass 0/7
> init : passes/design-component-new-from-description
{
{
  "new_component_name": "GoogleSearchUI",
  "new_component_description": "The GoogleSearchUI component is designed to replicate the user interface of the Google search engine. It allows users to input search queries and displays search results in a visually appealing and user-friendly manner.",
  "use_library_components": [
    {
      "library_component_name": "",
Input",
      "library_component_usage_reason": "To provide a text input field where users can enter their search query."
    },
    {
      "library_component_name": "Button",
      "library_component_usage_reason": "To display a search button that users can click to initiate the search."
    },
    {
      "library_component_name": "Card",
      "library_component_usage_reason": "To display the search results in a card-like format, with relevant information and a title."
    },
    {
      "library_component_name": "Avatar",
      "library_component_usage_reason": "To display the profile picture or logo of the source of the search result."
    },
    {
      "library_component_name": "Link",
      "library_component_usage_reason": "To create clickable links that direct users to the source of the search result."
    }
  ]
}undefined:2
{
^

SyntaxError: Unexpected token '{'
    at Object.run (/home/orzmiku/DevDrive/aicode/openv0/server/modules/multipass/passes/design-component-new-from-description/index.js:154:17)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async run (/home/orzmiku/DevDrive/aicode/openv0/server/modules/multipass/index.js:31:22)
    at async Object.preset (/home/orzmiku/DevDrive/aicode/openv0/server/modules/multipass/index.js:80:10)
    at async /home/orzmiku/DevDrive/aicode/openv0/server/api.js:138:21

Node.js v18.18.0

Backend crashing

Backend crashes

➜  openv0 node server/db.js 
TypeError: Cannot read properties of undefined (reading 'startsWith')
    at main (/Users/sahan/openv0/server/db.js:142:20)
    at Object.<anonymous> (/Users/sahan/openv0/server/db.js:151:1)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47
➜  openv0 node server/api.js
Server is running on http://localhost:3000
Connected to the database


node:internal/process/promises:288
            triggerUncaughtException(err, true /* fromPromise */);
            ^

Error
    at Database.<anonymous> (/Users/sahan/openv0/server/node_modules/sequelize/lib/dialects/sqlite/query.js:185:27)
    at /Users/sahan/openv0/server/node_modules/sequelize/lib/dialects/sqlite/query.js:183:50
    at new Promise (<anonymous>)
    at Query.run (/Users/sahan/openv0/server/node_modules/sequelize/lib/dialects/sqlite/query.js:183:12)
    at /Users/sahan/openv0/server/node_modules/sequelize/lib/sequelize.js:315:28
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async SQLiteQueryInterface.select (/Users/sahan/openv0/server/node_modules/sequelize/lib/dialects/abstract/query-interface.js:407:12)
    at async Component.findAll (/Users/sahan/openv0/server/node_modules/sequelize/lib/model.js:1140:21)
    at async /Users/sahan/openv0/server/api.js:74:23 {
  name: 'SequelizeDatabaseError',
  parent: [Error: SQLITE_ERROR: no such table: Components] {
    errno: 1,
    code: 'SQLITE_ERROR',
    sql: "SELECT `id`, `name`, `version`, `description`, `framework`, `components`, `icons`, `code`, `query`, `logs` FROM `Components` AS `Component` WHERE `Component`.`framework` = 'react' AND `Component`.`components` = 'shadcn' AND `Component`.`icons` = 'lucide';"
  },
  original: [Error: SQLITE_ERROR: no such table: Components] {
    errno: 1,
    code: 'SQLITE_ERROR',
    sql: "SELECT `id`, `name`, `version`, `description`, `framework`, `components`, `icons`, `code`, `query`, `logs` FROM `Components` AS `Component` WHERE `Component`.`framework` = 'react' AND `Component`.`components` = 'shadcn' AND `Component`.`icons` = 'lucide';"
  },
  sql: "SELECT `id`, `name`, `version`, `description`, `framework`, `components`, `icons`, `code`, `query`, `logs` FROM `Components` AS `Component` WHERE `Component`.`framework` = 'react' AND `Component`.`components` = 'shadcn' AND `Component`.`icons` = 'lucide';",
  parameters: {}
}

Steps to reproduce

Follow the readme to npx@openv0
start both frontend and backend
when the frontend is opened on the web browser now the backend crashes

Support mantine

Would be nice to have support for mantine.dev

Index does not exist

Am I doing something wrong or is this a bug?

}> pass 1/7
> init : passes/build-component-generation-context
/home/theo/dev/openv0/server/node_modules/.pnpm/[email protected]/node_modules/vectra/lib/LocalIndex.js:342
                throw new Error('Index does not exist');
                      ^

Error: Index does not exist
    at LocalIndex.<anonymous> (/home/theo/dev/openv0/server/node_modules/.pnpm/[email protected]/node_modules/vectra/lib/LocalIndex.js:342:23)
    at Generator.next (<anonymous>)
    at fulfilled (/home/theo/dev/openv0/server/node_modules/.pnpm/[email protected]/node_modules/vectra/lib/LocalIndex.js:28:58)

Node.js v21.4.0

Issue generating components

It errors after creating a substantial amount of code and then the api.js just terminates with this message

Please note; I had another thing on port 3000 so had to move it to 9064 (opnv)
I changed localhost:3000 to localhost 9064 in views and browse. Hopefully that doesn't cause an issue somewhere in the pipeline.

pass 3/7
> init : passes/validate-check-generated-component
/home/construct-ai/openv0/openv0/server/modules/multipass/passes/validate-check-generated-component/index.js:127
  return jsxElements.filter((e) => e[0].toUpperCase() === e[0]);
                                    ^

TypeError: Cannot read properties of undefined (reading '0')
    at /home/construct-ai/openv0/openv0/server/modules/multipass/passes/validate-check-generated-component/index.js:127:37
    at Array.filter (<anonymous>)
    at _babel_extract_nodes (/home/construct-ai/openv0/openv0/server/modules/multipass/passes/validate-check-generated-component/index.js:127:22)
    at validate (/home/construct-ai/openv0/openv0/server/modules/multipass/passes/validate-check-generated-component/index.js:384:32)
    at Object.run (/home/construct-ai/openv0/openv0/server/modules/multipass/passes/validate-check-generated-component/index.js:489:16)
    at run (/home/construct-ai/openv0/openv0/server/modules/multipass/index.js:31:65)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.preset (/home/construct-ai/openv0/openv0/server/modules/multipass/index.js:80:10)
    at async /home/construct-ai/openv0/openv0/server/api.js:155:21

Node.js v20.11.0

Preview broken?

Hello

I'm trying to render a simple registration/login modal form.
After it's ready, it's only showing me 2 buttons, no forms.
But if I check the code, everything is there.

I tried with a few components so far, and it keeps repeating this by returning an incomplete preview.
I also tried by iterating changes to it, but it remains same problem./

Example:

Code output I got back:

`
import { Button } from '@/components/ui/button';
import { Dialog } from '@/components/ui/dialog';
import { DialogContent } from '@/components/ui/dialog';
import { DialogTrigger } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Tabs } from '@/components/ui/tabs';
import { TabsContent } from '@/components/ui/tabs';
import { TabsTrigger } from '@/components/ui/tabs';
import { Lock } from 'lucide-react';
import { Mail } from 'lucide-react';
import { UserCircle2 } from 'lucide-react';
import React from 'react';
"use client";

const RegistrationLoginModal_BHE62: React.FC = () => {

return (

Sign in / Register

Login
Register

      <TabsContent value="login" className="p-4">
        <div className="mb-4 flex items-center">
          <UserCircle2 className="h-4 w-4 mr-2" />
          <Input type="text" placeholder="Username" />
        </div>
        <div className="mb-4 flex items-center">
          <Lock className="h-4 w-4 mr-2" />
          <Input type="password" placeholder="Password" />
        </div>
        <Button variant="outline" className="w-full">Login</Button>
      </TabsContent>

      <TabsContent value="register" className="p-4">
        <div className="mb-4 flex items-center">
          <UserCircle2 className="h-4 w-4 mr-2" />
          <Input type="text" placeholder="Username" />
        </div>
        <div className="mb-4 flex items-center">
          <Mail className="h-4 w-4 mr-2" />
          <Input type="email" placeholder="Email" />
        </div>
        <div className="mb-4 flex items-center">
          <Lock className="h-4 w-4 mr-2" />
          <Input type="password" placeholder="Password" />
        </div>
        <div className="mb-4 flex items-center">
          <Lock className="h-4 w-4 mr-2" />
          <Input type="password" placeholder="Confirm Password" />
        </div>
        <Button variant="outline" className="w-full bg-green-500 text-white">Register</Button>
      </TabsContent>
    </Tabs>
  </DialogContent>
</Dialog>

);
};

export default RegistrationLoginModal_BHE62;
`

How to add a new component library

Dark Mode

Is there some way to make openv0 stay in Dark Mode?

Fails to find result

love the idea

support Azure OpenAI Service & ReactFlow

support for shadcn/vue?

feature request: support for shadcn/vue! :)

illegal operation on a directory

I'm getting a number of errors. It looks like the generated code is sometimes faulty where it triggers the error modal after making a request and getting the result. Might be a good idea to suppress/handle errors coming from the generated code to not break functionality. Excited to see this evolve.

Unable to generate components, db connection refused

standard start -- npx openv0@latest, npm run dev, also the other thing to start the db, which is running. chose react and shadcn for components, operating in the WSL2 ubuntu environment so there might be something weird going on there. I just get a forever-hang after clicking the generate button.

Support for Heroicons

Any future plan to support Heroicons. Below are the reasons:

ChatGPT model when using Tailwind, mostly uses hero icons instead of lucide.
Because of this, Code is once again generated in which icons are replaced with SVG which takes time to complete. Also, these SVG do not correctly reflect and sometimes appear to be broken
I tried updating the command to support only lucid-react icons. However, the generated code is either not saved or displayed on the UI.

CORS issue - failed to fetch POST localhost:3000/components/new

Running server:

~/code/misc/openv0/openv0_server
❯ node index.js
Server is running on port 3000 --------------------

{
  event: '> ./modules/export/react dump_webapp() started',
  warn: 'if webapp crashes because of invalid generated components\n' +
    'add componentId and version to ./generated/export_ignore.txt\n' +
    'then run `node export_refresh.js` from server folder'
}
{
  EXPORT_IGNORE: {
    './generated/export_ignore.txt': [
      'CodeSnippet_x7n4c',
      'ExampleBadComponent_aBc99 1695074919799',
      'FitnessCoachingPricingComponent_3IT9E 1695113383715'
    ]
  }
}

Running client:

~/code/misc/openv0/openv0_vitereact
❯  npm run dev

> [email protected] dev
> vite


  VITE v4.4.9  ready in 255 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Clicking "Generate" gets a CORS issue on POST /components/new

Access to fetch at 'http://localhost:3000/component/new' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
generate-new-component.tsx:28     POST http://localhost:3000/component/new net::ERR_FAILED
handleButtonClick @ generate-new-component.tsx:28
callCallback2 @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
Show 15 more frames
Show less
generate-new-component.tsx:47 API request failed: TypeError: Failed to fetch
    at handleButtonClick (generate-new-component.tsx:28:30)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:25)
    at executeDispatch (react-dom.development.js:9041:3)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:7)
    at processDispatchQueue (react-dom.development.js:9086:5)
    at dispatchEventsForPlugins (react-dom.development.js:9097:3)
    at react-dom.development.js:9288:12
handleButtonClick @ generate-new-component.tsx:47
await in handleButtonClick (async)
callCallback2 @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
Show 15 more frames
Show less

LLM server local server for openv0 VS openai

is it possible to use a free local server with a LLM model instead of OpenAI ?
https://ollama.ai