PairAlgo.ai — WebMCP Algorithm & Interview Workspace

An AI-native algorithm practice space where browser agents pair-coach you via WebMCP—offering Socratic hints, instant Web Worker test execution, and deterministic spaced repetition.

Comment

PairAlgo.ai — WebMCP Algorithm & Interview Workspace

Inspiration

When practicing coding interview problems, asking an LLM for help usually fails in two ways:

  1. Hallucination: The model claims broken code "looks correct" because it cannot actually execute the code or evaluate edge cases.
  2. Solution Dumping: You ask for a subtle nudge, and it immediately dumps the full optimal solution, spoiling the problem.

Most browser AI agents attempt to interact with web apps by taking screenshots and scraping the DOM. This is slow, fragile, token-heavy, and lacks structured execution context.

With WebMCP (Web Model Context Protocol), the web app exposes typed execution tools (run_tests, get_hint, get_recommendation) and pushes live state (clientState) directly to the agent. Code executes in an isolated in-browser Web Worker, giving the agent deterministic test results so it can act as a reliable, zero-hallucination pair programming coach.

What It Does

PairAlgo.ai is an in-browser algorithm workspace built for WebMCP. It allows browser agents (ChatGPT in-app browser, Chrome with WebMCP enabled) to inspect editor state, execute code deterministically, and provide progressive hints.

1. Ambient State Synchronization (setClientState)

The app continuously syncs session telemetry to the agent via document.modelContext.setClientState() (with navigator.tools fallback):

  • Active problem ID, difficulty, and target time
  • Test pass count (e.g., 3/5 passing)
  • Hints revealed count (Levels 1–3)
  • Current interview readiness score and streak

The agent knows what the user is working on and whether tests pass without repetitive prompt questions.

2. Six Typed WebMCP Tools

The app registers 6 typed tools via standard document.modelContext.registerTool() and navigator.tools.register():

  • get_recommendation: Returns the optimal next problem based on category skill gaps, interview frequency weights, and SM-2 review schedules.
  • start_problem: Loads the problem starter code into Monaco and resets the timer.
  • run_tests: Executes editor code in an isolated Web Worker sandbox and returns structured pass/fail JSON diffs, timing, and console logs.
  • get_hint: Returns 3 tiers of hints (Level 1: Intuition → Level 2: Data Structure → Level 3: Implementation Detail) so the agent guides without spoiling.
  • submit_solution: Validates the full test suite, logs the attempt in IndexedDB, and updates SM-2 repetition schedules.
  • get_skill_profile: Returns the user's readiness score, streak, and per-category breakdown.

3. Deterministic Scoring Engine

Readiness is calculated purely from IndexedDB attempt logs without AI guesswork: $$\text{Readiness} = 0.40 \times \text{PatternStrength} + 0.25 \times \text{Retention} + 0.20 \times \text{Speed} + 0.15 \times \text{Independence}$$

How It Works in Practice

  1. Recommendation: The user asks what to study. The agent calls get_recommendation({ set: 'core-75' }), which identifies an unpracticed high-weight category (e.g., Graphs) and returns course-schedule.
  2. Context Setup: The agent calls start_problem({ problemId: 'course-schedule' }), loading the starter code into Monaco.
  3. Execution & Coaching: The user writes a BFS cycle detection solution and asks why it fails. The agent calls run_tests(), inspects the failing assertion, and calls get_hint({ level: 2 }) to guide the user on in-degrees without revealing the solution.
  4. Submission: Once all tests pass, the agent calls submit_solution(), updating the user's progress and SM-2 review dates in IndexedDB.

How We Built It

  • Frontend & Editor: Vite, TypeScript, and @monaco-editor/loader with Ctrl+S / Cmd+S instant testing.
  • Web Worker Sandbox: Runs untrusted code inside an isolated Web Worker using new Function() with a 2,500ms timeout guard to prevent infinite loops.
  • Data Structure Serialization: Custom BFS serializers and deserializers (arrayToList, listToArray, arrayToTree, treeToArray) with cycle detection, allowing complex ListNode and TreeNode structures to pass seamlessly across worker boundaries.
  • Storage: IndexedDB (via idb) for offline persistence of 150 challenges, attempt histories, notes, and SM-2 review intervals.
  • WebMCP Evals: Built an automated eval suite (evals/webmcp-evals.json and tests/evals.test.ts) to verify tool-calling accuracy across 6 core intents (100% pass rate across all 10 test suites).
  • Demo Mode: ?demo=true pre-populates IndexedDB with 52 completed problems, an 83% readiness score, and active practice history for rapid evaluation.

Challenges We Ran Into

  1. Complex Data Structure Serialization Across Worker Boundaries: Coding interview problems frequently involve linked lists (ListNode) and binary trees (TreeNode), which lose class prototypes and can cause circular reference crashes during standard postMessage transfers. We had to build custom BFS serializers (arrayToTree, treeToArray, arrayToList, listToArray) with cycle-detection guards so complex data structures could pass between Monaco, the Web Worker sandbox, and assertion runners cleanly.

  2. Sandboxing Untrusted Code Without Freezing the Agent: Allowing users to run arbitrary algorithm code in-browser creates a severe risk of infinite loops (while (true)) freezing the browser tab and hanging the agent. We designed an execution harness inside an isolated Web Worker with a hard 2,500ms timeout guard that forcibly terminates the worker and spins up a fresh instance if a solution times out.

  3. Designing Anti-Spoiling Tool Contracts: If a tool returns too little information, the LLM hallucinates why tests failed. If it returns too much, the model immediately writes the optimal code and ruins the practice session. We had to carefully architect tool schemas (run_tests, get_hint) to return granular assertion diffs (Expected vs. Actual) without implementation details, alongside strict 3-tiered hints, grounding the model so it can act as a Socratic coach rather than a solution dumper.

Accomplishments

  • Deterministic Sandbox: Actual in-browser code execution—zero hallucinated test passes.
  • Sub-10ms Feedback: Tests run locally with zero network round-trips.
  • 150 Real Problems: Complete bank of 150 algorithm challenges across 18 patterns with verified test cases and 3-level hints.
  • 100% Client-Side: No backend servers, zero database costs, works fully offline.

What's Next for PairAlgo.ai

  • Multi-Language Sandboxes: In-browser Python (Pyodide) and Go (WASM) execution.
  • Visual Traversal Debugger: Interactive step-through animation for graph/tree traversals wired to WebMCP inspection tools.
  • Timed Mock Interviews: Agent-conducted 45-minute timed sessions with follow-up complexity questions.

Built With

  • ai-agents
  • algorithms
  • css3
  • data-structures
  • developer-tools
  • html5
  • indexeddb
  • interview-prep
  • javascript
  • llm
  • monaco-editor
  • node.js
  • offline-first
  • openai
  • pwa
  • sandbox
  • sm-2
  • spaced-repetition
  • typescript
  • vite
  • vitest
  • web-workers
  • webmcp
  • zero-backend
Share this project:

Updates

Submission history