OpportunityOS

A local-first WebMCP workspace where AI agents discover, match, and monitor student opportunities using 11 deterministic browser tools—with strict schemas and human-in-the-loop write approval.

Comment

💡 Inspiration

Every year, millions of students, researchers, and early-career developers miss out on career-defining fellowships, high-impact internships, and competitive hackathons simply because opportunity tracking is broken. Opportunities are scattered across fragmented job boards, company portals, and academic lists with shifting deadlines and convoluted eligibility criteria.

With the advent of autonomous AI agents, we wondered: Why are agents still forced to browse the web like clumsy humans—scraping messy DOM trees, hallucinating CSS selectors, and breaking brittle form buttons?

When Google and the W3C introduced WebMCP (document.modelContext), we saw the future: a web where applications expose their capabilities directly to in-browser AI models as structured, strongly-typed tools.

We built OpportunityOS to pioneer this new paradigm: an agent-native, local-first workspace that connects students with opportunities through 11 deterministic WebMCP tools, while keeping humans firmly in control of consequential writes.

🚀 What It Does

OpportunityOS is a browser-native opportunity management engine designed for both human operators and autonomous AI agents:

  1. Autonomous Opportunity Discovery & Matching: Agents discover 11 registered WebMCP tools directly through document.modelContext. They can search by domain, evaluate candidate eligibility, run multi-factor weighted rankings, and generate comparative matrices—with zero hallucination.
  2. Human-in-the-Loop Write Governance: While read operations (search, filter, rank, compare) execute autonomously, consequential write operations (save_opportunity, create_action_plan, update_application_status) are intercepted by a security gate that requires explicit human approval before mutating state.
  3. Live Surveillance & Application Tracking: Provides a unified command center featuring days-remaining countdowns, interactive 4-step milestone checklists (Resume Tailored, LOR Requested, Statement Drafted, Portal Submitted), and rapid deadline reminder chips (⚡ 48h Warning, 🚨 24h Crunch).
  4. Real-Time Surveillance Telemetry Feed: An immutable audit log records every agent interaction with millisecond timestamps, execution latencies, tool call signatures, and payload inspections.
  5. Cinematic 3D Centerpiece & Bespoke Dual Themes: Features a real-time WebGL 3D cyber-butterfly sculpture with aerodynamic multi-phase wing kinematics, styled with Google's modern Unbounded typography and a tailored dual-theme system (Obsidian Cyber-Cyan Dark Mode and Royal Cobalt Sapphire & Porcelain Pearl Light Mode).

🛠️ How We Built It

OpportunityOS is built with a strictly client-side, local-first architecture without external proxy dependencies or API credential leakage:

  • WebMCP Integration (src/webmcp.js): Implemented a production-grade WebMCP engine that registers 11 tools into document.modelContext.registerTool(). Each tool features strict JSON Schema boundaries, parameter type limits, and untrustedContentHint: true tagging on external data to prevent prompt injection.
  • Frontend Architecture (src/main.js): Built with Vanilla JavaScript and Vite for lightning-fast performance, zero bundle bloat, and instantaneous reactive UI state updates.
  • 3D Procedural Engine (Three.js WebGL): Crafted a custom 3D cyber-organic butterfly sculpture featuring dual-layer aerodynamic wing geometries, interactive mouse parallax banking, pulsating reactor crystal lighting, and dynamic theme-adaptive shaders.
  • Design System (src/styles.css): Engineered with Google's geometric Unbounded typography and an adaptive CSS token system that transitions between deep obsidian neon and a vibrant royal cobalt sapphire palette.

🔒 Security & Safety Invariants

We designed OpportunityOS under the principle: "Built for agents. Not built to trust them blindly."

  • Strict Schemas & Bounded Inputs: Every tool argument is strongly typed with bounded string lengths and integer ranges to eliminate runaway buffer allocations.
  • Untrusted Content Demarcation: All catalog-derived data is explicitly labeled with untrustedContentHint: true, instructing agents to treat external text as untrusted data.
  • Fixed ID Addressing: Tools operate strictly on catalog-validated entity IDs, preventing arbitrary SQL or prompt injections.
  • Zero Secret Leakage: Operates local-first in the browser runtime without requiring backend API keys or credential proxies.
  • Deterministic Services: Local scoring algorithms provide reproducible and explainable candidate evaluations.

🧗 Challenges We Ran Into

  1. Bridging WebMCP with Visual Feedback: Standard agent tools run invisibly in background execution contexts. We had to build a custom interceptor that visualizes agent reasoning in real-time, pauses execution when write permissions are requested, and renders a native confirmation modal.
  2. Light Theme Luminosity & Contrast: Ensuring that rich, high-contrast aesthetics translated gracefully between dark and light modes without washed-out grays required developing a bespoke Royal Cobalt Sapphire & Porcelain Pearl palette with high-specificity CSS inversion rules.
  3. Aerodynamic 3D Kinematics: Getting the Three.js butterfly to flap with realistic organic flight physics required decoupling the upper and lower wing matrices and applying phase-lagged sine wave oscillations with subtle wingtip aero-tremor.

🏆 Accomplishments That We're Proud Of

  • Fully Compliant WebMCP Implementation: Built all 11 tools adhering strictly to the W3C WebMCP draft specification with complete schema validation.
  • Zero-Latency Local-First Runtime: The entire app runs offline-ready, respecting user privacy and keeping all application milestones on-device.
  • Stunning Visual Identity: Created a design that breaks away from generic AI templates, combining sculptural 3D motion, spacious modern cards, and the bold Unbounded typeface.

📚 What We Learned

  • How WebMCP transforms web apps from passive user interfaces into structured, actionable APIs for AI models.
  • Techniques for prompt-injection defense when agents process untrusted catalog content.
  • Crafting human-in-the-loop security patterns where agents move fast while humans stay in total control.

🔮 What's Next for OpportunityOS

  • Chrome Extension Companion: Injecting OpportunityOS's WebMCP context into third-party portals like LinkedIn, Handshake, and university research directories.
  • Local LLM Integration (Gemini Nano / WebLLM): Running an on-device SLM directly inside the browser tab to execute missions with zero server costs.
  • Agent-Assisted Portfolio Assembly: Using WebMCP tools to automatically assemble tailored portfolios and statement drafts for verified deadlines.

Built With

Share this project:

Updates