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

1. Launch Visual Studio Code.

2. Click on the Extensions icon in the Activity Bar.

3. Search for CodeMate AI and click Install.

4. 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.