code explAIner

Inspiration

We wanted a fast, beginner‑friendly way to understand code without leaving the editor. Context‑switching to search or documentation breaks flow, especially for students and new contributors. So we built code explAIner to make explanations instant, local, and actionable.

What it does

code explAIner is a VS Code extension that explains highlighted code (or a chosen line range) using AI. Users can pick explanation length, switch to an ELI5 mode, and copy results instantly. It also surfaces key lines so you can quickly find the most important parts of the snippet.

Install

Download the .vsix asset below (GitHub release link)
In VS Code: Extensions → … → Install from VSIX…

How to use

Get a Groq API key:
- Create an account at groq.com
- Go to the API section and generate a key
Start the backend server:
- Open a terminal in the server folder
- Run npm install
- Set your key:
  - Windows: set GROQ_API_KEY=your_key_here
  - macOS/Linux: export GROQ_API_KEY=your_key_here
- Run npm run dev
Run the extension:
- Open the extension folder in VS Code
- Press F5 to launch the Extension Development Host
Use it:
- Highlight code in a file
- Run Code Explainer: Explain Code
- Adjust line range or explanation length if desired
- Click EXPLAIN MY CODE or EXPLAIN LIKE I’M 5

How we built it

We built a VS Code extension with a webview UI and a Node/Express backend. The extension sends selected code to the server, which calls Groq’s LLM API to generate explanations. We added validation, rate limiting, and timeout handling, plus formatting logic to keep the output readable.

Challenges we ran into

Keeping the webview and editor selection in sync
Validating inputs without blocking useful edge cases
Ensuring line numbers match the real file
Polishing UI inside VS Code’s webview constraints

Accomplishments that we're proud of

End‑to‑end workflow from selection → explanation
Live range preview with clean UI interactions
Clear output formatting with key lines
Robust server validation and error handling

What we learned

We learned how to build a VS Code extension, design a webview UI, and integrate it with an AI backend. We also gained experience shaping prompts and enforcing reliable output formatting.