VS Code Extension
Welcome to the official walkthrough guide for the CodeMate VS Code Extension. This guide will help you install, set up, and explore the full suite of AI-powered features that come bundled with CodeMate.
Prerequisites
Before getting started, ensure the following:
You have an active CodeMate account at https://codemate.ai.
You have Visual Studio Code installed on your system.
Installation Guide
Launch Visual Studio Code.
Click on the Extensions icon in the Activity Bar.
Search for
CodeMate AI
and click Install.Once installed, you will see the CodeMate icon in the left panel
β οΈ Can't find it? You can also install it directly from the VS Code Marketplace.
β
Sign In
Click on the CodeMate profile icon.
Click Sign In in the sidebar.
You will be prompted with an authentication screen. Use your preferred(Google, Miscrosoft, Github or Email) method to log in.
Once signed in, return to VS Code to start using CodeMate.
Feature Walkthrough
CodeMate Chat
An intelligent AI assistant inside VS Code. Accessible as a sidebar panel:
Ask queries in natural language.
Use
/commands
for features and@
for Knowledge Base references.Toggle Web Browsing for real-time info.
Use Attach File for context-specific answers.
π‘ Use Case: Ask "Refactor this file" while attaching a JavaScript file.
πΈ Place Screenshot of Chat Pane Here
Knowledge Base
Store your code, documentation, or URLs to enhance contextual responses.
Import via URL: Add website links with customizable depth.
Import GitHub Repo: Sync a public or private repo.
Import Local Code: Add files/folders from your system.
π‘ Use Case: Add your docs website and ask questions from it.
πΈ Place Screenshot of Knowledge Base Pane with Items Added
Debug Code Agent
Quickly find and fix issues in your code with AI.
Highlight any code.
Right-click and select Debug Code with CodeMate.
The AI analyzes and suggests fixes inline.
πΈ Place Screenshot of Debug Agent in Action
Code Review Agent
Get AI-powered feedback on your code:
Click the lightbulb π‘ icon or right-click.
Select Review Code.
Receive improvements, bug alerts, and best practice feedback.
π‘ Ideal for pull requests and code quality audits.
πΈ Place Before/After Code Review Example Image
Optimize Code Agent
Make your code more efficient:
Highlight a function or class.
Right-click β Optimize Code with CodeMate.
View optimized and explained output.
πΈ Place Side-by-Side of Original vs Optimized Code
Generate Test Cases Agent
Automate test case creation:
Highlight a function.
Use the context menu to select Generate Test Cases.
View a list of unit tests, edge cases, and boundary inputs.
π‘ Saves time while ensuring test coverage.
πΈ Insert Screenshot Showing Test Case Suggestions
Generate Docstrings
Automatically document your code:
Highlight a function/class.
Choose Generate Docstring.
CodeMate inserts a structured, docstring in your format (Google/NumPy style).
πΈ Show Before/After of a Function with Generated Docstring
Swagger Agent
Turn Swagger/OpenAPI specs into ready backend code:
Open the CodeMate Panel β Swagger Agent.
Upload a spec file or URL.
Choose target language (e.g. Flask, Express.js).
Add instructions like "Use JWT".
π§ CodeMate generates backend code including routes, models, and handlers.
πΈ Insert Screenshot Showing Swagger Agent Output in Editor
Extension Settings
Navigate to Settings > Extensions > CodeMate
to tweak preferences:
Pre-Instructions: Customize how Chat, Debug, Optimize, and Review behave.
Enable/Disable Code Lens: Toggle inline buttons for actions above functions.
πΈ Screenshot of Settings Panel Highlighting Options
Summary
CodeMate transforms your coding experience in VS Code with seamless AI-powered development tools-from chat to documentation, debugging, and even backend generation.
Last updated
Was this helpful?