Grasp — Explain AI Code Changes

Grasp explains AI-written and existing code in plain language, right inside your editor. Hover a line the AI just changed — or select any code — and get a beginner-friendly card: what it does for your app, a before → after story, a quick way to see it working, and the concepts it teaches (with an optional video lesson).

Built for people building with AI who want to understand what they shipped — not just accept it.

What it does

• Marks changed lines. A subtle accent on lines that differ from git.
• Explains a change. Hover a changed region → ✦ Explain this change → a card appears in the Grasp sidebar.
• Explains any code. Hover a meaningful construct on any line, or select code and run Grasp: Explain Selection → an explanation of what that piece does and how it fits.
• Video lessons (optional). With a YouTube key, each explanation can carry a matching tutorial.
• Reader levels. Beginner / Intermediate / Advanced — the card is written for the reader you pick.

Everything renders in the sidebar. Your Mac running the Grasp app? The hover's open in app link hands off to the native experience too.

Setup

1. Install the extension.
2. Get a free Google Gemini API key from Google AI Studio.
3. Run Grasp: Set Gemini API Key (Command Palette) and paste it. It's stored securely on your machine and never leaves it except to call Gemini.
4. (Optional, for video) Run Grasp: Set YouTube API Key with a YouTube Data API v3 key.

Settings

Privacy

Grasp sends the selected code and a small amount of surrounding context to Google Gemini using your API key, to generate the explanation. No code is sent anywhere else. Your keys are stored in the editor's encrypted secret storage.

Develop

npm install
npm run build      # bundle to dist/extension.js (esbuild)
npm run typecheck  # tsc --noEmit
npm run package    # build a .vsix (needs @vscode/vsce)

Press F5 to launch an Extension Development Host for local testing.