DevTools Logo

AI Code Explainer

AI Code Explainer

Understand snippets with on-device WebLLM

Code

Examples

Closure wrapper

Input
const once = (fn) => { let done = false; return (...a) => (done ? undefined : ((done = true), fn(...a))) }

A closure over mutable state — ask what the second call returns to test the explanation.

Effect with cleanup

Input
useEffect(() => { const id = setInterval(tick, 1000); return () => clearInterval(id) }, [])

React subscription/cleanup pairing; verify the model explains the empty dependency array.

Generator

Input
export function* range(n) { for (let i = 0; i < n; i++) yield i }

Lazy iteration — a good probe for whether the model explains yield vs return.

About this tool

Concise code explanations for functions and small classes — on-device WebLLM.

How to use

  1. Paste a snippet

    One function or a small class works best; the model's context is small.

  2. Pick a model

    Quality (1.5B) follows control flow and closures better than Light.

  3. Generate

    Get a plain-English summary plus notes on return values and side effects.

  4. Verify

    Check the explanation against the source — small models misread tricky branches.

Use cases

Onboarding to unfamiliar code

Get a first read on a helper before tracing it by hand.

Reviewing PR snippets

Summarize what a pasted hunk does while reviewing a larger diff.

Learning idioms

Generators, closures and recursion explained in plain English, offline.

Common mistakes

Mistake:Pasting whole files.

Fix:The model only sees a small window — paste the single function or class you care about.

Mistake:Assuming it knows your imports.

Fix:It cannot resolve project types; include signatures or types in the snippet.

Mistake:Treating the explanation as documentation.

Fix:Verify behavior with a test — the model can describe plausible but wrong control flow.

Frequently asked questions

References & standards

Related tools

AI Commit Message Generator

Suggest Conventional Commits messages from a git diff using on-device WebLLM

AI Documentation Generator

Generate JSDoc/TSDoc blocks from code with on-device WebLLM

AI Regex Generator

Turn natural language into a regex pattern with on-device WebLLM

AI SQL Query Generator

Generate SQL from natural language with on-device WebLLM and sql-formatter output

Context Assembler

Combine files and folders into one LLM-ready context block with XML tags, a project tree, ignore filters and a token estimate — like repomix or files-to-prompt, in your browser.

LLM Token Counter

Visualize BPE tokens with color blocks, model selector, and per-request cost estimate