DEV Community

Cover image for Scribe AI - ChatGPT like VSCode Extension
Andrew Zhang
Andrew Zhang

Posted on

Scribe AI - ChatGPT like VSCode Extension

Hi everyone, I'm a junior developer that's been in the work industry for almost 1.5 years and if there's one thing I learned working in the industry is that you have to read lots and lots of legacy code and code written by other people.
But reading other people's code is so time consuming!! I could have spent that time writing actual code!! If only there was something that can describe to me in plain words what the code is doing which can help me with understanding the code faster and better!

Β 
Β 

Image description

πŸ“’ Introducing Scribe AI

Seeing as how ChatGPT can be used to understand and modify code, I wanted to see if I could integrate it into IDEs. Scribe AI is a VSCode extension that can be used to understand code just by highlighting a piece of code and asking questions about it similar to how you would in ChatGPT. The conversation is saved on your workspace and you can come back to view it later so it's good for note keeping as well.

🌟 Preview

Preview

Hurray!✨ Now you can have AI chatbot like ChatGPT right in VS Code! Use it as your AI programming assistant which you can talk with to understand complex code, modify and improve your code, or generate comments for your code. The possibilities are endless.

Β 

πŸ”— Links:

Β 

✨ Features

πŸ’¬ Ask AI: Highlight a piece of code, click on the chat icon, and type in any questions you might have about the code such as Explain the code. Then hit Ask AI button! The AI will respond back to you with the response. You can continue to reply to the AI’s response and hold a conversation with the AI just like in ChatGPT! The conversation context is maintained between queries. The conversation will be saved in your workspace and you can close it and open it anytime. You can also edit your comments and delete them.
Ask Questions:
Preview
Edit Comments:
Edit Comment

Β 

🧠 AI Edit: Highlight a piece of code and click on the chat icon, then enter the instruction on how you want the AI to modify the code such as Refactor the code to include comments, Rewrite the code in Python, etc. Now finally hit AI Edit button and you will see that your selected code has been modified. If you don’t like the result you can always Undo it by pressing Mac: ⌘ Command + Z, Windows: Ctrl + Z or go to Edit -> Undo. Sometimes the formatting of the result is not correct or your originally highlighted section gets messed up, in such cases you can rehighlight the code and ask AI to Reformat the code so that it’s correct and press the AI Edit button.

Refactoring:
Refactoring

Rewriting in another lanugage:
Rewriting

Adding docstring:
Docstring

Fixing mistakes:
Fix Mistake

Β 

πŸ“ Note Taking: You can also add notes inside your conversation by typing your note and pressing Create Note. Your notes won’t get sent over to AI.
Note Taking

Β 

πŸš€ Getting Started

πŸ“¦ Installation

  • To use this extension, install it from the VSCode marketplace or download and install .vsix file from Releases.

  • When you first use ScribeAI whether by Ask AI or AI Edit, it will ask you for your OpenAI API key. This is used by the extension to access the API and is only sent to OpenAI.
    API Key

βš™οΈ Settings

  • You can also change your API key in User Settings via Code -> Preferences -> Settings and under Extensions you will find ScribeAI settings. Or you can just search ScribeAI in search box. User Settings

To find your OpenAI API key:

  1. Go to https://beta.openai.com/account/api-keys. You will need to log in (or sign up) to your OpenAI account.
  2. Click "Create new secret key", and copy it.
  3. You should then paste it into VS Code when prompted.
  • If you wish to change the AI model you use which by default is code-davinci-002 (because it’s free currently), then you can change it in User Settings.
  • πŸ’₯ Remember to reset your extension and workspace when you change your settings. You can do that by clicking on restart your extension in the API key settings πŸ’₯

The extension currently uses the official API of OpenAI to access its GPT models (code-davinci-002 by default) so it's not as performant as ChatGPT. I do this because using unofficial ChatGPT API is unsupported by OpenAI and it's not reliable. But once the official API for ChatGPT is out, I plan to integrate it. This is my first extension I ever made so it would be awesome if you guys could check it out and let me know if you find it useful or find any bugs or tips and suggestions on how to improve it.

I really hope this tool will be helpful to many of you guys πŸ’™

Thanks and happy coding! 😊

Chatbot icon by Icons8

Top comments (1)

Collapse
 
stefanfmeyer profile image
Stefan Meyer

Hey Andrew, have you got a twitter?

Like to chat about the Scribe AI Extension you made

Message me here: twitter.com/Stefcodes