ShowBranch

Teach catalog rules by example with WebMCP: an agent turns human edits into isolated preview proposals, learns from corrections, and leaves final merge authority to the human.

Comment

Inspiration

Catalog rules are often easier to show than explain.

A catalog operator may instantly recognize how a product should be classified, but turning that intuition into a complete written rule — and then applying it safely across many related products — is repetitive and error-prone.

ShowBranch explores a different human-agent workflow:

Teach by doing. Preview before you commit.

Instead of writing a long instruction, the human makes one real edit in the product UI. An agent reads that activity through WebMCP, generalizes the demonstrated pattern, and proposes related changes inside an isolated preview branch.

If the initial generalization misses a catalog-specific rule, the human can correct one proposal directly in the preview. That correction becomes new activity the agent can read and use to revise related proposals.

Final merge authority remains with the human.

Human demonstration → Agent preview → Human correction → Agent revision → Human-controlled merge

What it does

ShowBranch is a catalog-classification demo built around a ShowOnce + BranchMode interaction.

A human first edits one product in the main catalog. ShowBranch records the complete before-and-after product state as human activity.

The browser agent can then use WebMCP to:

  • read products and human activity;
  • create an isolated preview branch;
  • propose updates to related products;
  • read human corrections made inside that branch;
  • revise proposals based on those corrections; and
  • inspect the final Current vs Preview diff.

Agent proposals remain isolated from main until the human reviews them.

The review surface shows changed products and fields, proposal rationale, confidence, and human-facing Merge Branch and Discard Branch controls.

This creates a collaboration loop where the agent can generalize and adapt without immediately committing its work to the canonical catalog.

Why WebMCP

The key idea is not simply giving an agent functions to call. It is letting the human UI and the browser agent collaborate over the same application state.

Without WebMCP, an agent would need to scrape rendered UI text or depend on a separate API that could drift from what the human actually sees and edits.

ShowBranch exposes exactly five WebMCP tools:

  • list_products
  • get_activity
  • create_preview_branch
  • apply_branch_updates
  • get_branch_diff

These tools let the agent work directly with products, human activity, preview branches, and diffs.

Merge, discard, reset, main editing, and human correction are intentionally excluded from the WebMCP capability surface. Final merge is exposed through the human UI rather than as an agent tool.

WebMCP therefore acts as the semantic collaboration layer between the human-facing product experience and the agent.

How we built it

ShowBranch is built with Next.js, React, TypeScript, and WebMCP, and is deployed on Vercel.

The UI and WebMCP tools share the same browser-side domain store for:

  • the canonical product catalog;
  • preview-branch patches;
  • human and agent activity;
  • branch lifecycle state; and
  • main revision state.

Preview branches are sparse isolated overlays rather than immediate mutations to main. The effective preview is composed from the current main state plus branch-specific patches.

Human edits store complete before-and-after snapshots. A correction made inside a preview branch becomes branch-scoped human activity, so the agent can immediately read that new evidence and revise its proposal.

Agent batches are applied atomically, and the application tracks branch lifecycle and main revisions so stale merges can be detected rather than silently applied.

WebMCP registration is also all-or-nothing: the page reports WebMCP ready only after all five tools register successfully.

The current MVP intentionally keeps state document-local, making the demo account-free, resettable, and easy for judges to reproduce.

Challenges we ran into

The biggest challenge was making the agent useful without giving it unnecessary authority.

We wanted the agent to generalize confidently across related products, while ensuring those proposals stayed isolated from the canonical state until a human review.

A second challenge was making human correction part of the collaboration loop rather than treating it as a one-off UI edit. A correction inside the branch needed to become structured evidence that the agent could reliably discover and use in its next revision.

Activity ordering introduced another subtle problem. An agent reading only an older branch should not mistake that branch's latest event for the globally latest human activity. ShowBranch therefore tracks scoped and global activity information so newer demonstrations are not silently overlooked.

We also had to handle atomic preview updates, stale-branch detection, registration cleanup, and exact reset behavior.

Finally, the security boundary needed to be described precisely. ShowBranch removes merge from the WebMCP capability surface and exposes merge through the human UI, while broader browser-automation permissions remain the responsibility of the browser or host.

Accomplishments that we're proud of

We completed the full human-agent correction loop end to end:

Human demonstration → isolated agent preview → human correction → agent revision → human review → merge

A single human edit can lead the agent to identify multiple semantically related products rather than blindly applying the same change to every item.

The human can then teach a catalog-specific rule inside the preview, and the agent can use that new evidence to revise related proposals while preserving product-specific details.

We also implemented:

  • exactly five WebMCP tools with strict capability boundaries;
  • a shared state model used by both the UI and the agent;
  • isolated preview branches with normalized diffs;
  • full before-and-after human activity snapshots;
  • rationale and confidence on agent proposals;
  • Current vs Preview review with aggregate change counts;
  • stale-branch protection;
  • atomic branch updates;
  • human-facing merge and discard controls; and
  • a one-click reset that restores the canonical demo state.

The result is a live, account-free demo that judges can reproduce directly in a WebMCP-capable browser.

What we learned

The biggest lesson was that proposal and commitment should be separate concepts in human-agent systems.

An agent does not need unrestricted write access to be useful.

It can generalize aggressively inside an isolated branch, receive human corrections as new evidence, and revise its work — while the human retains a clear review and commitment point.

We also learned that human corrections become much more powerful when they are stored as structured activity rather than treated as ephemeral UI interactions.

One correction can teach the agent a catalog-specific rule without requiring the human to rewrite the entire instruction.

WebMCP makes this interaction natural because the agent works with the application's semantic state instead of reconstructing intent from rendered text.

What's next for ShowBranch

ShowBranch is intentionally a focused demonstration of this interaction pattern.

Future directions include:

  • persistent branches and activity history;
  • state-aware WebMCP tool registration;
  • richer approval and permission policies;
  • multi-user review workflows;
  • larger catalogs and persistent backends; and
  • applying the same ShowOnce + BranchMode pattern beyond product classification.

The broader idea is simple:

Let agents propose and adapt quickly, while keeping consequential commitment understandable and human-controlled.

Built With

Share this project:

Updates

Submission history