WebTrace Atlas

Inspiration

Modern websites quietly load dozens - or hundreds - of scripts, trackers, APIs, and third-party dependencies. Existing developer tools expose the raw data, but investigating it is still slow and highly technical. We built WebTrace Atlas to explore a web where people and AI agents can investigate that complexity together using shared, verifiable evidence.

What it does

WebTrace Atlas opens any public website in an isolated Chromium session and maps what it loads, who it communicates with, and how those dependencies affect performance, privacy, security, and accessibility.

Through 12 WebMCP tools, an AI agent can launch analyses, inspect measured findings, trace dependency paths, focus resources in the visible dashboard, and run real before-and-after experiments with selected dependencies blocked. Every agent action updates the same workspace the person sees.

How we built it

The frontend uses React, Vite, TypeScript, Zustand, Tailwind CSS, and React Flow. A Fastify API controls isolated Playwright browsers and collects network and runtime evidence through the Chrome DevTools Protocol. Axe provides accessibility checks, while DuckDuckGo Tracker Radar helps identify known trackers.

WebMCP tools are registered through document.modelContext.registerTool(). Their handlers share the frontend’s Zustand state, allowing human and agent interactions to remain synchronized. The production application runs on AWS ECS Fargate behind CloudFront.

Challenges we ran into

The hardest challenge was translating noisy browser telemetry into bounded, reliable information an agent could use without exposing raw page content or encouraging unsupported conclusions.

We also had to preserve request initiator relationships, safely analyze user-provided URLs, coordinate long-running browser jobs with cancellation, and ensure agent actions visibly updated a dense interactive dashboard. Block simulations required resolving only resources from the current analysis and launching a genuine second browser run rather than estimating the result.

Accomplishments that we're proud of

We are especially proud that WebMCP is central to the product rather than an added demonstration layer. The agent can initiate the complete workflow, investigate structured evidence, manipulate the human-visible interface, and perform real counterfactual experiments.

We also implemented SSRF protections, bounded untrusted outputs, cancellation support, stable resource identifiers, explicit tool annotations, synchronized activity tracking, and automated unit and end-to-end tests.

What we learned

We learned that WebMCP is most powerful when tools expose meaningful product capabilities - not merely existing buttons. Giving agents structured data improves accuracy, but sharing visible application state is what creates genuine human-agent collaboration.

We also learned that trust depends on transparency: users should see what the agent selected, what it changed, and which claims come from measured evidence versus inference.

What's next for WebTrace Atlas

Next, we want to add authenticated and multi-page analysis, saved and shareable investigations, historical comparisons, richer dependency-path visualization, and team collaboration.

We also plan to expand the WebMCP workflow with deeper diagnostics and approval checkpoints, allowing agents to propose experiments while people retain control over consequential actions.

Built With

• accessibility
• ai-agents
• amazon-web-services
• browser-automation
• chrome-devtools-protocol
• cybersecurity
• data-visualization
• dependency-graph
• developer-tools
• fastify
• human-ai-collaboration
• network-analysis
• observability
• open-source
• playwright
• privacy
• react
• tracker-detection
• typescript
• web-performance
• web-security
• web-standards
• webmcp
• website-analysis
• zustand