GenUI
Use text or image prompts to generate UI components and apps built with React. Powered by OpenAI's Assistants API and CodeSandbox's Sandpack.
Get Started
Create a .env.local
file in the root of the project and add your OpenAI API key:
OPENAI_API_KEY=sk-...
Install
yarn install
Start the app
yarn dev
Open http://localhost:3000 to view it in your browser.
1. Create a new assistant
- These can be generic (e.g. React), or specific to a component library (e.g. React Spectrum)
- These can be managed within GenUI, or on OpenAI's Platform. Use OpenAI's platform to add files for knowledge retrieval (e.g. component library documentation in markdown files).
2. Create a new thread with that assistant
- This represents the app that you're building, and all its iterations.
3. Enter a text prompt and optionally add images.
- Note: Your OpenAI account must have access to the
gpt-vision-preview
model to upload images.
5. A working React app is generated based on the prompt.
6. Ask for modifications or more features to add to the app, and repeat.