MetaEdit

Inspiration

I was heavily inspired by React Grab by Aiden Bai for this project, but I wanted to make it such that the live prod website could be malleable by anyone on the team who has suggestions and who probably don't know how to use GitHub or Figma or an IDE to make edits.

What it does

MetaEdit turns a live website into a shared review space.

A visitor opens the normal site. A collaborator adds metaedit. to the hostname, enters the shared demo token, and can click an element or draw a freeform region over several elements.

A WebMCP-capable browser agent can read those annotations, inspect the selected UI, and propose a preview-only revision. Collaborators see the request, the proposed result, reactions, approvals, and history together. The eye control switches between the current page and the proposed result.

Upon approval of those changes, they can publish a pull request (PR). Under the hood, MetaEdit creates a GitHub branch, commits the revision evidence, and opens a PR. The live site is not changed directly.

How I built it

This is a React/Vinext app served by a Cloudflare Worker. Cloudflare D1 stores annotations, revisions, approvals, and activity. A Durable Object keeps presence and page-space cursor positions live over WebSockets. The page registers a small set of WebMCP tools through document.modelContext, so an agent can work from the shared page context without cloning the repository. The publish path uses the GitHub REST API and keeps the edit contract narrow: text, style, or visibility changes in the selected target.

The app was prompted from start to finish in Codex as Codex has always been my go-to tool.

Challenges and lessons

Honestly, I was very close to overengineering the entire thing. I had to take control of the model and decide what I wanted for the MVP. It was also kind of harder trying to juggle multiple free accounts to get this up and running.

Built With

• cloudflare
• d1
• github
• react
• typescript
• webmcp
• websockets
• workers