FrameGuard

FrameGuard is a human-in-the-loop visual change-review workspace for teams that want agent speed without surrendering brand control.

Inspiration

AI design tools are fast, but they can mutate protected logos, legal copy, and approved layouts without a clear audit trail. FrameGuard makes every proposed visual change explicit, reviewable, and reversible.

What it does

An agent inspects the visible document and creates a structured proposal. Each change appears immediately in the shared UI with its target, rationale, before/after values, status, and compatibility feedback. Protected elements are visibly blocked. A human can approve changes individually; only approved, compatible changes can be applied. Rejection leaves committed state untouched, undo restores the previous revision, and a review receipt captures the decision trail.

How WebMCP is used

FrameGuard registers focused page tools against one state authority: inspect_document, create_proposal / propose_adaptation, set_change_approval, apply_approved_changes, reject_change_set, undo_last_change_set, and export_review_receipt. Tool availability follows page state, inputs use bounded schemas, validation fails closed, and every successful call mutates the same React store the human sees—so agent execution and UI never diverge.

Human + agent

The agent proposes and explains; the human reviews and authorizes. Protected changes cannot be approved or applied. Drafting and preview never alter the committed canvas.

How we built it

React 19, TypeScript, Vite, Vitest, Playwright, GitHub Pages, and Chrome WebMCP. The project runs entirely in the browser and transmits no review data.

Challenges and learning

The hardest part was preserving atomicity across proposals, protected targets, partial approvals, undo, and dynamic tool registration. We solved this with deterministic domain functions, a single external-store authority, deep-frozen snapshots, microscopic commits, and 64 unit/component plus 4 end-to-end tests.

Built With

• github
• playwright
• react
• typescript
• vite
• vitest
• webmcp