Infinite Canvas — WebMCP Challenge Edition

Problem

Current collaborative design tools require you to download an Electron app or a desktop app to use MCP for using coding AI agent. There isn't a single collaborative UI where humans and agents can collaborate together for designing.

Solution

Infinite Canvas solves this using collaborative UI where the app itself a live website can be opened inside of Codex in a browser or Google Chrome browser and the AI agent has access to all the tools which can help design and collaborate on design to the AI agent. The editor itself has much more functionality for human collaboration, which includes zoom pan moving around the canvas, tweaking the properties via the write inspector, moving the layers on the canvas and much more, Whatever is selected on the canvas can be passed to an AI agent as context that includes the design itself or any images that are pasted on the canvas.

By using WebMCP the AI agent is able to make the changes directly on the canvas exactly as humans would do, manipulating the values and everything via the tool access that we provide.

What I learned while working on this project is this seems like a perfect use case for something that has to directly work on web that is inside of a browser as it provides the exact tools and solve the use cases the same way a human would do which allows also an AI agent to do the same thin.

If much more time is spent working on this project, there are many challenges like concurrency parallel working side by side with a human, which can be solved.

If provided an opportunity, I would love to keep working on this project with codex and ship it as an inbuilt plugin.

Built With

  • cloudflare-durable-objects
  • cloudflare-workers
  • css
  • html
  • typescript
  • vercel-ai-gateway
  • vite
  • webmcp
Share this project:

Updates

Submission history