Browser Annotator lets you open a live webpage inside VS Code, point at what you want changed, and send the relevant page context to Claude Code.
What you can do
Comment on an element — select a button, heading, card, image, or other page element and explain the change you want.
Capture an area — draw a rectangle around part of the page and attach it with a comment.
Draw on the page — mark several places with the pencil, then explain the requested change.
Capture the viewport — send an image of everything currently visible in the browser.
Before you start
You need:
VS Code 1.96 or later.
The official Anthropic Claude Code extension, open in the same VS Code window.
Chrome, Chromium, Edge, or Brave.
A website or local development server to open.
Run from source
Run npm install.
Open this folder in VS Code.
Press F5 and choose Run Extension.
In the Extension Development Host, run Browser: Claude Code Browser Annotator from the Command Palette.
Use
Interact with the page normally.
Select the comment button, screenshot-area button, or pencil button.
Select or mark the relevant UI and enter your comment.
Press Enter or select +. The extension pastes your comment and workspace-relative @ references for the generated context files into the current Claude Code composer. You remain in control of submitting it.
Generated captures are stored temporarily under .claude-browser-captures in the open workspace so Claude Code can resolve them. The session directory is removed when its browser panel closes.
Notes
The integration focuses Claude Code with claude-vscode.focus and pastes the capture references directly, so it does not open temporary editor tabs.
Browser context goes to Claude Code in the same VS Code window; it is never submitted automatically.
In Remote SSH, WSL, Dev Containers, and Codespaces, Chrome or Chromium must be installed in the remote environment.
If Claude Code is unavailable, the context is copied to the clipboard instead.
Run npm test for the helper, capture, and browser interaction regression suite.
