EditorGPT

The application interface
Application logo
Example of EditorGPT diagnosing an issue

Inspiration

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.

How we built it

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, which is what OpenAI currently uses for their chatbot.

One of the key issues I wanted to figure out was how to host the application. My solution was to use Github! I stored all of the data on Github, which allowed me to then access the repo using a service called Vercel to quickly build and deploy my application as a static website at https://editorgpt.vercel.app/.

Challenges we ran into

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.

Accomplishments that we're proud of

The editor turned out fantastic and even surprised me with what it was capable of. For example, with javascript, I tried entering an alert("hello world") just for fun, but to my surprise, when I ran the code, an alert actually popped up in the center of my app! Even though it was unintended, I saw that my code editor not only had this feature but actually had a leg up on other editors where you would have to deploy a whole html webpage first before being able to see the frontend javascript in action. Besides that, I am extremely proud of how easily everything works. Despite taking so much time and neck-aching troubleshooting, the app runs extremely smooth. Compiling code takes split seconds and ChatGPT returns responses in seconds. Additionally, I am also very proud of all the quality-of-life features I implemented, including a background/font switcher and a light/dark mode. I feel like these features, while not being critical to the intention of the app, offer a lot in terms of user customization and usability, which is key for code editors.

What we learned

The process creating EditorGPT was a total grind, but I gained valuable experience with the OpenAI API and the T3 stack. The T3 stack was invaluable in cutting down the time necessary to complete the project, as it preinstalled next and react and essentially provided me a starting point without having to configure all the env variables, type checking, next setup, etc. I would highly recommend it to any frontend developers! On the other hand, the OpenAI API was a blast to use and play around with. I played around with its parameters, like frequency penalty and temperature, to test how I could get the most ideal responses for code-related queries (it ended up stressing more creativity, so higher temp!). Additionally, figuring out how I could organize queries to include the code and conversation context was also immensely insightful, as I got to observe how the AI thinks and how long it reaches back in conversation history to determine what it says next.

What's next for EditorGPT

EditorGPT can currently output code in a console, but it would be amazing for frontend developers to be able to preview HTML code or React code. They could essentially paste their website codebase into the app and be able to learn about ways to improve their code structure or identify unseen errors or vulnerabilities. This is a whole new dimension for code editing within the browser, and would have to integrate package managers like npm, but this would add so much more functionality to the app and ChatGPT would be extremely valuable for this purpose.

Overall, I hope that EditorGPT can be a valuable addition to any developer's toolkit! Thank you for reading!