Change Review Workspace

A self-contained WebMCP challenge MVP for a general-purpose human-agent change-review workspace. The demo keeps the agent useful without making the human decision invisible: inspect a page, surface priority issues, explain one, prepare a proposal, preview the before/after, stage it, approve or reject it, apply only an approved change, and generate a concise report.

Live preview

https://webmcp-challenge.pages.dev/

The live deployment is a deterministic demo and does not require an account or external API.

Source code

https://github.com/rakeshr/beforeapply

Run locally

The app is static, but use HTTP instead of opening index.html directly:

1. Double-click preview.bat on Windows, or run python -m http.server 4173 --bind 127.0.0.1 from this folder.
2. Open http://127.0.0.1:4173/.
3. Click through the visible workflow. The seeded data is deterministic and stored in memory only.

Test the demo

Recommended happy path:

1. Inspect current page.
2. Find priority issues.
3. Click Explain on an issue.
4. Click Prepare.
5. Open before / after.
6. Stage for approval.
7. Approve.
8. Apply approved change.
9. Generate report.
10. Click Reset demo and confirm the original snapshot returns.

The Manual fallback controls at the bottom call the same state transitions as WebMCP. Try Apply before approving to verify the approval gate blocks the action and leaves page content unchanged.

A lightweight state smoke test runs with:

node smoke-test.mjs

WebMCP contract

When document.modelContext.registerTool exists, app.mjs registers 12 tools with strict JSON schemas and explicit side-effect descriptions:

• list_workspaces
• inspect_current_page
• find_priority_issues
• explain_issue
• prepare_changes
• preview_changes
• stage_for_approval
• approve_changes
• reject_changes
• publish_changes
• generate_change_report
• reset_demo

Every handler returns a structured result with ok, tool, stateVersion, and either data or an error. publish_changes is hard-gated on both approval === "approved" and the proposal status being approved; it only changes the local in-memory snapshot. The UI shows whether WebMCP registered successfully and always leaves the manual fallback visible.

Native browser verification

The live URL was independently exercised in Chrome 151 with chrome://flags/#enable-webmcp-testing enabled in an isolated profile. Native document.modelContext.getTools() discovered all 12 tools, and the full inspect → report journey passed through native executeTool() calls while preserving the human approval gate.

No authentication, secrets, external API, paid service, or WordPress dependency is required.