DispatchGuard WebMCP

Agent-native transit telemetry and collision mitigation command deck powered by browser WebMCP tools.

Comment

Inspiration

About two months ago, as I was preparing for my graduation, my family was traveling together to celebrate with me. They were driving along a two-lane highway corridor—the kind of treacherous mountain pass defined by blind curves, sudden visibility drops, and heavy commercial freight trucks that turn everyday transit into deadly collision zones.

On that road, a catastrophic crash occurred. I lost five of my closest family members in an instant.

When the OpenAI WebMCP Challenge was announced, I knew I could not build a toy or another generic chatbot. I had to focus on a problem with real-world stakes: preventing this specific, devastating failure mode so no other family has to suffer that loss.

Most browser AI agents today interact with applications through brittle screen-scraping, OCR, or simulated clicks. While that might suffice for casual e-commerce, life-safety operations cannot tolerate non-deterministic delays or scraping failures. When sudden fog drops visibility to near zero on blind S-bends, human drivers and dispatchers experience severe cognitive overload trying to calculate safe stopping sightlines and coordinate emergency interventions.

I asked a fundamental question:

What if high-risk transit corridors could be supervised directly inside the browser, where the application exposes deterministic, typed telematics tools to an AI agent?

I built DispatchGuard WebMCP to pioneer what an agent-native safety cockpit looks like—merging autonomous collision risk evaluation with human supervisory dispatch into a synchronized, life-saving control loop.

What it does

DispatchGuard WebMCP is a real-time transit telemetry and collision mitigation command deck where human dispatchers and browser agents collaborate to secure hazardous, two-lane highway corridors.

When the application loads in a WebMCP-capable browser, it exposes four typed tools directly to the agent layer via document.modelContext.registerTool:

  1. query_corridor_telemetry: Ingests real-time sector parameters—sightline distance (meters), weather state, commercial truck ratio, and blind curve counts.
  2. evaluate_overtake_risk: Runs kinematic collision modeling, evaluates hazard probability (0–100%), and escalates sector status to CRITICAL.
  3. broadcast_safety_alert: Pushes a geofenced advisory speed cap (e.g., 45 km/h) and overtake ban across active vehicle nodes and UI cards.
  4. export_incident_dossier: Bundles the entire incident timeline, telemetry data, and mitigation checklist into an audit-ready post-mortem modal with copyable JSON.

The human operator retains visual control through an interactive SVG vector radar schematic, while the AI agent runs risk math in the background and executes safety protocols with zero screen-scraping delay.

How I built it

  • Frontend Stack: Built with Next.js 16 (Turbopack), React 19, and Tailwind CSS. The interface uses a dark, high-contrast command deck palette (deep slate #0A0B0E, warning amber, and critical red vectors) designed for high-stress situational awareness.
  • WebMCP Registration: Implemented inside src/hooks/useWebMCP.ts. The tools are registered directly on document.modelContext with strict JSON Schema definitions for every input parameter.
  • Fallback Simulation Harness: Because judges test across various environments (some with Chrome flags enabled, others in standard browsers), I built an on-page simulation bus. Clicking the harness tools runs the exact same client-side mutation logic as the native WebMCP calls, guaranteeing the demo works on every browser.
  • Testing & Verification: Verified native tool discovery and execution using the official WebMCP browser extension and the ChatGPT in-app browser environment.

Challenges I ran into

  • Next.js SSR vs. Browser-Native WebMCP: In Next.js, document does not exist during server-side rendering. Furthermore, document.modelContext is injected dynamically by the browser or extension at runtime. I had to design a clean hydration guard and an asynchronous registration hook that polls safely for the context without throwing SSR errors or causing infinite re-renders.
  • Input Validation for Autonomous Agent Calls: When an AI agent executes tool calls, it can occasionally pass unexpected string formats or out-of-range floats. I implemented runtime input sanitization to clamp numerical values (like speed caps and truck ratios) and normalize weather strings before passing them into the UI state machine.
  • Real-Time Visual State Sync: Making the vector radar map dynamically pulse red, spike the risk gauge to 99%, and display active geofenced warning banners—all within milliseconds of an agent tool call—required keeping local UI state tightly coupled to the tool execution callbacks.

Accomplishments that I'm proud of

  • True In-Browser Agency: Proved that WebMCP can eliminate screen-scraping entirely. Tool execution happens sub-15ms directly in browser memory.
  • Clean Fallback Architecture: Built a system that gracefully degrades: if native WebMCP is detected, it registers to the browser agent; if not, the interactive UI harness lets any user test the full lifecycle manually.
  • Full Open-Source Compliance: Delivered a clean, production-built repository with complete TypeScript typing, strict zero-error builds, and an MIT license visible at the root.

What I learned

WebMCP represents a massive shift in how web applications should be architected. Instead of treating a web page as a purely visual surface meant only for human eyes, we can now design applications as shared state machines. The human sees an intuitive visual interface, while the AI agent interacts with typed, deterministic tools on the exact same page.

What's next for DispatchGuard WebMCP

A command deck in a browser is only the first step. To physically eliminate fatal head-on collisions on two-lane mountain corridors, the system must bridge the gap between software dispatch and real-time physical intervention on the asphalt:

  • Sub-100ms Peer-to-Peer Overtake Clearance (Vehicle-to-Vehicle):
    Developing a decentralized WebMCP toolset that operates over local ad-hoc Wi-Fi / DSRC networks without cellular internet. When a driver signals an overtake behind a freight truck, the agent automatically interrogates the forward oncoming corridor and issues an immediate, non-negotiable "ABORT OVERTAKE" interlock if the time-to-collision window is under 6 seconds.

  • Solar Edge Nodes for Mountain Blackspots:
    Partnering with roadside monitoring hardware (solar-powered radar/optical cameras on blind S-bends) to run local WebMCP micro-agents at the curve itself, beaming real-time corridor sightline obstructions directly to approaching vehicles and regional dispatch.

  • Offline Edge PWA for Drivers and Remote Outposts:
    Packaging DispatchGuard into an ultra-lightweight, offline-first Progressive Web App (PWA) with client-side WebAssembly models, ensuring crash prediction algorithms function with zero latency in rural mountain valleys where cellular reception completely drops.

  • Field Piloting on High-Risk African Transit Corridors:
    Collaborating with regional transport authorities, long-haul trucking cooperatives, and highway safety bureaus to pilot the early warning telemetry layer on notorious high-casualty mountain passes and freight corridors.

Built With

Share this project:

Updates

Submission history