Scribe AI - ChatGPT like VSCode Extension
Tags: vscode, webdev, javascript, programming
Published: 2023-01-27 04:51:58

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!

&nbsp;
&nbsp;

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8al3w839ewi1iwrum03.png)
## 📢 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8r1u45om85os0qx6s05.gif)

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.

&nbsp;

### 🔗 Links:

- **[VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=AndrewZhang.scribeai)**
- **[Github](https://github.com/ajikan/ScribeAI)**
- **[Reddit](https://www.reddit.com/r/vscode/comments/10lzjry/chatgpt_vscode_extension/?utm_source=share&utm_medium=web2x&context=3)**

&nbsp;

## ✨ 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8r1u45om85os0qx6s05.gif)
***Edit Comments:***
![Edit Comment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4moivxg7wubmr5zvcdi.gif)

&nbsp;

🧠 **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:` <kbd>⌘ Command</kbd> + <kbd>Z</kbd>, `Windows:` <kbd>Ctrl</kbd> + <kbd>Z</kbd> 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g88drh3wmdi3iemuv7il.gif)

***Rewriting in another lanugage:***
![Rewriting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2hwdjud38mid8mwzptc.gif)

***Adding docstring:***
![Docstring](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/km4mjrhjnizh4ax3bq8r.gif)

***Fixing mistakes:***
![Fix Mistake](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8c8htfsn9ngqzz3nlk0q.gif)

&nbsp;

📝 **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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lusegqsvvnk4ybyfq98a.gif)

&nbsp;

## 🚀 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7ofmvmeuf99irij4hgf.png)

### ⚙️ 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1bldefk01a5nzg6vwa3.png)

> 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! 😊

<a target="_blank" href="https://icons8.com/icon/uZrQP6cYos2I/chatbot">Chatbot icon by Icons8</a>