Element to LLM - DOM Capture for AI

Capture DOM elements with full context for AI debugging and analysis

Element to LLM — Structured UI context for LLMs Raw HTML is bloated. Screenshots burn tokens. Accessibility trees miss visual context. Element to LLM converts any web interface into SiFR v2 — a structured, token-efficient JSON format designed for LLM-driven UI understanding and automation. Instead of dumping raw code or pixels, SiFR provides a compact, semantic representation of the actual runtime state of the page. How SiFR works: Unlike basic scrapers, SiFR acts as a preprocessing layer for AI systems. It captures structure first, then details — allowing LLMs to understand interfaces without guessing. Core principles: Layout block summarization Generates a high-level structural map of the page (header, sidebar, main content) before element-level data. Adaptive complexity thresholds Capture density adjusts dynamically based on page complexity to maintain a stable signal-to-noise ratio within token limits. Spatial relationships Preserves containment and relative positioning, so LLMs understand hierarchy without screenshots or coordinates. Visual salience detection Elements are prioritized (high / medium / low) based on their relevance on screen, not DOM noise. Developer-oriented features Accurate runtime DOM context for LLMs (Claude, GPT-4, Gemini, etc.) Significantly smaller payloads compared to raw HTML dumps One-click capture of computed styles, visibility states, and hierarchy Designed for automation and repeatable pipelines Automation API Element to LLM can be triggered programmatically from browser automation tools. Supported pattern: Custom DOM events (e2llm-capture-request / e2llm-capture-response) Selector-based capture (full page or specific elements) Works with Playwright, Puppeteer, Selenium Example: await page.evaluate(() => { const id = Date.now().toString(); return new Promise((resolve) => { document.addEventListener('e2llm-capture-response', (e) => { if (e.detail.requestId === id) resolve(e.detail); }, { once: true }); document.dispatchEvent(new CustomEvent('e2llm-capture-request', { detail: { requestId: id, selector: 'body', options: { fullPage: true } } })); }); }); Use cases: Debug UI issues Paste the JSON into an LLM to identify layout, stacking, or visibility problems without screenshots. Testing & QA Generate reliable Playwright / Cypress selectors based on real structure, not brittle heuristics. Agent-driven navigation Give autonomous agents consistent UI context they can reason about deterministically. Privacy & security Local execution — all processing happens in your browser No data exfiltration — captured data is never sent anywhere No hidden scripts — transparent, inspectable behavior Key properties Token-efficient (adaptive salience, no bloated dumps) Layout-aware (structure before elements) Pipeline-ready (strict SiFR v2 schema) Privacy-safe (local-only) Universal (Chrome, Arc, Brave, Edge) A small tool for giving LLMs reliable UI context — without screenshots or raw HTML.