 |
VOOZH | about |
|
VOOZH | about |
We’re so glad you’re here. You can expect all the best TNS content to arrive Monday through Friday to keep you on top of the news and at the top of your game.
Check your inbox for a confirmation email where you can adjust your preferences and even join additional groups.
Follow TNS on your favorite social media networks.
Become a TNS follower on LinkedIn.
Check out the latest featured and trending stories while you wait for your first TNS newsletter.
Earlier this week, we interviewed the two developers of MCP-UI, a new way to add React and web components to AI agents. One of them, Liad Yosef, worked for Shopify at the time MCP-UI launched (just three months ago). It’s no surprise, then, that Shopify did one of the first large-scale implementations of MCP-UI.
Today we take a look at why the Canadian e-commerce giant is pursuing web UIs inside agents; and how they are going about it.
Bret Little and Samuel Path were two of the engineers responsible for Shopify’s MCP-UI implementation, alongside Yosef himself. It was part of a larger “agentic commerce” launch this month from Shopify. On Aug. 5, the company announced the Shopify Catalog MCP server, made up of three main parts:
So where does MCP-UI come into this process? Well, effectively the agent will be communicating with a merchant via the Shopify Catalog MCP server, which will send back the requested data and (via MCP-UI) any necessary visual components. As explained in my previous post, each UI component is wrapped in an HTML iframe element.
“The UI that MCP-UI defines, it’s just web stuff that’s defined in an iframe,” Little confirmed, adding that “it’s the MCP server — or the host of the MCP server [meaning Shopify] — that owns that UI.”
Because it’s just “web stuff,” it will get easily embedded in the agent’s own UI — provided it also supports MCP.
Little had previously made a comment on LinkedIn about the complexity of e-commerce UI components (a point Yosef also made on Shopify’s engineering blog). “MCP-UI provides a super easy way to easily embed all the complexities of commerce (subscriptions, bundles, discounts, thousands of variants, etc) right into any agent,” wrote Little.
“That’s the point of Shopify being the MCP server host, and we own it,” Little explained, talking about the UI component being sent to an agent. “We also should own the complexity if we are the experts. We should know how to do all that. You don’t necessarily want to spend six months getting all the nitty-gritties of rendering that UI. You can just get this embed in your agent, and it just works.”
“You don’t necessarily want to spend six months getting all the nitty-gritties of rendering that UI. You can just get this embed in your agent, and it just works.”
– Bret Little, Staff Engineer at Shopify
I noted in the previous article that most current users of MCP-UI are delivering the UI as React components. But Shopify is using Web Components to send the UI fragments — Shopify’s Storefront Web Components, to be precise. Released earlier this year, they are “a set of HTML components that handle the complexity of querying Shopify’s Storefront API, letting you display products, collections, and shopping cart functionality on your website without having to write complex JavaScript code.”
Little pointed out that Shopify’s Web Components were also designed to handle the complexity of e-commerce, so they complement MCP-UI nicely.
“How do I do variant selection with thousands of different variants? How do I do bundles? All that sort of stuff is also wrapped up in Storefront Web Components,” he said. “And because that already works anywhere on the web — it’s just Web Components — it was a natural fit to use it for MCP-UI, because MCP-UI can just reference and use these underneath the hood in the iframe.”
So how does the client app — the agent — actually use the MCP-UI components being sent by a Shopify merchant? After all, how they’re presented is ultimately up to the receiving application. For instance, ChatGPT might have a certain way of displaying visual components that is slightly different to, say, Claude.
Little explained that there are three parts to MCP-UI, from a client-side perspective.
“First of all, it’s just a protocol of how you can define some resources on an MCP server in a standard way. That’s just the first layer. The second layer is a protocol for communicating with these defined resources. And then the last one is, MCP-UI provides an actual implementation that you can just use out of the box.”
Practically speaking, there are two main options for how an agent can use an MCP-UI payload.
“One is, you can use the SDK that’s provided out of the box,” Little said, meaning the MCP-UI Client SDK. “There’s an npm package for a client that exists that gives you some components that you can render and just pass the results from the MCP-UI server directly to those, and they’ll just render. If you don’t want to do that, look at the raw response of the protocol of MCP — it’s largely iframe URLs. If you want to manually do it [i.e. display a UI component], you just create an iframe, put in the URL to that iframe URL (the source) and then you can use it.”
In addition to Shopify merchants using MCP-UI — each merchant storefront gets its own MCP server — Shopify has select partners that aggregate all of Shopify’s merchants. Microsoft Copilot is one of them; it gets access to all the merchants that exist in Shopify “through the Catalog API and the MCP server and such,” Little said.
Samuel Path added that there are other use cases emerging in Shopify.
“We have a merchant that has actually multiple different brands, and they would like to use the [Shopify] Catalog, use it over their different brands and create a chat agent that can then search across all of their brands, [so they] have a unified agent for multiple brands over the world.”
This brings us to the actual user experience — people using the agents — and whether this form of online shopping will eventually replace e-commerce websites.
Path said that in its early demos, the feedback they’ve gotten from users has suggested they will gravitate towards using agents for their online shopping needs.
“Once this experience has improved, people can imagine doing their shopping this way.”
– Samuel Path, Senior Software Engineer, Shopify
“Once this experience has improved, people can imagine doing their shopping this way,” Path said. “Instead of going on Google or looking for different products, they could just have a unified agent and say: ‘this is what I’m looking for, for my kids who are this age and who like unicorns, rainbows and princesses’. And instead of them clicking through links, you have an integrated experience [in the agent chat], with product cards from different merchants that you can easily sift through. It’s already a better experience than the current shopping experience online, I find.”
Path added that “the edges are still a bit rough” currently, but he expects this to quickly improve.
Little said that, “for me, personally, I don’t think I’ve gotten to the point where I trust an agent to go buy stuff for me.” But, he adds, “I think that is an amazing goal to shoot for, where we get to a point where people can trust agents to do important purchases for them. And I think Shopify is definitely trying to push in that direction.”
Path also noted that there is still work to do to adapt MCP-UI for mobile, because it’s currently focused on web technologies.
“There’s a lot of work […] to be done around how to optimize this [MCP-UI] for the mobile experience as well, because there’s more shopping done through mobile.”
