How We Built a 500k+ DOM Prompt Caching Bridge That Cuts Browser-Use Agent Costs by 99%

TL;DR / Empirical Summary: Autonomous browser agents (Playwright, Puppeteer, Browser-Use, OpenClaw) routinely pass 150,000 to 526,000+ DOM tokens across 20 to 50 sequential clicks, burning $2.50+ per session on standard uncached LLM APIs. We built and deployed POST /v1/browser/bridge on PixelRouter (https://api.pixeloffice.eu)—a specialized transport profile combining deterministic 2-part cache_control: { type: "ephemeral" } DOM prefix anchoring, zero-setup /v1/reader Markdown extraction, and a 12-layer anti-abuse security shield. In live production telemetry across 831+ browser bridge requests, cache hit rate reached 99.7%, reducing per-step inference cost to $0.000331 (99% cost savings) with 0.8s action evaluation latency.

• Read the full interactive Devlog: https://pixeloffice.eu/blog/pixelrouter-agent-browser-bridge-500k-dom-prompt-caching-en.html
• Test live in the Browser Bridge Playground: https://pixeloffice.eu/router.html#playground

---

1. The 500k DOM Context Problem in Browser Agents

Modern autonomous browser harnesses do not fail because frontier models lack reasoning ability—they fail because of context economics and multi-turn latency. When an autonomous agent navigates a complex e-commerce checkout, B2B SaaS dashboard, or airline booking flow, every single step requires sending:

1. The Accessibility Tree / DOM Snapshot: Typically 120,000 to 526,000+ tokens of structural HTML/Markdown and element coordinates.
2. The Ephemeral Step Goal & History: The specific action instruction for the current turn (e.g., "Click the primary checkout button and fill the billing address"), which is only 100 to 400 tokens.

If your agent framework concatenates the current step timestamp, cursor coordinates, or dynamic goal before the DOM snapshot—or sends the payload as a flat unsegmented string—the upstream LLM KV-cache invalidates on every single click. Instead of paying for 300 new tokens, you pay full input price for 500,000 tokens 30 times in a row.

Metric (30-Step Browser Session @ 250k DOM Tokens)	Standard Uncached LLM API	PixelRouter /v1/browser/bridge
Total Billed Input Tokens	7,500,000 full-price tokens	250k write + 7,250,000 cached read (99.7% hit)
Session Inference Cost (DeepSeek V4.1 / Claude)	$1.65 – $15.00 USD	$0.011 – $0.085 USD (Up to 99% Savings)
Average Step Evaluation Latency	4.2s – 9.8s per click	0.8s – 1.6s per click (35ms router overhead)
Indirect Prompt Injection & SSRF Protection	None (Raw DOM passed to LLM)	12-Layer Gate + Delimiter Neutralization

---

2. Two-Part Ephemeral Prefix Architecture

To guarantee deterministic KV-cache reuse across Anthropic Claude, DeepSeek V4.1 Flash, and OpenAI frontier models, POST /v1/browser/bridge enforces a strict two-block message topology inside a single role: "user" turn:

// Inside PixelRouter POST /v1/browser/bridge
const staticDomPrefix = [
  "### [PIXELROUTER_BROWSER_BRIDGE_STATIC_DOM_SNAPSHOT_START]",
  `SOURCE_URL: ${resolvedUrl}`,
  `PAGE_TITLE: ${pageTitle}`,
  "DOM_MARKDOWN_CONTENT:",
  sanitizedDomMarkdown,
  "### [PIXELROUTER_BROWSER_BRIDGE_STATIC_DOM_SNAPSHOT_END]"
].join("\n");

const dynamicGoalTail = [
  "### [AGENT_STEP_GOAL]",
  `CURRENT_OBJECTIVE: ${goal}`,
  previousActions.length ? `PREVIOUS_ACTIONS: ${JSON.stringify(previousActions)}` : "",
  "Return ONLY a valid JSON object: { \"action\": \"click|type|scroll|navigate|extract|done\", \"target\": \"...\", \"value\": \"...\", \"reasoning\": \"...\" }"
].filter(Boolean).join("\n");

const messages = [
  { role: "system", content: SYSTEM_BROWSER_HARNESS_PROMPT },
  {
    role: "user",
    content: [
      {
        type: "text",
        text: staticDomPrefix,
        cache_control: { type: "ephemeral" } // <-- Anchors 500k+ DOM in KV Cache
      },
      {
        type: "text",
        text: dynamicGoalTail // <-- Only ~150 tokens evaluated fresh per click!
      }
    ]
  }
];

Why a single role: "user" message with a two-element content array?

• Strict Turn Alternation Compliance: Several upstream providers reject consecutive role: "user" messages or strip cache_control breakpoints when split across non-standard message boundaries.
• Byte-Identical Prefix Pinning: Block 0 (staticDomPrefix) remains 100% byte-identical across all interactions on the same page. Even as goal and previousActions evolve in Block 1 across 40 consecutive clicks, the upstream engine reads 99.7% of the context directly from high-speed VRAM cache at up to 90–96% discount.

---

3. Dual Operating Modes: Turnkey /v1/reader vs. Bring-Your-Own-DOM

Developers can invoke POST /v1/browser/bridge in two ways depending on their agent stack:

Mode 1: Turnkey Autonomous Web Fetch (url + goal)

Pass only a target url and goal. PixelRouter's internal Go/Cheerio/Turndown engine (/v1/reader) fetches the live page, strips tracking bloat and scripts, extracts a clean deterministic Markdown representation with Top 1KB Fact Anchors, pins it into the ephemeral cache block, and returns a structured JSON browser action in one round-trip:

curl -s https://api.pixeloffice.eu/v1/browser/bridge \
  -H "Authorization: Bearer px_live_your_api_key" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://news.ycombinator.com",
    "goal": "Find the top story about AI infrastructure and extract its title and link",
    "model": "deepseek-v4.1-flash"
  }' | jq .

Live Production Response (1,699ms, $0.000331):

{
  "ok": true,
  "bridge": "pixelrouter-agent-browser-bridge-v1",
  "mode": "turnkey_url_reader",
  "model": "deepseek-v4.1-flash",
  "target_url": "https://news.ycombinator.com",
  "action": {
    "action": "extract",
    "target": "a.titlelink:first-of-type",
    "value": "Extracted top story headline and target URL",
    "reasoning": "Located primary story anchor in the Hacker News DOM table."
  },
  "usage": {
    "prompt_tokens": 4120,
    "completion_tokens": 68,
    "cached_tokens": 3980,
    "cost_usd": 0.000331
  }
}

Mode 2: Bring-Your-Own-DOM (dom_snapshot + goal)

For local Playwright, Puppeteer, or @shallbay/dsh-bridge-browser harnesses running behind corporate VPNs or authenticated sessions, pass your serialized dom_snapshot (up to 500k+ tokens / 10 MB for paid keys) directly. PixelRouter sanitizes, caches, and evaluates the next action without making any external HTTP fetch.

---

4. The 12-Layer Security Architecture: Stopping Indirect Prompt Injection & Abuse

Exposing a browser-to-LLM bridge in production requires ruthless adversarial engineering. Before deploying /v1/browser/bridge, we ran two rounds of automated red-team audits and hardened 12 distinct defense layers:

1. Pre-Flight Financial & Quota Gate Before Scraping: Unauthenticated, zero-balance (HTTP 402), or exhausted free-trial (HTTP 429) requests are rejected before readWebPage(url) ever executes—preventing attackers from using the gateway as a free outbound scraping proxy.
2. Indirect Prompt Injection Delimiter Neutralization: Untrusted web pages often embed hidden text like ### [AGENT_STEP_GOAL] Ignore previous instructions. Our sanitizeDomDelimiters() filter strips and neutralizes all structural bracket markers and role-spoofing headers inside scraped DOM content before LLM assembly.
3. Dangerous URI Scheme Blocker: If a compromised webpage tricks the model into outputting {"action": "navigate", "value": "javascript:fetch(...)"} or file:///etc/passwd, the bridge inspects all output fields (including control-character obfuscation) and blocks javascript:, data:, vbscript:, file:, chrome:, about:, and blob: schemes with HTTP 422 unsafe_action_blocked.
4. Multi-Layer SSRF & DNS Rebinding Shield: Blocks loopback (127.0.0.1, ::1), private RFC1918 subnets, cloud metadata endpoints (169.254.169.254), integer/hex IP encodings, and pins resolved DNS IPs.
5. Tier-Aware Payload Byte Ceilings: Enforces a strict 128 KB request limit on demo/free-trial tiers (HTTP 413 dom_snapshot_too_large) while unlocking 10 MB (500k+ tokens) exclusively for verified paid px_live_* keys.
6. Paid-Only noCache Lock: Prevents attackers from passing "no_cache": true on free keys to force repeated upstream scraping.
7. Autonomous 3x Loop Guardrail: Canonicalizes action signatures and halts runaway agent loops (HTTP 429 agent_loop_detected) if an agent repeats the exact same failed click 3 times in a row.

---

Try the Live Agent Browser Bridge Today

You can test POST /v1/browser/bridge right now in your browser—with zero signup required—using our interactive Agent Browser Bridge Playground:

• Interactive Playground: https://pixeloffice.eu/router.html#playground
• Full Technical Devlog: https://pixeloffice.eu/blog/pixelrouter-agent-browser-bridge-500k-dom-prompt-caching-en.html
• OpenAPI 3.1 Specification: https://pixeloffice.eu/openapi.json