{"id":"4eef7ab1-e061-4a3d-98f2-f4be351dc0a1","slug":"renderproof","kind":"mcp","name":"renderproof","summary":"Rendered web evidence for coding agents: screenshots, motion analysis, CSS animation metadata, and audit trails via MCP.","owner":"Djsand","repoUrl":"https://github.com/Djsand/renderproof","license":"MIT","licenseTier":"permissive","trust":"community","stars":1,"match":null,"fewStars":true,"format":"mcp","createdAt":"2026-06-17T16:34:40.000Z","addedAt":"2026-10-21T09:08:55.117Z","logoUrl":"https://avatars.githubusercontent.com/u/160553860?u=03b5f157ee0008c78905c3cfda29d957ab855523&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["browser-web","developer-tools"],"tags":["ai-agents","browser-automation","claude-code","codex","motion-analysis","playwright","screenshots"],"runtime":"node","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-27T22:34:17.275Z","sample":false,"url":"https://conduits.dev/tools/renderproof","language":"TypeScript","transports":["stdio"],"install":{"npm":"renderproof-mcp"},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# RenderProof\n\n**Rendered web evidence for coding agents.**\n\nRenderProof is a local-first MCP server that lets Codex, Claude Code, Cursor, and other agents capture what Chromium actually rendered: screenshots, motion, CSS animation metadata, pixel diffs, gates, loading states, and visual evidence that plain fetch tools miss.\n\nIt is not a scraper. It is not a bypass tool. It is the receipt for what the browser saw.\n\n## Why This Exists\n\nCoding agents are very good at reading source. The web is increasingly bad at being understood from source alone.\n\nModern pages hide their real state behind client rendering, consent walls, cookie modals, skeleton loaders, canvas, video surfaces, iframes, maps, bot checks, and motion. A text fetch can say \"Google Maps\"; a browser screenshot can show \"Danish consent wall blocking the map.\"\n\nRenderProof gives agents a grounded visual evidence layer before they make claims or copy a design.\n\n## What It Does\n\n| Tool | Use it when | Output |\n| --- | --- | --- |\n| `route_web_task` | The agent needs to choose text, screenshot, motion, search, or another platform tool | Route recommendation with evidence |\n| `read_url` | Text is enough | Normalized direct fetch text, with optional remote reader |\n| `capture_page` | Layout, gates, rendered state, canvas, images, maps, PDFs-as-browser-state, or visual QA matter | PNG screenshot + metadata |\n| `capture_motion` | A human needs to see animation, loading, scroll, transitions, or media motion | WebM video + keyframe PNGs |\n| `analyze_motion` | A coding agent needs to recreate or critique motion | Contact sheet, diff image, CSS animation metadata, pixel-diff JSON, design notes |\n| `clone_website` | A coding agent needs to rebuild an authorized website or study how a page is put together | Clone brief, desktop/mobile screenshots, design tokens, assets, topology, behaviors, component specs |\n| `doctor` | You want to verify local runtime/browser setup | Runtime and Playwright checks |\n\n## The Core Idea\n\n```mermaid\nflowchart LR\n  A[\"Agent task\"] --> B[\"route_web_task\"]\n  B --> C[\"read_url\"]\n  B --> D[\"capture_page\"]\n  B --> E[\"capture_motion\"]\n  B --> F[\"analyze_motion\"]\n  B --> H[\"clone_website\"]\n  C --> G[\"Grounded answer\"]\n  D --> G\n  E --> G\n  F --> G\n  H --> G\n```\n\nRenderProof makes the expensive path explicit: read text first when text is enough, escalate to rendered evidence when pixels matter.\n\n## Example Prompts\n\n```text\nUse RenderProof to capture a full-page screenshot of https://example.com with autoScrollBeforeCapture true.\n```\n\n```text\nUse RenderProof to analyze the animation style on this page and return the contact sheet, pixel-diff summary, and CSS animation metadata.\n```\n\n```text\nUse RenderProof to check what the browser actually sees on this Instagram/TikTok/YouTube page.\n```\n\n```text\nUse RenderProof to capture visual evidence before claiming whether this page is blocked by a consent wall, login wall, CAPTCHA, or skeleton loader.\n```\n\n```text\nUse RenderProof clone_website on https://example.com and give me the clone brief paths for a Next.js rebuild.\n```\n\n## Motion Analysis\n\nVideo is useful for humans. Agents need structured evidence.\n\n`analyze_motion` samples frames over time and returns:\n\n- a contact sheet PNG\n- a red-highlight diff PNG\n- frame timestamps\n- changed-pixel ratios\n- changed-region bounds and centroid movement\n- dominant movement direction\n- `document.getAnimations()` metadata\n- CSS keyframes, duration, easing, direction, iterations, target selector, animated properties\n- design notes written for a coding agent\n\nExample design notes:\n\n```json\n[\n  \"Detected 2 CSS/Web Animation target(s), affecting transform.\",\n  \"Primary timing appears to use duration 1200ms, easing ease-in-out, direction alternate.\",\n  \"Pixel sampling saw up to 5.81% of sampled pixels change between adjacent frames.\",\n  \"The changed region centroid trends right across sampled frames.\"\n]\n```\n\nThat is the difference between \"there is an animation\" and \"recreate this with transform, 1200ms, ease-in-out, alternate, moving right while scaling.\"\n\n## Website Clone Briefs\n\n`clone_website` turns a live rendered page into clone-ready artifacts for an AI coding workflow. It is inspired by section-by-section website reverse-engineering templates: inspect first, write durable specs, then build from those specs.\n\nIt writes a local bundle under `.renderproof/evidence/clones/`:\n\n- `research/CLONE_BRIEF.md`\n- `research/DESIGN_TOKENS.md`\n- `research/PAGE_TOPOLOGY.md`\n- `research/BEHAVIORS.md`\n- `research/components/*.spec.md`\n- `design-references/desktop-*.png`\n- `design-references/mobile-*.png`\n- downloaded assets, capped by `maxAssets` and `maxAssetBytes`\n\nThe output is not a completed app. It is the extraction layer a coding agent needs before rebuilding: exact rendered references, computed CSS signals, real text, asset paths, interaction hints, and responsive evidence.\n\n## Install\n\nOne-liner:\n\n```bash\ncurl -fsSL https://raw.githubusercontent.com/Djsand/renderproof/main/install.sh | bash -s -- codex\n```\n\nWindows PowerShell:\n\n```powershell\npowershell -NoProfile -ExecutionPolicy Bypass -Command \"& ([scriptblock]::Create((irm https://raw.githubusercontent.com/Djsand/renderproof/main/install.ps1))) -Target codex\"\n```\n\nSwap `codex` for `claude`, `cursor`, `cline`, `windsurf`, `gemini`, or `generic`.\n\nThe `codex` target writes directly to `~/.codex/config.toml`, so it works even when the Codex CLI is not available in your terminal PATH.\n\nIf Windows says `Missing required command: node`, install Node.js 20+ and reopen PowerShell:\n\n```powershell\nwinget install OpenJS.NodeJS.LTS\n```\n\nManual install:\n\n```bash\ngit clone https://github.com/Djsand/renderproof.git\ncd renderproof\nnpm install\nnpx playwright install chromium\n```\n\nThen install it into your coding agent:\n\n```bash\nnode dist/index.js install\n```\n\nOne-liners:\n\n```bash\ncurl -fsSL https://raw.githubusercontent.com/Djsand/renderproof/main/install.sh | bash -s -- codex\ncurl -fsSL https://raw.githubusercontent.com/Djsand/renderproof/main/install.sh | bash -s -- claude\ncurl -fsSL https://raw.githubusercontent.com/Djsand/renderproof/main/install.sh | bash -s -- cursor\ncurl -fsSL https://raw.githubusercontent.com/Djsand/renderproof/main/install.sh | bash -s -- cline\ncurl -fsSL https://raw.githubusercontent.com/Djsand/renderproof/main/install.sh | bash -s -- windsurf\ncurl -fsSL https://raw.githubusercontent.com/Djsand/renderproof/main/install.sh | bash -s -- gemini\n```\n\nWindows PowerShell one-liners:\n\n```powershell\npowershell -NoProfile -ExecutionPolicy Bypass -Command \"& ([scriptblock]::Create((irm https://raw.githubusercontent.com/Djsand/renderproof/main/install.ps1))) -Target codex\"\npowershell -NoProfile -ExecutionPolicy Bypass -Command \"& ([scriptblock]::Create((irm https://raw.githubusercontent.com/Djsand/renderproof/main/install.ps1))) -Target claude\"\npowershell -NoProfile -ExecutionPolicy Bypass -Command \"& ([scriptblock]::Create((irm https://raw.githubusercontent.com/Djsand/renderproof/main/install.ps1))) -Target cursor\"\npowershell -NoProfile -ExecutionPolicy Bypass -Command \"& ([scriptblock]::Create((irm https://raw.githubusercontent.com/Djsand/renderproof/main/install.ps1))) -Target cline\"\npowershell -NoProfile -ExecutionPolicy Bypass -Command \"& ([scriptblock]::Create((irm https://raw.githubusercontent.com/Djsand/renderproof/main/install.ps1))) -Target windsurf\"\npowershell -NoProfile -ExecutionPolicy Bypass -Command \"& ([scriptblock]::Create((irm https://raw.githubusercontent.com/Djsand/renderproof/main/install.ps1))) -Target gemini\"\n```\n\nLocal helper equivalents:\n\n```bash\nnode dist/index.js install codex --write-user\nnode dist/index.js install claude --apply\nnode dist/index.js install cursor --write-project\nnode dist/index.js install cline --write-user\nnode dist/index.js install windsurf --write-user\nnode dist/index.js install gemini --apply --scope user\n```\n\nSee [docs/installation.md](docs/installation.md) for agent-specific setup.\n\n## Use With Codex\n\n```bash\nnode dist/index.js install codex --write-user\n```\n\nManual equivalent:\n\n```bash\ncodex mcp add renderproof -- node /absolute/path/to/renderproof/dist/index.js mcp\n```\n\nDirect config equivalent:\n\n```toml\n[mcp_servers.renderproof]\ncommand = \"node\"\nargs = [\"/absolute/path/to/renderproof/dist/index.js\", \"mcp\"]\n```\n\n## Use With Claude Code\n\n```bash\nnode dist/index.js install claude --apply\n```\n\nManual equivalent:\n\n```bash\nclaude mcp add renderproof -- node /absolute/path/to/renderproof/dist/index.js mcp\n```\n\n## Use As CLI\n\n```bash\nnpm run dev -- route \"summarize this page\" --url https://example.com\nnpm run dev -- read https://example.com\nnpm run dev -- capture https://example.com --full-page\nnpm run dev -- capture https://example.com --full-page --auto-scroll\nnpm run dev -- motion https://example.com --duration 5000 --keyframes true\nnpm run dev -- analyze-motion https://example.com --duration 3000 --samples 5\nnpm run dev -- clone-website https://example.com --max-sections 24\nnpm run dev -- install generic --json\nnpm run doctor\n```\n\n## Safety Model\n\nRenderProof is designed to show gates, not bypass them.\n\nBy default, it:\n\n- allows public `http` and `https` URLs\n- blocks `localhost`, private IP ranges, and hosts resolving to private IPs\n- does not use remote readers unless explicitly enabled\n- does not solve CAPTCHA\n- does not hide automation\n- does not click through consent, login, or payment walls\n- does not use clone outputs for phishing, impersonation, or unauthorized reproduction\n- returns structured failures instead of pretending a page was accessible\n\nEnvironment controls:\n\n```bash\nRENDERPROOF_ALLOWED_HOSTS=example.com,*.example.org\nRENDERPROOF_ALLOW_PRIVATE_NETWORK=1\nRENDERPROOF_ENABLE_REMOTE_READERS=1\nRENDERPROOF_OUTPUT_DIR=.renderproof/evidence\nRENDERPROOF_MAX_CHARS=12000\nJINA_API_KEY=...\n```\n\nLegacy `GROUNDED_WEB_*` variables are still supported for compatibility.\n\n## What RenderProof Is Good At\n\n- Seeing rendered browser state when direct fetch returns useless HTML\n- Capturing cookie modals, login walls, consent walls, reCAPTCHA widgets, and skeleton loaders\n- Capturing maps, video players, image pages, canvas/WebGL surfaces, and JS-computed UI\n- Producing full-page screenshots with optional pre-scroll for lazy loading\n- Recording short WebM motion evidence for humans\n- Turning animation into agent-readable CSS and pixel-diff evidence\n- Creating auditable local evidence files for coding workflows\n- Generating clone briefs for authorized rebuilds, migrations, and learning\n\n## What It Will Not Do\n\n- bypass paywalls, login walls, CAPTCHA, bot checks, or private networks by default\n- scrape social platforms as a data product\n- replace Playwright MCP for interactive browser control\n- guarantee semantic object tracking from pixel diffs alone\n- produce a finished application from a clone brief without a coding agent doing the build and QA\n\nPlaywright is the engine. RenderProof is the evidence layer.\n\n## Development\n\n```bash\nnpm install\nnpm run typecheck\nnpm run build\nnpm run doctor\n```\n\nRun a browser launch check:\n\n```bash\nnpm run dev -- doctor --check-browser-launch\n```\n\n## Roadmap\n\n- PDF rendering and text extraction\n- page-state detection for consent/login/CAPTCHA/skeleton/download/blank-page states\n- visual diff scoring for clone QA workflows\n- safe user-provided auth/session support\n- evidence bundle manifests\n- optional interaction sequences with before/after evidence\n\n## License\n\nMIT\n"}