Multi-Model AI Copilot for Code Synthesis, Debugging, and Workflow Visualization

A comprehensive Visual Studio Code extension designed to enhance your development workflow by integrating multiple state-of-the-art Large Language Models (LLMs) directly into the editor. This extension provides code generation, intelligent suggestions, problem-solving assistance, and even workflow visualization—helping developers save time, boost productivity, and understand code structurally.

Active GROQ API Key (FREE VERSION) supports : Gemini 1.5 Flash , Llama 3.1 (8B, 405B), Gemma 2 (9B). Paid APIs can be used to access more advanced models.

Table of Contents

• Introduction
• Key Features
• Demos
• Prerequisites
• Installation and Setup
• Configuration
• Usage
• Technical Overview
• Code Snippets
• Repository

---

Introduction

The LLM Copilot Extension for VS Code was developed to enhance coding efficiency by seamlessly integrating advanced AI models like Llama 3.1, OpenAI GPT-3.5-Turbo, and Google Gemini 1.5. These models enable:

• Context-aware code generation
• Autocompletion and bug fixing
• LeetCode/DSA problem-solving
• Workflow diagram generation from functions
• Code Analysis Features:
• -Right-click menu integration
• -Detailed pattern analysis reports
• -Performance metrics report
• -Actionable improvement suggestions

This extension uses a modular provider architecture, making it easy to plug in new providers and scale capabilities as newer LLMs emerge.

---

Key Features

Multi-Provider & Multi-Model Support

Switch between AI providers and their flagship models directly within the chat interface:

Provider	Supported Models
Groq	Llama 3.1 (8B, 405B), Gemma 2 (9B)
Google	Gemini 1.5 Pro, Gemini 1.5 Flash
OpenAI	GPT-4o, GPT-3.5-Turbo

Architectural Flow:

| Architectural Diagram of step by step input propagation |

Interactive Chat Interface

• Intuitive Webview panel for querying LLMs.
• Handles everything from small snippets to complex architecture discussions.

Code-to-Workflow Visualization

• Automatically generate Mermaid.js flowcharts from selected functions.
• Helps document, visualize, and debug complex logic.

Code Generation & Autocompletion

• Generate context-aware snippets.
• Solve LeetCode & DSA problems.
• Assist with debugging and unit test generation.

User-Friendly UI

• Built with HTML, CSS, and JS.
• Dropdown for model selection.
• AI responses displayed in formatted code blocks.

Workflow Diagram Generation

To visualize your code flow:

1. Select the code you want to visualize
2. Right-click and select "AI: Generate Workflow Diagram"
3. View the generated Mermaid.js flowchart showing:
   • Control flow
   • Conditional branches
   • Loop structures
   • Error handling paths

Code Pattern Detection

To analyze patterns in your code:

1. Select the code you want to analyze
2. Right-click and select "AI: Detect Code Patterns"
3. View the comprehensive analysis including:
   • Design patterns identified with confidence levels
   • Anti-patterns and code smells
   • Performance metrics and bottlenecks
   • Actionable recommendations

---

Demos

• Interactive Chat with Provider Selection
  *

• 

• Workflow Diagram Generation
  *

---

Prerequisites

Ensure the following are installed:

• Visual Studio Code (v1.92.0 or higher)
• Node.js (v18.x or higher)
• TypeScript (for compiling)
• API Keys from supported providers: Groq, OpenAI, Google, Together.ai

---

Installation and Setup

1. Clone the repository

git clone https://github.com/Panchadip-128/LLM_Copilot_Extension
cd LLM_Copilot_Extension

2. Install dependencies

npm install

3. Compile TypeScript

npm run compile

4. Run the extension

code --extensionDevelopmentPath=PATH_TO_PROJECT

Or press F5 inside VS Code.

---

Configuration

Add your API keys to settings.json:

{
    "codeAssistant.groq.apiKey": "YOUR_GROQ_API_KEY",
    "codeAssistant.gemini.apiKey": "YOUR_GEMINI_API_KEY",
    "codeAssistant.gpt.apiKey": "YOUR_OPENAI_API_KEY"
}

---

Usage

• Launch the extension (F5 in VS Code).
• Open Command Palette (Ctrl+Shift+P) → Open AI Code Assistant.
• Choose a provider, type queries, and interact in the chat panel.
• Right-click on any function → Generate Workflow Diagram.

---

Technical Overview

Click to expand

• package.json

  • Metadata (name, version, engines)
  • Defines commands (e.g., extension.openChat)
  • Includes dependencies like axios for API calls

• extension.ts

  • Registers commands
  • Creates and manages Webview panel
  • Orchestrates communication between UI ↔ Backend ↔ API Providers

• API Providers

  • Modular classes: GroqProvider, GeminiProvider, GPTProvider
  • Encapsulate authentication, request formatting, response parsing

• getCodeSnippet Function

  • Sends POST requests with user query
  • Processes and formats AI responses
  • Returns code snippets or workflow diagrams

• UI (Webview)

  • Built with HTML, CSS, JS
  • Dropdown for provider/model selection
  • AI response shown in code block with copy support

---

Code Snippets

extension.ts (Activate Function) - Sample code to demonstrate our idea

export function activate(context: vscode.ExtensionContext) {
    let disposable = vscode.commands.registerCommand('extension.openChat', () => {
        const panel = vscode.window.createWebviewPanel(
            'aiAssistant',
            'AI Code Assistant',
            vscode.ViewColumn.One,
            { enableScripts: true }
        );
        panel.webview.html = getWebviewContent();
    });
    context.subscriptions.push(disposable);
}

Making API Calls (getCodeSnippet) - Sample code to demonstrate our idea

async function getCodeSnippet(query: string, provider: string): Promise<string> {
    const response = await axios.post(`https://api.${provider}.com/v1/generate`, {
        prompt: query,
        max_tokens: 500
    }, {
        headers: { 'Authorization': `Bearer ${getApiKey(provider)}` }
    });
    return response.data.output || "No response received.";
}

Sample Webview UI (HTML)

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; }
    #response { background: #f4f4f4; padding: 10px; border-radius: 5px; }
  </style>
</head>
<body>
  <h2>AI Code Assistant</h2>
  <select id="modelSelector">
    <option value="gpt">OpenAI GPT</option>
    <option value="gemini">Gemini</option>
    <option value="llama">Llama</option>
  </select>
  <textarea id="query" placeholder="Type your question here..."></textarea>
  <button onclick="sendQuery()">Ask</button>
  <pre id="response"></pre>
</body>
</html>

---

Repository

Access the complete source code here:
👉 LLM Copilot Extension on GitHub

Sample chat and prompt response demonstration:

Personalized chat interface to match your needs :

Upadted Version:

MERMAID INTEGRATION : TO INSTANTLY UPDATE WORKFLOW DIAGRAM FOR ANY CODE

Likewise code analysis id segmented into multiple parameters as follows in sidewise copilot window:

Overall, This extension serves as a powerful companion for

Code Generation , Problem Solving , Simplification and Visualization of Complex Refactored Codes , Performance Analysis , Suggestions for improvements

1. LeetCode & DSA Problems:

   • Paste the problem description
   • Get optimized solutions with explanations
   • Receive time and space complexity analysis

2. Unit Test Generation:

   • Select the code to test
   • Request test generation
   • Get comprehensive test cases with edge cases

3. Debugging Assistance:

   • Share error messages or stack traces
   • Get step-by-step debugging guidance
   • Receive suggested fixes and explanations

4. Multi feature pattern extraction and Visualization:

   • Performance Analysis (Time Complexity, Space Complexity and its instances)
   • Design Patterns (Location inside Code, Its Impact and likewise suggestions)
   • Anti Patterns( To be avoided further for improvements, its solution and severity)
   • Recommendations within code and its potential performance analysis