Keywords: React, ChatGPT, Prompt Engineering, gpt-3.5-turbo, GPT-4
Abstract
This paper introduces the development of a Mac app managing OpenAI API’s createCompletion and the implementation process of React page generation using the app. It’s an attempt to automate a part of the software development process using AI models.
1. Collection of Requirement Specifications
First, we launch an AI assistant with the following settings:
| Category | Description |
|---|---|
| Model | gpt-3.5-turbo-0613 |
| Name | System Company Salesman |
| Role | Hearing what kind of program the customer wants to create |
| Equipped with | The ability to launch AI instances (functions) |
We input page specifications and program requirements to this AI assistant, who then compiles them. Then, we communicate the save path and the content of the reference files in text format.
2. Program Generation by AI
Once the collection of requirement specifications is completed, our AI assistant communicates these requirements to a programmer. The programmer is an AI assistant with the following settings:
| Category | Description |
|---|---|
| Model | gpt-3.5-turbo-16k-0613 |
| Name | Programmer |
| Role | Codes only based on specifications and reference files. No unnecessary remarks are allowed |
| Equipped with | The ability to read and save files (extension (custom)) |
The programmer AI finishes coding and saves the file. This process utilizes extensions rather than functions because gpt-3.5-turbo frequently makes mistakes in JSON escape processing when passing program code through the API.
3. Verification of Outputs
The generated code is sent to us, and humans check it.
4. Tips (Prompt Engineering)
- DB settings: Use some templates to make the system easily accessible. Using templates helps maintain consistency throughout the program and reduces code errors.
- Difficulty with zero and one: AI has a sense of difficulty distinguishing between zero and one, which often leads to mistakes. Therefore, this characteristic should be considered when designing prompts.
That’s a rough process of our implementation of React page generation using AI. The rapid progress of technology using AI, including GPT-3.5-turbo and GPT-4, has left me unsure if what I’m doing is good or bad. I would like to hear your opinions. If you have any specific responses or suggestions, I’d be delighted to hear them in any form. Thank you.
Note: Some parts of this paper simplify the actual implementation; the actual system is more complex.
I have prepared a demo video below.
youtu.be/Bgsk2zdh518