As an avid coder, I often have to deal with troubleshooting various bugs and errors during development. Normally, developers have had to turn to Stack Overflow in the hope that someone else has suffered the same issue, but more often than not, we end up empty-handed. However, with the advent of new technologies such as ChatGPT, we now have to sum knowledge of humanity easily available - and that includes all coding ever done. With ChatGPT, the debugging process can be reduced from hours to seconds, and EditorGPT was my attempt to seamlessly integrate this feature into one convenient application.
What it does
I created EditorGPT to allow developers to easily interact with ChatGPT for instant analyses and feedback about their code, with a built-in editor and compiler that allows developers to see their code output and any possible errors. Users will not have to deal with continuously copy-pasting their code into ChatGPT over and over again - simply writing a message to the built-in interface instantly sends the query along with the code to ChatGPT, allowing the developer to get a tailored response for their code. Additionally, while the OpenAI API for ChatGPT does not support memory features, I implemented my own memory capability, allowing the user to hold a conversation with the chatbot while not losing any key context about their code.
The most difficult part of this project was getting the Editor and compiler to work and creating the memory system for ChatGPT. I originally planned to integrate an template code editor and focus on the ChatGPT implementation, but I quickly realized that many packages and libraries I found on npm for the editor and compiler were deprecated and unsuitable for this project, and even when I tried to find some combination, none existed. As such, I had to dig all the way down to basics and create a DIY code editor using a combination of various libraries, from Monaco for the VSCode aesthetic to Node VM and Skulpt for the compiling. On the other hand, ChatGPT was frustrating to deal with at first as I quickly realized its limitations, especially regarding holding conversations. I had to implement a completely novel memory system incorporating the user's previous messages and the bot's previous responses and sending all of that as a new query to ChatGPT as "context". However, it worked perfectly and the bot was able to understand the intention of the context! This was one of my greatest challenges, but at the same time, one of my greatest successes.
EditorGPT was built using T3, Next, Next-Auth, React, and Tailwind, and was written using Typescript. I utilized the most modern, robust frameworks and frontend libraries to maximize the user experience, while also minimizing the amount of development time necessary to achieve my vision. I used React and Tailwind for the styling, look, and feel of the website, including all the states to control the quality of life features and buttons. I used NextAuth along with Google and Discord providers (along with their OAuth APIs) to allow the user to sign in to the app. The editor is implemented using the Monaco editor library, which essentially replicates the iconic VSCode editor. To compile the code, I used Node for JS and Skulpt for Python. I accessed ChatGPT using the OpenAI API, using the gpt-3.5-turbo model.
Discussion