BeforeApply

Inspiration

Web agents often have to operate web applications by reading the screen, finding controls, clicking through menus, and guessing whether an action succeeded. That approach can be slow and fragile. On the other hand, fully automatic changes can make it difficult for a person to understand or review what happened.

We wanted to explore a better human-agent workflow: the agent should be able to inspect web work and prepare useful changes, while the human keeps the final decision visible and authoritative.

What it does

BeforeApply is a human-agent change-review workspace.

The demo uses a seeded marketing page and guides the user through a complete workflow:

1. Inspect the current page.
2. Find priority issues.
3. Explain an issue.
4. Prepare a proposed change.
5. Review the before-and-after result.
6. Stage the proposal for approval.
7. Approve or reject it as a human.
8. Apply the change only after approval.
9. Generate a concise change report.

For example, the workspace can identify that the hero button label “Learn more” is too vague, prepare the alternative “See how it works,” and show both values before anything is applied.

How we used WebMCP

When WebMCP is available, the page registers 12 structured tools through document.modelContext.registerTool().

The tools cover workspace inspection, issue discovery, explanations, proposed changes, previews, approval, application, reporting, and resetting the demo.

The tools use strict input schemas and explicit descriptions of their side effects. Preparing a change is separate from applying it. The apply operation is blocked unless the proposal has reached the human-approved state.

The app also includes a manual fallback. It uses the same state handlers and approval gate so the complete workflow can still be tested in a browser that does not yet expose WebMCP.

What we learned

WebMCP is not only about making buttons easier for an agent to click. The tool descriptions, input schemas, state transitions, and safety boundaries are equally important.

A useful agent-native web experience should expose meaningful operations, return clear structured results, and preserve the human’s ability to inspect and approve consequential changes.

How we built it

The project is a self-contained static web application built with HTML, CSS, and JavaScript. It uses deterministic in-memory data so judges can reproduce the same workflow without creating an account, configuring an external API, or providing private credentials.

The live demo is hosted on Cloudflare Pages.

Challenges we faced

WebMCP is an emerging browser capability, so browser support is still evolving. We handled this by detecting support at runtime, showing the current tool status, and keeping a transparent manual fallback available.

We also designed the state machine so that the agent cannot bypass the human approval boundary by calling the apply operation directly.

Built With

• agents
• api
• browser
• clouldflarepages
• css
• html
• javascript
• json
• schema
• web
• webmcp