Mend: Safe, verified website repairs with WebMCP

• 

  Scan: find the issues that matter most

• 

  Mend landing page: safe, verified website repairs

• 

  Read-only source viewer mapped to the issue

• 

  Understand: trace audit evidence to the source

• 

  Proposed diff waiting for human approval

• 

  Performance finding: hero image is larger than rendered

• 

  Audit dashboard with performance, accessibility, SEO, and link scores

• 

  Accessibility finding: email field without an associated label

• 

  Connected repository with WebMCP tools ready

• 

  Verify: compare results and prove the fix worked

Inspiration

Website audits tell you what is wrong, while coding agents can edit source code. The difficult part is the handoff between those systems. Mend turns that gap into one human and agent workflow.

What it does

Mend scans a website for accessibility, performance, SEO, and broken-link issues. It keeps evidence tied to pages and selectors, maps findings to authorized source hints, proposes a bounded patch, shows an exact diff, waits for explicit approval, records a branch-first change, and verifies the before-and-after result.

Why WebMCP

This is a structured sequence of actions, not a chatbot guessing which pixels to click. Mend registers 13 compact tools through document.modelContext: scan, summarize, list and inspect issues, inspect source, propose a fix, review the diff, request approval, apply the approved fix, verify, and compare audits. The agent and human see the same state, and the tools work in WebMCP runtimes that omit optional execution context.

How we built it

The app is Next.js and TypeScript with server-side bounded HTML checks, normalized audit models, a controlled demo repository, and deterministic fix and diff generation. WebMCP is feature-detected so the manual UX works in browsers without it. Human approval and applied state are bound to signed HTTP-only receipts, the browser workspace recovers after reload, and verification reruns checks against the actual patched source snapshot. The approval guard rejects unapproved changes and the checked-in main fixture remains untouched.

What we learned

The hard part was making the workflow trustworthy and legible. We kept evidence, confidence, diffs, approval status, and verification together, and added SSRF protections, timeouts, size bounds, safe path validation, reload recovery, and regression checks.

Try it

The deterministic demo repairs missing hero-image alternative text: Accessibility moves from 74 to 89, one issue resolves, and zero regressions are reported. The production workflow was verified end to end from scan through source-backed comparison.

Built With

• ai
• next.js
• vercel
• webmcp