Skip to content

Use text or image prompts to generate components and apps built with React.

Notifications You must be signed in to change notification settings

reidbarber/gen-ui

Repository files navigation

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.

Screenshot of GenUI Studio with a timeline panel on the left, code in the middle, rendered example on the right, and prompt bar overlayed on bottom. Example shows a signup form being built.

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.