look.cc

Record visual feedback on web apps with voice narration. Get structured markdown + screenshots that Claude Code can read in one shot.

look.cc = "look, Claude Code"

The problem: You spot a bug in your web app. You want to tell Claude Code "fix this." But typing a description is lossy, screenshots are tedious, and Loom videos can't be read by AI. You need a tool that captures what you see, what you click, and what you say — and outputs it in a format Claude Code can actually consume.

look.cc opens a browser, records your mic, captures every click with CSS selectors and screenshots, transcribes your voice with Whisper, and generates a single session.md file you can hand to Claude Code.

Demo

Watch the demo video here

Install

npm install -g look.cc

This installs the CLI, downloads Chromium, and adds the /record slash command to Claude Code automatically.

Prerequisites

brew install sox                  # macOS — needed for mic recording
# sudo apt-get install sox        # Ubuntu/Debian

export OPENAI_API_KEY=sk-...      # for Whisper transcription (or add to .env)

Usage

Claude Code (recommended)

/record https://your-app.com

Navigate the browser, click on elements, narrate what's wrong. Click Stop or press Ctrl+C to end. The session feeds directly into your Claude Code conversation.

CLI

look.cc start https://your-app.com    # record a session
look.cc list                           # browse past sessions
look.cc open                           # open latest session in Finder

Options

look.cc start <url> [options]

  -o, --output-dir <dir>    Base output directory (default: ~/look.cc)
  --local-transcribe        Use local whisper.cpp instead of OpenAI API
  --no-highlight            Skip drawing red highlight boxes on screenshots
  --max-duration <seconds>  Max recording duration (default: 900)

Features

Recording Widget

The in-browser recording widget shows:

• Recording timer with blinking red dot
• Stop button to end the session
• Inspect button — toggle to enter element selection mode (hover highlights elements, click marks them with a dashed red outline + badge)
• Mic level visualizer — animated green/yellow/red bars showing your voice is being captured
• Draggable — grab and move the widget anywhere so it doesn't cover content

Inspect Mode

Click the Inspect button on the widget to toggle element selection:

• Cursor becomes a crosshair
• Hover over any element to see a red outline
• Click to mark it (dashed red outline + ✖ badge persists)
• Click a marked element again to unmark it
• Press Escape to clear all marks and exit inspect mode
• Normal page clicks are blocked while inspect mode is on — no accidental navigation

After Recording

When you stop:

1. Audio is transcribed via Whisper with word-level timestamps
2. Transcript is split into small chunks aligned to screenshots (no giant text blobs)
3. Clicked/marked elements get red highlight boxes drawn on their nearest screenshot
4. A descriptive session title is generated from your transcript (via GPT-4o-mini)
5. A visual review page (review.html) opens in your browser showing the full session
6. Everything is copied to clipboard with absolute file paths — paste into Claude Code
7. Session is saved to ~/look.cc/<date>_<title>/

Session History

look.cc list    # table of all past sessions with title, date, duration, events
look.cc open    # open latest session folder in Finder

What Claude Code Gets

The generated session.md is a chronological narrative with screenshots inline at each step:

# Session: 2026-04-11 14:32
**URL:** https://app.example.com
**Duration:** 3m 12s

---

## [00:08] Click — "Apply discount" button
**Selector:** `button:has-text("Apply discount")`
**Element:** `<button class="btn-primary">Apply discount</button>`

> "So when I click this apply discount button, the cart total updates
>  but the line item still shows the old price..."

![00:08 clicked element highlighted](screenshots/hl-0004-snap-evt-abc123.png)

---

## [00:14 → 00:16] Observation (no interaction)

> "The discount is being applied to the total but not to the displayed line item price"

![00:14 page state](screenshots/0007-snap.png)

---

## [00:16 → 00:18] Observation (no interaction)

> "which is confusing for the customer"

![00:16 page state](screenshots/0008-snap.png)

---

## Console errors during session
- `00:09` — Uncaught TypeError: Cannot read property 'price' of undefined at cart.js:142

## Network errors during session
_(none)_

Claude Code gets: CSS selectors to grep for, element HTML, highlighted screenshots showing exactly what you clicked, your narration split into bite-sized chunks aligned to what's on screen, and any runtime errors.

Session Storage

~/look.cc/2026-04-11_143200_fix-cart-discount-bug/
├── session.md          # Main file — hand this to Claude Code
├── session.json        # Metadata manifest
├── review.html         # Visual review page (opens automatically)
├── screenshots/        # Periodic + highlighted screenshots
│   ├── 0001-snap.png
│   ├── hl-0004-snap-evt-abc123.png   # red box on clicked element
│   └── ...
├── audio.wav           # Raw recording
├── transcript.json     # Word-level timestamps from Whisper
└── timeline.json       # Raw event data

Architecture

CLI (Commander.js)
  │
  ├── Browser Recorder (Playwright)
  │     ├── addInitScript → click/input listeners + recording widget
  │     ├── exposeBinding → instant event capture (zero I/O, no browser blocking)
  │     ├── setInterval → periodic screenshots every 2s
  │     └── Inspect mode → overlay-based element selection + marking
  │
  ├── Audio Recorder (sox child process)
  │     └── mic level monitoring → terminal UI + in-browser visualizer
  │
  └── On Stop:
        ├── Whisper API → word-level transcript
        ├── Aligner → merge events + words, split at screenshot boundaries
        ├── Highlighter (sharp) → red boxes on nearest screenshots
        ├── Namer (GPT-4o-mini) → descriptive folder title
        ├── Review Page → self-contained HTML with inline screenshots
        ├── Markdown Renderer → session.md
        └── Clipboard → absolute file paths, Cmd+V ready

Key Design Decisions

• Periodic screenshots (every 2s) instead of per-event — page.screenshot() freezes the browser via CDP. Decoupling screenshots from events keeps the browser smooth.
• exposeBinding returns instantly — event handlers push data to a queue with zero I/O. The browser never waits for Node.
• Overlay-based inspect mode — a full-screen invisible div intercepts all mouse events during inspect. No modifier keys, no leaked clicks, no browser quirks.
• Transcript chunking at screenshot boundaries — long narration is split into 2-second chunks, each paired with its screenshot. Claude reads step-by-step, not a wall of text.
• Whisper API over local whisper.cpp — avoids a 150MB binary dependency for first-run. --local-transcribe flag is stubbed for later.
• Chronological narrative — Claude reads session.md like a story. Events, transcript, and screenshots are interleaved in time order.
• CSS selectors + element HTML inline — so Claude can grep the codebase directly from the feedback.

Tips

• Talk naturally — describe what you see, what's wrong, what you expected
• Use Inspect mode to mark specific elements you're referring to
• Drag the widget out of the way if it covers content
• Keep sessions under 5 minutes — focused feedback works best
• Password fields are automatically masked (value + screenshot)

Contributing

PRs welcome. The codebase is TypeScript, ~1200 lines across 17 files.

git clone https://github.com/DrMatrixx/look.cc
cd look.cc
npm install
npm run dev -- start https://example.com

License

MIT