News

Take ChatGPT for a Spin with VS Code Tools

With ChatGPT being the first "It" tech in the cutting-edge AI space that regular people can play around with, it's no wonder that tools to use it are exploding in the Visual Studio Code Marketplace.

As of this writing, a search for "ChatGPT" in the marketplace brings up 26 items. Of those, four have been downloaded more than 10,000 times (notably, one was reportedly even created by ChatGPT (and 9 beers).

Those stats are likely to change soon, as ChatGPT was launched by Microsoft partner OpenAI only 55 days ago as a machine language model that reacts in a conversational way to user input -- basically a souped-up chatbot. Since then, the public has been stunned by the proficiency of the model in generating realistic prose of all kinds, even recently passing an MBA exam given by a Wharton professor, according to NBC News.

Basically, it did for the public what GitHub Copilot -- also based on OpenAI tech -- did for computer programmers.

Amid the hype and fanfare, this reporter decided to check out the top two extensions, measured by the number of installations.

Of those most-downloaded extensions in the VS Code Marketplace, the most popular one (in English) comes from Daniel Avila and is called Code GPT, downloaded 51,115 times at the time of this writing. It promises to help coders use the official OpenAI API inside VS Code IDE.

It enables developers to fire up the command palette and:

  • Get Code: Create a comment asking for a specific code and CodeGPT will open a new Editor with the code (You don't need to write the code language. CodeGPT will detect it automatically).
  • Ask CodeGPT: CodeGPT will open a new Editor and respond the question.
  • Ask CodeGPT - code selected: Select the code and ask a question, CodeGPT will open a new Editor and respond the question.
  • Ask StackOverflow: Search for a question using the Stackoverflow API and Code GPT will show the best human answer and then the AI answer.
  • Explain CodeGPT: CodeGPT will open a new Editor and explain the code.
  • Refactor CodeGPT: CodeGPT will open a new Editor and refactor the code.
  • Document CodeGPT: CodeGPT will open a new Editor and Document the code.
  • Find Problems CodeGPT: CodeGPT will open a new Editor and find problems in the code.
  • Unit Test CodeGPT: CodeGPT will open a new Editor and write unit tests of the code.

To use it, you need to provide a secret key from your OpenAI account and do a little minor configuration. From there, you can just hit Ctrl+Shift+P to open the command palette, and, for example, type in a comment like

  // write a program that displays the text "the value of pi to 10 digits is " and then computes the value of pi to 10 digits

In a TypeScript file, that results in this:

Value of Pi
[Click on image for larger view.] Value of Pi (source: David Ramel).

For a more robust, animated example, here's a GIF of the "Ask Stack Overflow" functionality:

Ask SO in Animated Action
[Click on image for larger, animated GIF view.] Ask SO in Animated Action (source: Daniel Avila).

The tool received an average 4.2 score (scale 0-5) from 26 developers who reviewed it, though several reported problems that apparently had more to do with their OpenAI accounts and available credits.

However, one user commented, "This is not ChatGPT, you are using the OpenAI API which is paid." In reply to a similar comment, Avila said on Sunday, "The extension is NOT connected with the ChatGPT API, as it has not been released yet as of today (January 22)."

So, despite coming up in a marketplace search for "ChatGPT," this tool doesn't use ChatGPT, though it provides a pretty close facsimile. As you can see in the description of the next item below, however, those official ChatGPT APIs are available, so perhaps this tool will be updated.

The second-most popular tool (in English) was simply named ChatGPT by its creator, Ali Gençay, and has been installed 42,457 times as of this writing. This one does promise to "Use Official OpenAI GPT3 APIs," though it requires an OpenAI account login in a browser.

Upon installation, a ChatGPT icon appears in the Activity Bar, and clicking it opens a new Side Bar that presents you with this:

The ChatGPT Log In
[Click on image for larger view.] The ChatGPT Log In (source: David Ramel).

Upon going through all the installation and configuration steps, though, you're like to be confronted with this:

Too Many Users
[Click on image for larger view.] Too Many Users (source: David Ramel).

The service just got too popular too fast, so you have to be patient in trying to use it. Or, as the tool description says, "It's possible that OpenAI systems may experience issues responding to your queries due to high-traffic from time to time." This reporter can attest to that.

If you do get through the logjam, you can ask ChatGPT questions in the Side Bar, like, "which is better, VS Code or Visual Studio, for creating a Blazor Hybrid app?" The model rides the fence on this one, seemingly being very noncommittal generally in its opinions on all subjects.

VS Code or VS?
[Click on image for larger view.] VS Code or VS? (source: David Ramel).

The ChatGPT extension also can act just like GitHub Copilot, the famous (or infamous) "AI pair programmer" that uses the OpenAI Codex model.

For example, it quickly spun up a "hello world" program in C#:

Acting Like GitHub Copilot
[Click on image for larger view.] Acting Like GitHub Copilot (source: David Ramel).

Features of the tool include:

  • Export all your conversation history with one click
  • Ad-hoc prompt prefixes for you to customize what you are asking ChatGPT
  • Automatic partial code response detection
  • Optimized for dialogue
  • Edit and resend a previous prompt
  • Copy or insert the code ChatGPT is suggesting right into your editor
  • Ask free-form text questions that will be listed in the conversation window. The conversation is kept in cache until vs-code instance is closed.
  • Use defaults or customize your code prompts

The list of specific default prompts includes:
  • ChatGPT: Ad-hoc prompt: Ad-hoc custom prompt prefix for the selected code. Right click on a selected block of code, run command.
  • ChatGPT: Add tests: Write tests for you. Right click on a selected block of code, run command.
  • ChatGPT: Find bugs: Analyze and find bugs in your code. Right click on a selected block of code, run command.
  • ChatGPT: Optimize: Add suggestions to your code to improve. Right click on a selected block of code, run command.
  • ChatGPT: Explain: Explain the selected code. Right click on a selected block of code, run command.
  • ChatGPT: Add comments: Add comments for the selected code. Right click on a selected block of code, run command.
  • ChatGPT: Ask anything: Free-form text questions within conversation window.
  • ChatGPT: Reset session: Clears the current session and resets your connection with ChatGPT.
  • ChatGPT: Clear conversation: Clears the conversation window and resets the thread to start a new conversation with ChatGPT.
  • ChatGPT: Export conversation: Exports the whole conversation in Markdown for you to easily store and find the Q&A list.

Gençay's tool earned an average 4.7 rating from 19 reviewers who had mostly positive feedback. One, from earlier this month, said: "Very nice extension!! - I think this might be the best implementation directly in VSC. The only problem is that you get logged off due to inactivity and have to log in again. I think that the same might happen on chatgpt's website. Not super impressed with all the solutions chatgpt delivers at the moment. Actually, at the moment it has been faster to search and find a good solution on stack et al."

But that latter method will soon be the old way of doing things.

Note that while dozens of extensions have appeared in the VS Code Marketplace, none are available in the Visual Studio Marketplace -- yet.

About the Author

David Ramel is an editor and writer for Converge360.

comments powered by Disqus

Featured

Subscribe on YouTube