raidendotai / openv0 Goto Github PK
View Code? Open in Web Editor NEWAI generated UI components
License: MIT License
AI generated UI components
License: MIT License
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
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(); }
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'
}
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
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
Hi @raidendotai , are you planning on adding Docker support anytime soon? If not, I can help with this feature
It would be great to see htmx support in openv0. Thanks!
Would be nice to have support for mantine.dev
On the website it says we would have had this in October week 2, it’s November now and still not implemented
support Azure OpenAI Service & ReactFlow
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
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.
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:
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
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.
Any future plan to support Heroicons. Below are the reasons:
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
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
feature request: support for shadcn/vue! :)
While studying the codebase, some low hanging issues to clean up the codebase I'd address are:
Beyond that:
I know the v1 was put together very quickly which is why much of this wasn't addressed.
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;
`
cause: FetchError: request to https://api.openai.com/v1/chat/completions failed, reason: read ECONNRESET
"[could not import]"
After completion I think it fails to run the generated components code maybe due to some syntax error.
⠋ 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'
}
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.
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
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"
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.
is it possible to use a free local server with a LLM model instead of OpenAI ?
https://ollama.ai
Great work! Hope the video helps some people.
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:
installation had no issues
Is there some way to make openv0 stay in Dark Mode?
How to add a new component library
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.