VS Code Extension
Last updated
Last updated
Follow these steps to install CodeMate extension & use its features inside Visual Studio Code.
You have signed up for an account at https://codemate.ai.
You have the latest version of VS Code installed on your computer.
Open VS Code on your computer
Click the Extensions button in the Activity Bar on either side of the editor.
Search for 'CodeMate AI' & click on the Install button.
After installing the extension, you should see the CodeMate icon appear in the Activity Bar.
In case you are not able to find the extension through search, you can install it from the VS Code Extension Marketplace directly.
Post installing, click on the Extension Icon & on sign in, which will present the following pop-up:
Click on 'Open' & sign in with your preferred method. Once the sign in is successful, you will see the following message & are all set!
Return back to VS Code to start using the extension.
Once all set-up, the VS Code Extension is loaded with an array of features & integrations to explore the full power of CodeMate inside the editor. Let's have a look at these features:
The Chat UI provides two additional options: Context & Web Browsing. Let's understand what they do.
Web browsing: Enable Web browsing to fetch information from the web. Use this toggle to tap into a vast reservoir of data on the internet to get more augmented answers from online websites or communities right inside CodeMate. Enable the option and execute a prompt that will return the answers from the web.
For example: Let's ask CodeMate about the new tools that OpenAI is building to detect AI-generated images, a news published hours ago as of writing this doc. CodeMate responds with the following answer along with citations to check the sources used to generate the response:
Context: With support for context, one can provide CodeMate with access to rich information from a snippet in file or the current file open inside VS Code. This enables CodeMate to answer in context of the file, making query responses more relevant & accurate. An example for the same is demonstrated below where the code explained is in context of the file attached:
To attach a file in context, there are two ways:
Opening a chat pane alongside an open file automatically attaches the file as context.
CodeMate has support for rich integrations inside VS Code that make it easier to access CodeMate features with fewer clicks. One of them is support for Inline Actions, which can be accessed from multiple places inside the editor:
Right click actions: Simply highlight a given piece of code & right click to access Inline Actions from the context menu.
Command Pane
Command Pane inside VS Code is accessible from the Settings flyout or using keyboard shortcuts Ctrl + Shift + P (Windows / Linux) or Cmd + Shift + P (MacOS). Command Pane gives access to various actions exposed by the editor & extensions like CodeMate. To access CodeMate Inline Actions, open the Command Pane & type CodeMate.
A list is shown with all available actions. Select any action to execute it & get the desired output.
CodeMate Extension supports invoking different actions through Code Lens. Code Lens scans for function declarations and displays 'CodeMate' link above function declarations. By clicking on the link, one can invoke common actions or use their own queries to interact with the codebase. The actions are performed in context of the function. The results are appended around the original function.
An example of the same is given below:
Knowledge Base, one of core features of CodeMate, allows one to store their codebase or documentation from various sources. This acts as a rich wealth of information that can be used to generate more relevant & personalized answers as per the sources supplied.
CodeMate provides three ways to store information in Knowledge Base:
Linking to an existing public or private GitHub repository
Adding local code to Knowledge Base
Adding any documentation using its web URL.
In the Knowledge Base Pane, click on 'Import Web URL', which will invoke the following flyout:
Add a URL in the text field to index in Knowledge Base.
Add a value in the Depth field. The default value is 1.
Depth refers to the level of links to be followed from the given URL. A Depth value of 1 indicates that content from only given page URL will be indexed. Adding additional level values will index links on the given page too. Adding additional depth will similarly index other content on further pages being indexed.
For example: a depth value of 1 will index content from blogs.codemate.ai, and for additional links on the page like 'Get Started' & 'Community', they can be indexed by increasing depth value to 2 or beyond.
Click on Import Content button, and following notification will appear in the Notification Area of VS Code:
Once the content has been fetched, you will see the following message:
Wait for a few minutes and you will see the link appear in the list of Knowledge Base, & you are good to go! Simply ask questions from this page by writing queries or attaching context using these methods, & get answer from the page.
Add from GitHub Repository: Adding content from a remote GitHub Repository is easy & involves the following steps:
Click on 'Import GitHub Repository' button, which will present the following flyout to choose the GitHub Repository. Choose a Repository and its link will appear in the text field. You can also paste another public Repository link directly in the text field.
Click on Fetch branches, which will bring up a list of branches. Select a branch to add in Knowledge Base.
Next, click on Add Branches button, which will add content to the Knowledge Base. You will get a confirmation notification like one below:
Once done, the Repo link will become visible in the Knowledge Base list.
In the Knowledge Base Pane, click on 'Import Local Content'. Clicking on the button will open a picker UI where once can choose the files to be added to the Knowledge Base.
Select the files and click on 'Add to Knowledge Base' button to start the upload process.
Once the content has been processed and indexed, you will see the confirmation message showing successful add & the project title will become visible in the Knowledge Base list.
To clear Knowledge Base, click on the 'Reset Knowledge Base' Button in the Knowledge Base Pane.
Alternatively, individual sources can be resynced or deleted by clicking on the buttons next to the items in list.
CodeMate extension comes with a set of settings that can be used to fine tune the experience. The settings and a brief of their functions are:
Pre Instructions: Add instructions to the start of all messages or features that are sent to CodeMate. These instructions can be added in the following contexts:
Chat: Adds a custom instruction that is passed in the start of all messages or queries sent to CodeMate Chat.
Debug: Adds an instruction at the start of the query sent to Debug feature. It helps add additional metrics that might be helpful in the debugging process.
Optimize: Adds an instruction that is passed in the beginning of Optimize feature to add additional metrics helpful during the process.
Review: Adds an instruction that is included in the beginning of Review feature invocation that helps instruct CodeMate to give feedback on the points that matters to the user.
Code Lens: enable or disable the feature as per the user preference.
Have any questions or feedback in mind? Please share them on our CodeMate Discord Server.
CodeMate Chat is available as a pane next to the open files. Once opened, the Chat pane displays a chat interface that can be used to send queries to CodeMate. It accepts both text & includes support for slash '/' commands to access features & '@' to ask from any added source in Knowledge Base. These features are discussed in the . The Chat pane has additional options that can be enabled or disabled:
Web Browsing : Enable this toggle to direct CodeMate to perform a web search & further augment the results with results from the web.
Attach File : Use this option to attach a file or codebase to the current query to get more context-aware & unique answers.
The Chat pane also has options to manage conversations. Simply click on the plus icon to start a new chat, or click on the icon to access chat history.
To attach a file manually, click on the (Attach File) button to reveal the File picker:
Code Actions allows the user to highlight a piece of code & perform actions around it. CodeMate supports Code Actions, where the Actions bulb icon presents a list of features to process the code snippet. To use Code Actions, highlight a piece of code & click on the bulb icon to get a list of actions.
