AI Assistant for VS Code

A professional VS Code extension that provides AI-powered code analysis and assistance with context menu integration.

⚠️ Phase 1 MVP: This is a functional foundation/MVP with working "Analyze Code" functionality using Google Gemini. The architecture is designed for multi-provider support, but additional testing and hardening is recommended before production deployment.

📋 Phase 1 - Current Status

Phase 1 is a functional MVP/foundation that includes:

• ✅ VS Code extension foundation with TypeScript
• ✅ Context menu with "AI Assistant" submenu
• ✅ Analyze Code action (fully functional)
• ✅ Custom sidebar for AI responses
• ✅ Google Gemini AI provider integration
• ✅ Secure API key storage using VS Code SecretStorage
• ✅ Custom Settings UI with provider/model configuration
• ✅ Loading, success, and error states
• ✅ Copy response to clipboard
• ✅ Insert response at cursor
• ✅ Clean modular architecture ready for Phase 2

Available Actions

In the context menu "AI Assistant" submenu, you'll see:

• Analyze Code ✅ (Functional in Phase 1)
• Explain Code (Coming in Phase 2)
• Debug & Fix (Coming in Phase 2)
• Summarize (Coming in Phase 2)
• Convert Code (Coming in Phase 2)
• Generate Documentation (Coming in Phase 2)
• Improve Code (Coming in Phase 2)
• Generate Tests (Coming in Phase 2)
• Grammar Fixer (Coming in Phase 2)
• Fact Check (Coming in Phase 2)
• Create Follow-up (Coming in Phase 2)
• Let's Talk About This (Coming in Phase 2)

🚀 Getting Started

Prerequisites

• VS Code version 1.85.0 or higher
• Node.js version 20.x or higher
• npm or yarn
• Google Gemini API key (get one at https://makersuite.google.com/app/apikey)

Installation for Development

1. Clone or create the project:

   cd "c:\Users\Skand\OneDrive\Desktop\vs -etensions"
   

2. Install dependencies:

   npm install
   

3. Compile TypeScript:

   npm run compile
   

4. Open in VS Code:

   code .
   

5. Launch Extension Development Host:

   • Press F5 or
   • Go to Run and Debug → "Run Extension"
   • A new VS Code window will open with the extension loaded

🔧 Configuration

Step 1: Configure Gemini API Key

1. In the Extension Development Host window, open the Command Palette (Ctrl+Shift+P)
2. Type and select: AI Assistant: Open AI Assistant Settings
3. In the Settings panel:
   • Provider: Select "Google Gemini"
   • Model: Choose a model (e.g., gemini-2.5-flash)
   • API Key: Enter your Gemini API key
   • Click Save Settings

Step 2: Test Connection (Optional)

Click the Test Connection button in the Settings panel to verify your API key works.

💡 Usage

Basic Workflow

1. Open a code file (JavaScript, Python, Java, etc.)

2. Select some code you want to analyze

3. Right-click on the selection

4. Choose AI Assistant → Analyze Code

5. The extension will:

   • Show a loading state in the sidebar
   • Send your code to Gemini
   • Display the AI analysis in the sidebar

6. From the sidebar, you can:

   • Copy the response to clipboard
   • Insert the response at your cursor position

Example Use Case

Selected Code:

function calculateTotal(items) {
    let total = 0;
    for (let i = 0; i < items.length; i++) {
        total += items[i].price * items[i].quantity;
    }
    return total;
}

AI Analysis will provide:

• Purpose of the function
• How it works
• Potential issues (e.g., missing validation)
• Improvements (e.g., use reduce(), handle edge cases)
• Complexity analysis

🏗️ Architecture

Project Structure

src/
├── commands/
│   ├── analyzeCode.ts       # Analyze Code command implementation
│   └── openSettings.ts      # Open Settings command
├── providers/
│   ├── AIProvider.ts        # Provider interface
│   └── GeminiProvider.ts    # Gemini implementation
├── services/
│   ├── AIService.ts         # Provider abstraction layer
│   ├── PromptService.ts     # Prompt generation
│   ├── SelectionService.ts  # Editor selection handling
│   └── SettingsService.ts   # Settings + SecretStorage
├── ui/
│   ├── SidebarProvider.ts   # Sidebar WebviewView
│   └── SettingsViewProvider.ts  # Settings Webview
├── prompts/
│   └── analyzeCodePrompt.ts # Analyze Code prompt template
├── utils/
│   ├── logger.ts            # Logging utility
│   └── errors.ts            # Error handling
└── extension.ts             # Extension entry point

Key Design Decisions

1. Provider Abstraction: The AIProvider interface allows adding OpenAI, Groq, Claude, etc. in Phase 2 without changing the core logic.

2. Secure Storage: API keys are stored using VS Code SecretStorage, never in plain text or settings.json.

3. Modular Commands: Each AI action is a separate command, making it easy to add new actions.

4. Webview Communication: Sidebar and Settings use proper message passing between extension and webview.

5. Error Handling: Custom error classes with user-friendly messages and detailed logging.

🛠️ Development Commands

# Compile TypeScript
npm run compile

# Watch mode (auto-compile on changes)
npm run watch

# Lint code
npm run lint

# Run tests (when available)
npm run test

🧪 Testing Phase 1

Manual Testing Checklist

1. Extension Activation

   • [ ] Extension loads without errors
   • [ ] AI Assistant sidebar appears in Activity Bar
   • [ ] Commands are registered

2. Settings Configuration

   • [ ] Can open Settings via Command Palette
   • [ ] Can select Gemini provider
   • [ ] Can select model from dropdown
   • [ ] Can enter API key
   • [ ] API key is securely stored
   • [ ] Test Connection works

3. Analyze Code Action

   • [ ] Select code in editor
   • [ ] Right-click shows "AI Assistant" submenu
   • [ ] Click "Analyze Code"
   • [ ] Sidebar shows loading state
   • [ ] AI response appears in sidebar
   • [ ] Can copy response
   • [ ] Can insert response at cursor

4. Error Handling

   • [ ] No API key → shows friendly error
   • [ ] Invalid API key → shows validation error
   • [ ] No selection → shows "select code first" message
   • [ ] Network error → shows connection error

5. Phase 2 Actions

   • [ ] Other actions show "Coming in Phase 2" message

🔒 Security

• API keys are stored using VS Code SecretStorage (encrypted)
• Never logged or exposed in error messages or URLs
• Webview CSP (Content Security Policy) prevents XSS attacks with nonce-based script/style allowlists
• No external scripts loaded in webviews
• Extension-side API calls - API keys never sent to webviews

Note: This is a Phase 1 MVP. For production use, additional security review and testing is recommended.

🐛 Troubleshooting

Extension doesn't activate

• Check the Output panel → "AI Assistant" channel
• Make sure you compiled TypeScript (npm run compile)
• Restart the Extension Development Host

"No AI provider configured" error

• Open Settings and configure your Gemini API key
• Make sure you clicked "Save Settings"

API request fails

• Verify your API key is valid
• Check your internet connection
• Try the "Test Connection" button
• Check the Output panel for detailed errors

Context menu doesn't appear

• Make sure you have text selected
• The menu only appears when editorHasSelection is true

📦 Available Models (Phase 1)

Current Gemini models (verified August 2026 from ai.google.dev/gemini-api/docs/models):

• gemini-2.5-pro - Most capable for deep reasoning & coding
• gemini-2.5-flash (default) - Best price-performance, low-latency
• gemini-2.5-flash-lite - Fastest, most cost-effective 2.5 model
• gemini-3.5-flash - Agentic & coding, previous-gen Flash
• gemini-3.5-flash-lite - High-throughput, cost-effective 3.5
• gemini-3.6-flash - Latest stable Flash

Note: Older models (gemini-1.5-flash, gemini-1.5-pro, gemini-2.0-flash-exp) have been retired/shut down by Google and are no longer available.

🚧 Roadmap

Phase 2 (Planned)

• ✅ Multi-provider support (OpenAI, Groq, Anthropic)
• ✅ All AI actions functional
• ✅ Conversation history
• ✅ Better response rendering (full Markdown)
• ✅ Apply code changes directly
• ✅ Custom prompts

Phase 3 (Future)

• ✅ Chat interface
• ✅ Multi-file context
• ✅ Code diff preview
• ✅ Agent-style workflows
• ✅ MCP integration
• ✅ Marketplace publishing

📝 Contributing

This is a Phase 1 functional MVP designed as a foundation for a multi-provider AI assistant. The architecture supports:

• Adding new AI providers (implement AIProvider interface)
• Adding new actions (add to AIAction enum and create prompt)
• Extending the UI (modify WebviewProviders)

Phase 1 Limitations:

• Only "Analyze Code" action is fully functional
• Only Gemini provider is implemented
• Manual testing required for full verification
• Not yet production-ready (additional testing, error handling, and UX improvements needed for production deployment)

📄 License

[Your License Here]

🙏 Acknowledgments

• Built with the VS Code Extension API
• Powered by Google Gemini AI
• Inspired by modern AI coding assistants

Phase 1 Status: ✅ Functional MVP/Foundation

Phase 1 provides a working "Analyze Code" feature with Gemini and a solid multi-provider architecture foundation. Additional manual testing and hardening recommended before production use. Phase 2 will add multi-provider support and additional AI actions!