Image Editor (WebMCP)

Inspiration

Image editing is visual, but many edits are repetitive and precise. We wanted humans to describe the intent while browser agents handle the detailed steps.

What it does

Image Editor is a local-first editor for adding text, shapes, blur regions, arrows, drawings, and crops. Browser agents can control these actions through WebMCP.

How we built it

We built it with React, TypeScript, Fabric.js, and Vite. WebMCP tools connect directly to shared editor actions and use image-local coordinates for reliable automation.

Challenges we ran into

Keeping coordinates consistent while the canvas scaled responsively was challenging. Blur regions were especially tricky because the visible selection and generated blur patch need to stay synchronized.

Accomplishments that we’re proud of

We enabled a complete editing workflow in one agent interaction - from uploading an image to annotating, styling, positioning, and exporting it.

What we learned

Reliable agent experiences need clear tool descriptions, stable object IDs, structured errors, and an explicit coordinate system.

What’s next for Image Editor (WebMCP)

We want to add local-first object recognition with MediaPipe. This would let agents detect faces, products, and other subjects directly in the browser. For example, turning “blur the face” into an automatic edit without uploading image data to a server.

Built With

• cloudflare
• fabric.js
• react
• vite
• webmcp