PagePatch

Inspiration

Tired of Wordpress or traditional CMS solutions? why not just create your own solution via WebMCP!

AI agents can draft useful website changes, but the last mile is often unsafe or incomplete. The agent edits source code, works through a separate CMS, previews an approximation, or receives credentials powerful enough to publish. Meanwhile, the real website already knows its users, permissions, content schemas, policies, and production rendering.

PagePatch explores a simpler model: what if an authenticated website exposed exactly the reversible drafting capabilities an agent needs, while keeping every consequential decision under human control?

What it does

PagePatch is a WebMCP-powered fictional SaaS website with an authenticated author workspace. Once an author signs in, the site exposes twelve purpose-built tools that let an AI agent:

• discover editable structured regions and their current revision IDs;
• read field limits, audiences, and protected-content rules;
• create a persistent draft changeset;
• stage coordinated edits across the homepage, pricing page, and FAQ;
• inspect an image slot and prepare a secure replacement handoff;
• validate schemas, revision freshness, protected audiences, and cross-page policy consistency; and
• open a private preview rendered by the same components and responsive breakpoints as the production site.

The agent never receives a publish tool. The live site remains unchanged until the author reviews the exact preview and chooses Approve & publish or Reject draft on the website. Publication is atomic and produces an immutable receipt. Restoring old content creates a new reviewable changeset instead of rewriting history.

This makes WebMCP a strong fit for the problem: the agent handles interpretation, reconciliation, and reversible drafting, while the application retains authority over identity, policy, rendering, storage, and publication.

How we built it

The application registers WebMCP tools through document.modelContext.registerTool() only for authenticated users with the application-owned author role. Every server operation independently rechecks the session, role, ownership, origin, content type, schema, state, and immutable revision. Dynamic tool visibility improves the agent experience, but it is never treated as the security boundary.

Copy edits are stored as structured draft proposals pinned to immutable base revisions. Validation checks that protected audiences remain untouched and that a policy claim agrees across every affected page. A deterministic manifest locks a valid draft before preview and publication.

The preview workspace renders the draft overlay through the same page components, content resolver, CSS, and responsive breakpoints used by the public site. This makes approval meaningful: the author reviews the real rendering rather than a separate approximation.

For image replacement, PagePatch uses a short-lived authenticated upload handoff. The browser uploads directly to private Storage; the server verifies and decodes the file, rejects unsafe formats and dimensions, strips metadata, applies the registered crop, and emits deterministic WebP renditions. The agent reports the crop, resolution, format, and byte implications and must receive an explicit proceed-or-cancel decision before staging anything.

Challenges we ran into

The first real ChatGPT invocation used an execution shape that differed from the draft WebMCP example, so we adapted the bridge to support every observed shape while preserving cancellation and cleanup.

Image transport was another important constraint. ChatGPT could understand an image pasted into the conversation but exposed no safe site-readable URL, path, attachment ID, or reference. Instead of inventing one or sending binary data through tool JSON, we built the same-site private upload handoff.

Concurrency also required database-level guarantees. Draft edits, validation, publication, image decisions, and restoration use version checks, row locks, and state-specific transactions so simultaneous work fails explicitly instead of silently overwriting content.

Accomplishments that we're proud of

• WebMCP is the product mechanism, not a decorative chat layer.
• Twelve authenticated tools cover the complete reversible author workflow.
• There is intentionally no publish, approve, reject, or restore tool.
• Exact previews use the production components and responsive layouts.
• Text and image changes can publish together in one atomic transaction.
• Publication, rejection, and restoration leave immutable audit history.
• Tool results stay within a strict serialized response budget.
• Automated tests cover authorization, RLS, conflicts, previews, image safety, responsive behavior, accessibility, security headers, and secret scanning.

What we learned

Tool discovery is useful for ergonomics, but server-side authorization must remain the source of truth. We also learned that exact previews are a trust and security feature, not merely presentation: when authors can inspect the real output and structured before-and-after differences, human approval becomes informed rather than ceremonial.

Most importantly, strong agent experiences come from a clear division of responsibility. The agent is excellent at understanding intent and coordinating reversible work. The website should own permissions, policy, persistence, rendering, and commitments.

What's next

• organization-scoped roles and multi-author review assignments;
• configurable structured-region registration for additional sites;
• multi-reviewer approval policies for higher-impact changes;
• configurable image focal points and signed media scanning;
• exportable audit receipts and post-approval deployment webhooks; and
• broader browser support as WebMCP availability expands.

Built With

• next.js
• playwright
• postgresql
• react
• sharp
• supabase
• tailwind
• typescript
• vercel
• vitest
• webmcp