PageBlueprint captures machine-readable behavioral maps of running web apps — producing structured .appspec files that give AI agents the deep context they need to reason about your UI accurately and act on it reliably.
See It In Action
Record, annotate, and export — all from a compact extension popup.
One click starts capturing DOM, network requests, and interaction events on any web page.
Snapshot on demand, or pause to annotate ephemeral states like modals and dropdowns.
.appspec
Choose exactly the formats you need — semantic tree, accessibility tree, simplified HTML, screenshot, or SVG. Visual formats export as a second .resources.json file.
The Problem
Raw HTML and screenshots are either too heavy or too shallow for LLMs to reason about interactive UI accurately.
Full SVG trees and raw HTML dumps consume 50k–200k tokens — burning budget on structure, not meaning.
Modals, dropdowns, and overlays open and close in milliseconds. Standard recorders miss them entirely.
When a user clicks through a flow, the sequence of intent is lost. There's no structured record of what happened and why.
One-size-fits-all exports force teams to ship full representations when all they needed was a compact semantic tree.
The Solution
| Pain Point | PageBlueprint Feature |
|---|---|
| LLM token bloat | Multi-format export: semantic tree, accessibility tree, simplified HTML, screenshot, SVG — choose exactly what you need |
| Missed dynamic states | Pause-to-annotate + on-demand snapshots capture ephemeral UI states reliably |
| Lost interaction context | Event recording with contextual narrative generation ("Clicked 'Save' in Settings form") |
| Annotation friction | In-page annotation toolbar with shapes, freehand, and text — exported as an SVG vector overlay in the .appspec |
| AI ambiguity | Component inventory with selectors, roles, labels, and semantic purpose for every interactive element |
Differentiators
Six properties that make PageBlueprint a fundamentally different kind of capture tool.
.appspec is purpose-built for LLM consumption. Multiple compact representations tuned to minimize tokens while maximizing reasoning fidelity.
Every interactive element is inventoried with its selector, ARIA role, label, and inferred purpose — not just its pixel position. AI agents can act on this data.
Records what users did — clicks, inputs, navigation — and produces contextual narratives AI agents can use to replay, test, or extend workflows.
Freehand drawing, shapes, and text overlay are built into the recording session. Annotations export as an SVG vector overlay, embedded directly in the .appspec alongside structured element data.
Select exactly the representations you need per export. No forced 200k-token SVG payloads when a 2k-token semantic tree will do.
TypeScript + React 19 + Vite with a clean four-context message-passing model. Maintainable, auditable, and extensible.
Export Formats
Every snapshot includes five output formats — semantic tree, accessibility tree, simplified HTML, screenshot, and SVG. Pick the ones that fit your token budget and task.
Compact hierarchical summary of interactive elements. Ideal for LLM reasoning at minimal token cost.
ARIA roles, labels, and states. Enables agents to navigate UI the same way assistive technology does.
Stripped, de-noised HTML preserving structure and interactivity. Readable by both agents and humans.
Full visual representation with spatial layout. For agents that reason about position and visual hierarchy.
Pixel-accurate JPEG capture of the visible tab at snapshot time. Gives agents visual grounding alongside structured data.
Who It's For
Three primary use cases, one tool.
Building automated testing, UI modification, and web interaction agents that need structured, token-efficient UI representations to act reliably.
Recording test scenarios and generating verifiable .appspec behavioral specs that describe UI state precisely and reproducibly.
Debugging complex interactions or generating semantic documentation of running applications for AI-assisted development workflows.
Get Started
Free to install. No data leaves your device.
Add to Chrome →