# ViewGraph Capture

> AI-powered UI capture and annotation for coding agents. Click bugs, get auto-suggestions, panic capture mid-action, see live fix status, HMAC-signed communication, and 5-layer injection defense. Works with any MCP agent.

Canonical page: [https://chrome-stats.com/d/viewgraph-capture](https://chrome-stats.com/d/viewgraph-capture)

## Overview

- **ID:** `viewgraph-capture`
- **Platform:** Firefox
- **Type:** Firefox add-on
- **Status:** Available
- **Publisher:** Sourjya S. Sen
- **Category:** web-development,appearance
- **Version:** 0.9.2
- **Last updated:** 2026-04-29
- **First published:** 2026-04-13
- **Size:** 294 KB
- **Data as of:** 2026-09-14
- **Store listing:** [Firefox Add-ons Store](https://addons.mozilla.org/firefox/addon/viewgraph-capture/)
- **Website:** [https://chaoslabz.gitbook.io/viewgraph](https://chaoslabz.gitbook.io/viewgraph)
- **Privacy policy:** [https://addons.mozilla.org/firefox/addon/viewgraph-capture/privacy/](https://addons.mozilla.org/firefox/addon/viewgraph-capture/privacy/)

## Description

ViewGraph is the <strong>UI context layer for AI coding agents</strong>. When you see a bug in the browser, click it, describe what's wrong, and send it to your agent. The agent receives the element's exact CSS selector, computed styles, accessibility state, and your comment - then finds the source file and fixes the code.

<strong>Annotation &amp; Capture</strong>
- Click any element to annotate with comments, severity, and category
- Shift+drag to select a region
- <strong>Panic capture</strong> (Ctrl+Shift+V): instant DOM + screenshot snapshot mid-action, without opening the sidebar
- <strong>Live annotation status</strong>: see real-time progress as your agent works (queued → fixing → resolved)
- Idea mode: toggle the lightbulb to switch from bug reporting to feature ideation
- Smart suggestions: clickable chips for detected issues (missing aria-label, no testid, low contrast)
- Keyboard shortcuts: Ctrl+Enter (send), Ctrl+Shift+C (copy), 1/2/3 (severity), Esc (close)

<strong>Enrichment &amp; Diagnostics</strong>
- 21 enrichment collectors: network, console, accessibility, layout, components, client storage, transient state, error boundaries, service worker state, build metadata, and more
- Page Activity: captures toasts, flash content, animation jank, and render thrashing via 30s mutation buffer
- Built-in diagnostics: copy or create notes from any section - no DevTools needed
- Auto-audit: automatically runs a11y, layout, and testid audits after each capture
- Auto-inspect suggestions: automatic 3-tier scan (accessibility, quality, testability) with add-to-review flow

<strong>v3 Format - Token Efficiency</strong>
- <strong>Action Manifest</strong>: pre-indexed interactive elements with short refs (@e1-@eN) - 80-85% fewer tokens
- <strong>Style dedup + default omission</strong>: 30-45% smaller captures
- <strong>Container merging</strong>: 30-50% fewer nodes (semantically empty wrappers removed)
- <strong>observationDepth</strong>: interactive-only mode uses ~400 tokens vs ~100K full capture
- <strong>Structural fingerprint</strong>: cache-hit detection between captures
- <strong>Spatial index</strong>: O(log n) element queries by coordinate
- <strong>TOON compact format</strong>: ~87% fewer tokens for action manifest
- <strong>Performance instrumentation</strong>: capture timings in every snapshot

<strong>Export &amp; Integration</strong>
- Three export modes: <strong>Send to Agent</strong> (MCP), <strong>Copy Markdown</strong> (Jira/GitHub), <strong>Download ZIP</strong> report
- Baseline management: set and compare structural baselines from the sidebar
- Multi-project support with automatic URL routing (up to 4 simultaneous projects)
- Session recording for multi-step user journeys
- HTML snapshots and screenshots saved alongside captures
- <strong>TracePulse integration</strong>: frontend errors bridged to backend monitoring
- Works with <strong>Kiro, Claude Code, Cursor, Windsurf, Cline</strong>, and any MCP-compatible agent
- 41 MCP tools for querying, auditing, diffing, and generating specs

<strong>No agent required.</strong> Testers and reviewers can use ViewGraph standalone. Annotate issues, copy as Markdown for Jira/GitHub, or download a ZIP report with screenshots. No MCP server needed.

<strong>Security</strong>
- HMAC-signed requests: challenge-response handshake, replay-proof signatures
- URL trust indicator: shield icon shows trusted/configured/untrusted pages. Send gate blocks untrusted URLs.
- Prompt injection defense: 5-layer protection (sanitize, wrap, detect, harden, gate)
- STRIDE threat model with 9 identified and mitigated threats. 9 security reviews passed.
- No account required. No data sent to external servers. All captures stay on your machine.
- Open source (<a href="https://prod.outgoing.prod.webservices.mozgcp.net/v1/dbc253c87edddafac18bf367399b3987c25988e7ca2479a8ec4d138083d0b0e3/https%3A//github.com/sourjya/viewgraph" rel="nofollow">AGPL-3.0</a>)

<strong>Links</strong>
- <a href="https://prod.outgoing.prod.webservices.mozgcp.net/v1/671618ecd15fcc0e4427ede5de582286133b5b3ae09d4e396ac4d8daa76d0b5c/https%3A//chaoslabz.gitbook.io/viewgraph/getting-started/quick-start" rel="nofollow">Quick Start</a> - zero to first fix in 5 minutes
- <a href="https://prod.outgoing.prod.webservices.mozgcp.net/v1/baaa36c19a63f719e3edad7eaf191a7948bf9a4f11259c65bd89a2d4b7c6414d/https%3A//chaoslabz.gitbook.io/viewgraph" rel="nofollow">Documentation</a>
- <a href="https://prod.outgoing.prod.webservices.mozgcp.net/v1/9e8126276cde9e20266de78cec379fe4fadb1a5bfa2c2d9e71739fcfc62fa640/https%3A//chaoslabz.gitbook.io/viewgraph/reference/threat-model" rel="nofollow">Security &amp; Threat Model</a>
- <a href="https://prod.outgoing.prod.webservices.mozgcp.net/v1/dbc253c87edddafac18bf367399b3987c25988e7ca2479a8ec4d138083d0b0e3/https%3A//github.com/sourjya/viewgraph" rel="nofollow">GitHub</a>

## Rankings

- #138,291 — Overall
- #204 — graph
- #234 — capture

## Permissions and access

### Permissions

- `activeTab`
- `storage`
- `scripting`
- `alarms`
- `<all_urls>`

### Content script matches

- `<all_urls>`

## Safety

- **Risk impact:** Moderate risk impact
- **Risk likelihood:** High risk likelihood

### Analysis details

- Allows access to all websites, posing a significant security risk as it can monitor and modify data from any visited site.
- This extension has low user count. Unpopular extensions may not be stable or safe.

> Some risk analysis details are omitted from this free response. [Upgrade to view the full analysis](https://chrome-stats.com/pricing).

## Similar extensions and apps

- [TraceBug — Bug Reports for AI](https://chrome-stats.com/d/tracebug-bug-reports-for-ai)
- [BugCapture](https://chrome-stats.com/d/bugcapture-qa) — 1 users
- [OpusChange](https://chrome-stats.com/d/opuschange) — 1 users
- [Web to AI Agent](https://chrome-stats.com/d/web-to-ai-agent) — 2 users
- [Kaptur](https://chrome-stats.com/d/kaptur) — 2 users
- [Visual Annotation Tool](https://chrome-stats.com/d/visual-annotation-tool) — 3 users
- [Capture It - Capture & Edit Screenshots](https://chrome-stats.com/d/capture-it-take-screenshots) — 3 users
- [Bunny Inspector](https://chrome-stats.com/d/bunny-inspector) — 1 users
- [Capian](https://chrome-stats.com/d/capian) — 8 users
- [Smart Screenshot Annotator](https://chrome-stats.com/d/smart-screenshot-annotator) — 4 users
- [Point and Shoot](https://chrome-stats.com/d/point-and-shoot)
- [ScreenAI — Universal AI Screen Assistant](https://chrome-stats.com/d/screenai) — 11 users

---

Source: [Chrome-Stats](https://chrome-stats.com/d/viewgraph-capture)