CodeGPT in VS Code: How To Get Started

Lately, the buzz about AI has been inescapable among my peers – especially around OpenAI’s GPT-4 and its implementations: Chat GPT, VideoGPT, and DALL·E. Tools like these are rapidly changing how we interact with and develop on the internet. They are defining our future. Web 5.0 is here, believe it or not, and AI is a big part of that.

Using Open AI’s GPT-4 doesn’t come without some controversy, but the implementation of CodeGPT within VS Code should not cause concern. Time-traveling, unstoppable intelligent robots are not coming after you… at least not just yet.

In this post, I’ll briefly cover why using CodeGPT is helpful, how to use it, and how to set it up. Let’s get started!

Why Use CodeGPT in VS Code?

The first question you should naturally ask is, “Why should I use CodeGPT?” Or, you might ask, “Why not use Google Search instead?” Before we explore how to implement CodeGPT in VS Code, let’s answer those two questions with a real-world use case.

Not long ago, I was working on refactoring part of a prototype React application into a Node API. Even though both solutions were JavaScript, the libraries and architecture decisions differed slightly, and I ended up with some issues to debug.

So, I turned to Google, and Google turned to its Penguin algorithm for answers, which favors paid SEO or SEO marketing wizards like Stack Overflow and Medium. The Web 1.0 status quo has been the standard experience for everyone, and it is usually a time-consuming rabbit hole.

There is a better way to go about this search. If you are familiar with Alexa, Siri, or just about any natural language process, you will know that there is great utility in leveraging a search assistant to return results based on natural language prompts. This holds true with CodeGPT! In our quick demo below, you will see just how easy it can be to troubleshoot and write code.

For the sake of brevity, I will only show you a means of quickly troubleshooting issues in VS Code using CodeGPT followed by instructions on how to quickly set it up. Below you can see the user experience of CodeGPT in Visual Studio. You can ask CodeGPT questions and see results directly in the IDE.

Generating Code with CodeGPT

CodeGPT can write some code for you. Based on your AI Query coaching ability, you can easily write “prototype” code.

For example, let’s create a POST connection for my CoreUI free Admin Tool to get the weather for a dashboard UI. The CodeGPT  prompt here is, “Using React create an API POST connection to get weather.”

And below we see the result. It’s a cut-and-paste starting point for a Weather Widget in Core UI.

Troubleshooting Code with CodeGPT

One of the greatest things about CodeGPT is you can interactively debug issues. In my React Prototype, in my haste to create a connection, I encountered the No 'Access-Control-Allow-Origin' header is present on the requested resource. error.

Copying the result into the Chat Dialog area and clicking the “Send” button results in an actionable item. Then, I can copy and paste the clean code into my solution.

How to Setup Code GPT in Three Easy Steps

Step One: Install

First, navigate to Extensions and search for CodeGPT. There are many imitators, so be cautious. Choose the version shown below by CodeGPT.

Click “Install” and follow the prompts. You will be asked to log-in or to create a free account. Follow the prompts!

Step Two: Launch

Installing the plug-in was the easy part, but luckily, the next step is just as easy. Launch this URL in your browser of choice.

Now, find and click this button under API Keys:

Then, create a name to reference it with, which will create a new token. Copy this key and paste it into a text editor, notes, or a clipboard manager.

Step Three: Command Palette

Go to your Command Palette -> Main Menu -> View -> Command Palette. Set the Type >Code GPT: Set API KEY in the Command Pallet Prompt.

Hit “Enter” when the command is found, and then enter your OpenAi API key where prompted.

And there you have it! CodeGPT should be set up and ready to use.

In Conclusion: CodeGPT is your AI Sensei or Pair Programmer

You’ve learned that ChatGPT can help you debug error logs and write functions and methods for application development. What else can Code GPT do? It can help navigate complex syntax for regular expressions or calculus algorithms, write SQL expressions, explain design patterns, explain best practices for code optimization,  and even help you explore and learn new languages.

ChatGPT is only a tool and client for exploring the OpenAI API. There are other Code tools on the market today like Google’s Bard, AI CodeLens, and Github’s CoPilot for example. I encourage you to go out and try them all. Find what works for you, and let me know in the comments what you think!