ViewGraph Capture

ViewGraph is the UI context layer for AI coding agents. 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.

Annotation & Capture

• Click any element to annotate with comments, severity, and category
• Shift+drag to select a region
• Panic capture (Ctrl+Shift+V): instant DOM + screenshot snapshot mid-action, without opening the sidebar
• Live annotation status: 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)

Enrichment & Diagnostics

• 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

v3 Format - Token Efficiency

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

Export & Integration

• Three export modes: Send to Agent (MCP), Copy Markdown (Jira/GitHub), Download ZIP 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
• TracePulse integration: frontend errors bridged to backend monitoring
• Works with Kiro, Claude Code, Cursor, Windsurf, Cline, and any MCP-compatible agent
• 41 MCP tools for querying, auditing, diffing, and generating specs

No agent required. 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.

Security

• 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 (AGPL-3.0)

Links

• Quick Start - zero to first fix in 5 minutes
• Documentation
• Security & Threat Model
• GitHub