Explainable

• 

  Extension Window

• 

  Extension Option

Inspiration

Too many CS majors depend on Claude Code. There's technical debt. We fixed that.

What it does

Explainable is a VS Code extension that allows you to highlight code structures/segments and open a window with a explanation and coding sandbox. So you can understand the code and play with a simplified version to fully understand it.

How we built it

We used the VS Code extension builder with a Typescript frontend and Node.js backend. Gemini API is used for code summarization and code generation.

Challenges we ran into

Literally everything. Getting the boilerplate VSCode extension to work, getting an optimized and accurate Gemini output for code summarization, connecting the coding sandbox to multiple layers to optimize for ease of use and processing, and github problems.

Accomplishments that we're proud of

Getting a working demo.

What we learned

We learned how to make a VS Code extension and apply many features to it.

What's next for Explainable

Technical depth customization, so it behaves differently for seasoned coders and beginners.

Built With

• claudecode
• geminiapi
• node.js
• typescript
• vscode