Inspiration
For as much as marketers have optimized for conversion, they haven't been able to cut through the number one reason that people leave open carts. they're not ready to buy.
It had just happened to me while shopping for a microphone: I started at one site, then realized I needed more information to determine which was going to be the best fit.
What if the shopping interface could have met me where I was at--researching the options, ranking the matches, explaining its rationale, and then designing a search result layout to fit its conclusions?
That's just one glimpse of how web-interfaces of the future will adapt to their users' needs through a Live Canvas.
What it does
Each demo walks you through a conventional user interface, and then cordons off a bounded portion of it as WebMCP to redesign (the Live Canvas)
The Storefront demo lets the agent curate the search results with a toolbox of approved card presets and badges. This constrained design is a good fit for the untrusted nature of the public internet, keeping users safe from XSS attacks.
The Dashbord demo scales the idea up by giving you an entirely blank page. It imagine how the future of CRM / ERP dashboards might function. Prompt the agent to onboard you, collaborate on a vision with the agent as you would with your analytics team, and the end result is an entirely personal dashboard of controls, visualizations and reports.
The Distribution demo scales the idea outwards by asking whether you distribute a Live Canvas as part of conventional component libraries. It demonstrates what a future Datatable component could be, with the ability to generate bespoke reports and save them to your browser - all without backend engineering or ai-vendor lock-in.
How we built it
The architecture north star is "agent composition, application execution". The application exposes its UI primitives through WebMCP. The agent supplies a composition, and then the live canvas renders that composition using application-owned components. This solution prevents data from leaking out of the organization's security boundary, and also prevents token bloat.
Challenges we ran into and accomplishments that we're proud of
There are two large challenges that required creativity:
The largest challenge was discoverability. WebMCP is not bidirectional: an agent can invoke tools, but there's no mechanism for the website to initiate a conversation.
The past 30 years of the web have trained users for the affordance of buttons and forms. I built a new set of visible prompts and verbs to communicate to surface the new modality which was an interesting accomplishment, but does highlight an apparent shortcoming in the standard.
The second challenge is the built-in approval flow of agentic browsers. ChatGPT would auto-deny requests to access the user's simulated library to make recommendations, e.g. In the short term, this is solved with instructional text to ask for permission in advance. However, what WebMCP needs is a built in consent layer where tools are tied to required consent artifacts.
What we learned
WebMCP shows great potential to break interfaces out of the "ai chatbot jail".
What's next for Live Canvas
The most likely next step is to select an existing open-source component library and use it to build the first end-to-end WebMCP UI framework. That would turn the Live Canvas from just a demo pattern into a production-hardened implementation.
Log in or sign up for Devpost to join the conversation.