Inspiration
What it does
How we built it
Challenges we ran into
Accomplishments that we're proud of
What we learned
What's next for SiteRelay
Inspiration
Screenshots are useful for showing how a website looks, but they hide the details a coding agent needs: DOM structure, computed CSS, typography, responsive behavior, interaction states, assets, and motion. We built SiteRelay so a developer can point at an authorized interface in the browser and let Codex inspect the browser-rendered truth directly.
What it does
SiteRelay is a local-first browser-to-Codex inspection bridge. From the Chrome extension, a user can capture a component, section, or full page. The capture records structure, computed styling, typography, asset references, responsive evidence, pseudo-states, and animation details. An authenticated local service stores the evidence, while a Codex MCP plugin exposes focused tools for asking what was selected, inspecting fonts or motion, and reconstructing the captured interface.
Instead of placing a huge page dump in the conversation, SiteRelay keeps the full capture locally and returns only the evidence relevant to the current question. It can generate a fidelity-first React reconstruction, render it, and compare it with the source using a visual difference heatmap.
How we built it
The project is a pnpm monorepo containing a Manifest V3 browser extension, a TypeScript local relay service, a Codex MCP server and plugin, shared capture schemas, a React renderer, and an original showcase used for authorized testing. The extension communicates only with the local service. Pairing and origin checks protect the relay, captures are validated against a versioned schema, and asset or font extraction requires explicit authorization.
Codex helped us turn the initial product idea into a working end-to-end system: shaping the architecture, implementing the extension/service/MCP integration, diagnosing browser service-worker and startup issues, improving capture fidelity, writing tests, preparing Windows and macOS setup flows, and validating the submission build. Human decisions remained central to the product scope, privacy model, authorization boundaries, interaction design, and fidelity requirements.
Challenges we ran into
The hardest problem was preserving useful browser truth without making captures enormous or unsafe. Browser security restrictions, cross-origin assets, font licensing, transient service workers, complex CSS inheritance, pseudo-elements, and animation state all required explicit handling. We also had to make the local service easy to recover after a reboot and ensure Codex could reliably find the exact latest capture.
Accomplishments that we're proud of
- A complete browser-to-Codex workflow that works locally without uploading captured page data to a third-party service.
- Focused MCP queries for structure, styles, typography, assets, states, and motion.
- Fidelity verification through rendered comparison and pixel-difference heatmaps.
- Explicit provenance, limitations, and authorization controls for assets and fonts.
- One-command setup for Windows and macOS, plus automated checks and tests.
What we learned
High-fidelity interface reconstruction is not one problem; it is a chain of evidence problems. Visual pixels, DOM semantics, computed styles, fonts, assets, responsive states, and motion each need different capture and verification strategies. We learned that the most effective AI workflow is not to send everything at once, but to preserve rich local evidence and let the agent request exactly what it needs.
What's next for SiteRelay
Next we want to improve cross-browser support, multi-viewport capture automation, animation timeline reconstruction, framework-aware component generation, and collaborative capture libraries. We also plan to expand visual regression scoring so developers can iterate toward a measurable fidelity target while keeping authorization and provenance visible throughout the workflow.
Log in or sign up for Devpost to join the conversation.