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:Shopify Catalog: enables someone using an AI agent to search Shopify and receive back what Shopify CEO Tobi Lutke calls “commerce widgets.”Universal Cart: allows a user’s agent to hold items from multiple stores in one place, so that buyers can easily track all the items they want to purchase.Checkout Kit: lets partners embed the merchant’s checkout in their agent.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.The Complexity of e-Commerce WidgetsLittle 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 ShopifyI 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.”How Does the Agent Render the Widget?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.”Shopify agentic commerce in action.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.”The Future of MCP-UI at ShopifyIn 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.”The post How MCP-UI Powers Shopify’s New Commerce Widgets in Agents appeared first on The New Stack.