Inline Code Explainer

A VS Code extension that provides AI-powered code explanations using Groq or OpenAI. Select code and view explanations via hover tooltips.

Features

• Explain selected code snippets with AI-generated explanations
• View explanations by hovering over explained code
• Support for Groq and OpenAI providers
• Configurable models and token limits
• File summarization support

Screenshots

Accessing the extension via Command Palette:

Accessing via Context Menu:

Code Selection:

Hover Explanation:

Requirements

• VS Code 1.85.0 or higher
• Node.js 18.x or higher
• API key for Groq or OpenAI

Setup

Installation

1. Clone this repository:

   git clone https://github.com/bhargaviHQ/inline-code-explainer.git
   cd inline-code-explainer

2. Install dependencies:

   npm install

3. Build the extension:

   npm run compile

Running the Extension

1. Open the project in VS Code
2. Press F5 (works on Windows, Mac, and Linux) to launch a new Extension Development Host window
3. In the new window, open any code file
4. Select code and use the command palette:
   • Windows/Linux: Ctrl+Shift+P
   • Mac: Cmd+Shift+P Then run "Explain Selected Code"
5. Hover over the selected code to view the explanation

Configuration

Configure the extension in VS Code settings:

1. Open Settings:
   • Windows/Linux: Ctrl+,
   • Mac: Cmd+,
2. Search for "Inline Code Explainer"
3. Configure the following:
   • inlineCodeExplainer.provider: Choose "groq" or "openai"
   • inlineCodeExplainer.apiKey: Your API key (or set GROQ_API_KEY / OPENAI_API_KEY environment variable)
   • inlineCodeExplainer.model: Model to use
   • inlineCodeExplainer.maxTokens: Maximum tokens for explanations

Alternatively, add to your settings.json:

{
  "inlineCodeExplainer.provider": "groq",
  "inlineCodeExplainer.apiKey": "your-api-key-here",
  "inlineCodeExplainer.model": "openai/gpt-oss-20b",
  "inlineCodeExplainer.maxTokens": 150
}

API Key Setup

You can provide your API key in two ways:

1. VS Code Settings: Set inlineCodeExplainer.apiKey in your settings
2. Environment Variable: Set GROQ_API_KEY or OPENAI_API_KEY in your environment

Usage

1. Select code in any file
2. Run the command "Explain Selected Code" from the command palette (Cmd+Shift+P / Ctrl+Shift+P), right-click and select from the context menu, or use the keyboard shortcut:
   • Mac: Cmd+Alt+E
   • Windows/Linux: Ctrl+Alt+E
3. Wait for the explanation to generate
4. Hover over the selected code to view the explanation in a tooltip

Development

Build

npm run compile

Watch Mode

npm run watch

Lint

npm run lint

Test

npm test

Extension Settings

• inlineCodeExplainer.provider: AI provider ("groq" or "openai")
• inlineCodeExplainer.apiKey: API key for the selected provider
• inlineCodeExplainer.model: Model identifier
• inlineCodeExplainer.maxTokens: Maximum tokens for explanations