How I used GPT-4 to write a StackOverflow assistant

Stackfriend explains the snippet you’re looking at, it can also convert it to a more familiar language

As a Fullstack developer, you understand the value of having quick and easy access to code snippets to help you solve problems and make progress on your projects. And there’s no denying the importance of Stack Overflow, the go-to resource for developers looking for answers to coding questions. But what if there was a tool that could take that experience to the next level? That’s exactly what I’ve tried to accomplish with StackFriend, a Chrome extension that leverages the power of GPT-4 to help developers browse Stack Overflow with ease and gain a deeper understanding of the code they’re working with.

The Rise of AI and Its Impact on Developer Tools

First, let’s take a step back and talk about how AI has blown up in recent years. As machine learning algorithms have become more sophisticated and computing power has increased, AI has been able to tackle increasingly complex problems. For developers, this has opened up a whole new world of possibilities, from automating mundane tasks to building cutting-edge applications that can learn and adapt on the fly.

But where AI has really shone is in the realm of natural language processing (NLP). This is where GPT-4 comes in. With its ability to parse and understand natural language, GPT-4 is able to do things like generate text, answer questions, and even translate between languages. StackFriend uses that ability to help you better understand the code snippet you’re looking at.

The problem

While Stack Overflow is an invaluable resource for developers looking for solutions to coding problems, the code snippets sometimes come with explanations that can be complicated or vague. Sometimes, you’ll be trying to learn a new programming language, and can benefit from looking at the code written in a programming language you’re already familiar with.

By leveraging the power of GPT-4 to explain code snippets in plain English and to convert code between programming languages, developers can gain a deeper understanding of the code they’re working with and solve problems more quickly and effectively. That way they can spend less time deciphering complex explanations, and more time building great applications.

Building StackFriend

To bring StackFriend to life, I relied on OpenAI’s powerful API to communicate with GPT-4. There are several client libraries that you can choose, depending on your preferred platform/ programming language. I decided to use the node.js SDK for a quick turnaround.

const request = `Please convert this code snippet from ${convertFrom} to ${convertTo}: \n\n${code}`

const response = await openai.createChatCompletion({
  model: "gpt-4",
  messages: [{
    role: "user", 
    content: request
  }],
  temperature: 0,
  top_p: 1.0,
  frequency_penalty: 0.0,
  presence_penalty: 0.0
})

As you can see in the snippet above, I’m using the code sent from the extension UI, along with the specified source and conversion languages, to construct a sentence and ask GPT to convert this code. It took a few tries to get the sentence right and have the result in the format I wanted. While GPT is good at recognizing programming languages, it seems that to do better if you give it a push in the right direction and tell it what language we’re working with.

In the second scenario, I construct a different sentence to make GPT explain the code:

const response = code + "\n\nHere's what the above code snippet is doing, explained in a concise way:\n"

const response = await openai.createChatCompletion({
  model: "gpt-4",
  messages: [{
    role: "assistant", 
    content: response
  }],
  temperature: 0,
  top_p: 1.0,
  frequency_penalty: 0.0,
  presence_penalty: 0.0
})

The interesting part in this code, is where previously we’ve asked GPT to answer the user’s request (role: “user”), now we’re writing the beginning of the answer (role: “assistant”), as if we are GPT, and asking GPT to complete itself.

The above code is done on the server side, hosted on a little vps on DigitalOcean. I will not go over creating the second part of this project, the chrome extension, that was actually a breeze. Refer here to learn how to create a chrome extension of your own.

Conclusion

In conclusion, StackFriend is a helpful chrome extension that leverages the impressive natural language processing capabilities of GPT-4 to simplify the coding process for developers. By providing clear and concise explanations of code snippets in plain English and allowing for code conversion between different programming languages, StackFriend can make it easier for developers to understand and learn from the code they find on Stack Overflow. I also hope this showcases how everyone can pretty easily create their own AI powered tools. Shoutout to OpenAI!

Edit: Stackfriend is now live on the chrome webstore, download it here!