Chrome Extension MCP-native Local-first · Free Open Source

Browser context, delivered to your agent.

Record any browser session locally — screen, console, network, DOM & storage. Claude Code & Cursor read the whole thing over MCP. No screenshots, no copy-paste, no cloud.

Record

Capture the
whole session

Reproduce

Trigger the
bug live

Ask

“what’s in my
recording?”

Ship

Agent reads it,
fixes it

⤓ Install Free Extension See how it works →

No signup · No tracking · Open source · Free forever

See it in action

🔒 localhost:3000/dashboard

Dashboard

Total Users

12,847

+12.5%

Revenue

$48.2K

+8.2%

Conversion

3.24%

-0.4%

Name	Status	Amount	Date
Sarah Connor	Active	$2,400	Apr 18
John Wick	Pending	$1,800	Apr 17
Neo Anderson	Active	$3,100	Apr 16

Claude Code

claude-sonnet-4-6

Up and running in 4 steps

Two free installs, one connect command, then record. ~2 minutes, all local.

Install the extension

Add Shadowmark to Chrome — a floating toolbar appears on every page.

Add to Chrome →

Install the server

The local MCP bridge that stores recordings and serves them to your agent.

$npm i -g shadowmark-mcp

Register it in Claude Code

One command. Claude Code launches the server itself — and while your session is open, it opens the recorder on :3141 too.

$claude mcp add shadowmark -s user -- shadowmark-mcp --stdio

Prefer a one-shot? Run shadowmark-mcp install. Then start a new Claude Code session.

Record & ask

On any site, hit ⏺ Record (it appears once connected), reproduce the bug, then ask your agent:

“What’s in my latest Shadowmark recording? Suggest a fix.”

Install→ Connect→ ⏺ Record→ Reproduce→ Ask Claude→ Ship

Everything your agent needs to fix the bug

One recording. Screen, console, network, DOM & storage — local and MCP-native.

🎥

Full session capture

Screen frames at 2 FPS while you reproduce the issue — auto-stops at 60s. Your agent sees what you saw.

🐛

Console & errors

Every console.* call and uncaught exception, with stack traces, on the timeline.

🌐

Network traffic

Requests, responses, headers and text bodies (≤100KB). Failures flagged so the agent knows what broke.

🧩

DOM & framework

Per-annotation DOM snapshot plus React / Vue / Angular internals and exact selectors — on any website.

🔌

MCP-native

12 tools. Claude Code & Cursor read your recording directly — no screenshots, no copy-paste.

🔒

Local-first

SQLite + JPEGs in ~/.shadowmark. Sensitive headers redacted. Nothing ever leaves your machine.

What Shadowmark can do

Built in. No add-ons. No limits.

Feature

Shadowmark

Session Recording & MCP

Screen frames (2 FPS JPEG)

Yes

Console logs + uncaught exceptions

Yes

Network requests + response bodies

Yes

localStorage / sessionStorage snapshots

Yes

Merged AI timeline (frames + errors + notes)

Yes

Read natively via MCP (Claude Code / Cursor)

Yes

100% local — no cloud, headers redacted

Yes

Framework Support

React — props & state

Yes

Angular component info

Yes

Vue setup data

Yes

Next.js / Nuxt / Remix / Svelte

Yes

Any website you don't own

Yes

Element Data

CSS selector + XPath

Yes

Computed styles capture

Yes

ARIA & accessibility info

Yes

Multi-element selection

Yes

Developer notes per element

Yes

Freeze animations

Yes

Export & Integration

Markdown export for AI

Yes

JSON export

Yes

Shadow DOM safe

Yes

Zero code changes needed

Yes

Free forever

Yes

12 MCP tools your agent can call

Claude Code and Cursor read your recordings natively — frames, console, network, DOM and storage.

Chrome Extension HTTP MCP (stdio/SSE) ───────────────── ─────────────▶ shadowmark-mcp ◀─────────────── Claude Code • Frame capture (2 FPS JPEG) :3141 • Console / network via CDP SQLite + JPEGs • Annotations + DOM snapshots ~/.shadowmark/ • localStorage / sessionStorage

ToolPurpose

shadowmark_list_recordings

List recent recordings with IDs, timestamps, and frame counts

shadowmark_get_context START HERE

Merged timeline + 4 key frames inline as images

shadowmark_get_annotations

User-flagged moments with frame ID + optional DOM snapshot

shadowmark_get_frames

Up to 8 frames inline; filter by trigger or center on a timestamp

shadowmark_get_console_logs

Console output (filter by level: log, warn, error)

shadowmark_get_network_requests

HTTP traffic with failed_only, url_contains, and include_bodies filters

shadowmark_get_storage

localStorage + sessionStorage snapshots (start and end of recording)

Plus annotation-task tools: get_pending_tasks, complete_task, get_page_context, and more.

View on GitHub → npm: shadowmark-mcp →

Why this matters — productivity in numbers

Based on the typical bug-reporting workflow when working with an AI coding agent.

12×

Faster bug context

~3 min manual → ~15 sec with Shadowmark

100×

Richer context

~2 KB manual → 50–200 KB structured data

120

Frames / minute

2 FPS auto-capture vs 0–2 manual screenshots

5 hrs

Saved per week

~60 min/day × 5 days of reclaimed time

Step	Manual workflow	With Shadowmark	Speedup
Take screenshot of the issue	10 s	Auto (every 500ms)	—
Copy console error → paste	20 s	Auto	—
Find network request, copy headers + body	60 s	Auto	—
Type selector / framework info	60 s	Auto via DOM snapshot	—
Write description, paste into Claude	30 s	“what’s in my latest recording”	—
Total per bug context	~3 minutes	~15 seconds	~12×

How it works

Record. Reproduce. Ask. Ship — local-first.

Install & connect

Add the extension, then npm i -g shadowmark-mcp and connect it to Claude Code. The toolbar's Record button lights up once the server is reachable.

Hit Record & reproduce the bug

Shadowmark captures screen frames, console errors, network traffic and storage automatically. Click elements to drop annotations — the agent gets the exact DOM for those moments.

Ask your agent — it ships the fix

“What’s in my latest Shadowmark recording?” Claude reads the merged timeline + key frames, finds the code, and proposes the edit. No copy-paste.

Get Shadowmark

Two free parts: the Chrome extension and the local MCP server. No signup, no tracking, local-first.

1Add the extension to Chrome

2npm i -g shadowmark-mcp

3claude mcp add shadowmark --stdio

⤓ Add to Chrome — Free

Shadowmark — Browser context, delivered to your agent

Shadowmark is an agentic browser tool that provides browser context for AI coding agents. It is a browser session recorder and AI browser recording solution that captures screen, console, network, DOM and storage data locally.

As an MCP server browser extension, Shadowmark integrates with Claude Code browser context and Cursor browser context through the model context protocol browser standard. It provides AI agent browser tools and serves as the AI coding agent context bridge.

Shadowmark is a visual bug reporting tool for AI assisted debugging. It automates bug reporting AI workflows by providing automated bug context including frontend debugging AI capabilities and console error capture AI.

Developers can record browser session for AI, give AI agent browser context, send browser data to Claude, capture DOM for AI agent, debug network traffic AI debugging issues, and use it as a screenshot alternative for AI.

Unlike traditional session replay for developers, Shadowmark is a local first debugging tool and open source browser recorder. It is a free chrome developer tool that enables AI pair programming browser workflows.

Shadowmark supports React debugging AI agent workflows, Next.js bug reporting, Chrome DevTools AI integration, localStorage capture MCP, and DOM snapshot AI capabilities.

The MCP chrome extension works with shadowmark-mcp npm package for browser recording MCP and serves as a complete AI debugging tool for modern web development.