> For the complete documentation index, see [llms.txt](https://docs.codemate.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.codemate.ai/feature-walkthrough/vs-code-extension.md).

# 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](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](https://marketplace.visualstudio.com/items?itemName=AyushSinghal.Code-Mate).

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