OpenPath Studio

Project

The problem

The open web contains excellent learning resources, but turning them into a realistic learning path is fragmented work. A learner or teacher must search across sites, compare formats and levels, inspect reuse terms, calculate a time budget, choose an order, and keep the plan current. A conventional browser agent can click through that workflow, but it has to infer meaning from visual controls and repeatedly reconstruct the page's state.

Why WebMCP is the right fit

OpenPath Studio makes the website's learning-planning capabilities explicit. Its WebMCP tools let an agent read the current goal, search a structured catalog, compare resources using stable IDs, build a time-bounded draft, add or remove items, reorder the path, mark progress, and export the result. The agent operates on the same client-side state and interface the person sees, so it never bypasses the product experience.

WebMCP is not an API wrapper added for the challenge. It is the interaction model that makes the collaboration reliable. Schemas remove ambiguity, tool outputs keep context compact, read-only annotations distinguish discovery from action, and the activity ledger makes every state change visible.

A better human experience

The person still leads. They define the topic, level, schedule, and preferences. The agent handles catalog search, comparison, sequencing, and repetitive edits. Every recommendation includes its source, provider, duration, level, format, URL, and license metadata. The draft remains fully editable with human controls, and it works without an agent as a progressive enhancement.

Publishing demonstrates a deliberate trust boundary. The agent can activate and prepare an annotated HTML form, but the form does not use toolautosubmit. A person must visibly review the title and learner, then click Publish. No data leaves the browser in this prototype.

What people and agents can now do together

Before WebMCP, an agent had to scrape filters, guess at card actions, and infer an ordered plan from the DOM. OpenPath lets the human state a goal in natural language while the agent composes multiple reliable domain actions against live browser state. The result appears immediately in the same interface for inspection and correction. The human contributes judgment and consent; the agent contributes speed, consistency, and structured comparison.

Example collaboration:

“Build me a 5-day beginner path on web accessibility with 30 minutes per day.”
The agent calls build_learning_path with explicit constraints.
The person reviews the visible draft and asks for a practical checklist.
The agent searches, adds the resource by stable ID, and moves it to position two.
The person marks progress or changes the sequence manually.
The agent prepares publication and waits for human confirmation.

How WebMCP was implemented

OpenPath registers 11 imperative tools through document.modelContext.registerTool() and exposes one declarative publish_learning_path form. The prepare_publish_review imperative tool provides a cross-client bridge that opens and optionally prefills the same visible checkpoint but can never submit it. JSON Schemas validate inputs. Read-only and untrusted-content annotations communicate tool safety. Tool output stays concise. An AbortController manages registration lifecycle, and the site sends origin-isolation and tools permission headers. Both agent and human actions reuse the same state layer and are recorded in a visible activity ledger.

The app is built with Next.js and React, has no external runtime dependencies beyond the framework, needs no account or API key, and stores its workspace locally. It is responsive, keyboard accessible, reduced-motion aware, and fully functional in manual mode.