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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.codemate.ai/feature-walkthrough/vs-code-extension.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.