https://github.com/react-declarative/chatgpt-form-builder

Generate and preview large React components with ChatGPT
https://github.com/react-declarative/chatgpt-form-builder

chatgpt chatgpt-api code-generation gpt4all mui nextjs openai react reactjs tailwindcss

Last synced: about 2 months ago
JSON representation

Generate and preview large React components with ChatGPT

• Host: GitHub
• URL: https://github.com/react-declarative/chatgpt-form-builder
• Owner: react-declarative
• Created: 2024-06-04T10:16:39.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-06-04T15:04:28.000Z (8 months ago)
• Last Synced: 2024-06-04T18:05:49.528Z (8 months ago)
• Topics: chatgpt, chatgpt-api, code-generation, gpt4all, mui, nextjs, openai, react, reactjs, tailwindcss
• Language: JavaScript
• Homepage: https://github.com/react-declarative/react-declarative
• Size: 133 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ⚛️ ChatGPT React Generator

> The ChatGPT app which write a JSX form for [React-Vite](https://vitejs.dev/) application

![gpt](./docs/gpt.png)

A ChatGPT powered React Code Generator. Specify what kind of React form you want to build and directly get the code and a live preview.

## Contribute

> [!IMPORTANT]

> Made by using [react-declarative](https://github.com/react-declarative/react-declarative) to solve your problems. **⭐Star** and **💻Fork** It on github will be appreciated

## How It's Work

1. The [postinstall.mjs](./scripts/postinstall.mjs) file download `Nous-Hermes-2-Mistral-7B` [LLM](https://en.wikipedia.org/wiki/Large_language_model)

2. The [index.mjs](./index.mjs) file generate RAW `./tmp.txt` according to the [SYSTEM_PROMPT](./assets/SYSTEM_PROMPT.txt) and the [USER_PROMPT](./assets/USER_PROMPT.txt)

3. The [index.mjs](./index.mjs) transform markdown in `./tmp.txt` to jsx in `./src/out/index.jsx` according to the [TRANSFORM_PROMPT](./assets/TRANSFORM_PROMPT.txt)

4. The Vite server start the UI on `http://localhost:3000`

## Usage

1. Run `npm install`

2. Edit the [USER_PROMPT](./assets/USER_PROMPT.txt)

3. Run `npm start` to generate the code. Will take a couple of minutes if running on CPU. GPU require at least 16Gb embedded RAM

4. Run `npm run test` to launch the code