DEV Community

Gareth Dunne
Gareth Dunne

Posted on • Originally published at frontendfirewall.com on

Exploring MCP UI - the next integral UI layer

Exploring MCP UI - the next integral UI layer

Quick note: I'm looking to dive deeper into the technical nature of MCP UI in a separate post. In this post, I want to cover who is adopting MCP UI and why you should care.

What is MCP UI?

Exploring MCP UI - the next integral UI layer

MCP UI is the natural evolution of the Modal Context Protocol. We've seen MCP servers adopted by many providers to give agents access to tools that a server would use.

However, we didn't have a real UI baked into the LLM user experience. ChatGPT or Claude, only serving text, is quite limiting when trying to take action for a user.

Think of all the significant effort that's gone into optimising web component libraries in e-commerce, travel, task managers, and analytics tools throughout the years.

All these tried and tested UX principles are currently being omitted from the LLM user experience. You're telling me that after all these years of handcrafting these component libraries, we don't get to use them in this next wave of web interactions?

Well, not quite, because MCP UI allows us to bring the UI back into the forefront of the LLM experience. There is currently too much negativity about the role of FE developers in this AI world, so I believe MCP UI could inject a bit of life and complexity back into the frontend space. As a result, I want to explore who is using it.

Who are the big players betting on MCP UI?

A new protocol is only as good as its adopters, and reassuringly, some big names have already embraced MCP UI.

Shopify

Exploring MCP UI - the next integral UI layer

Shopify appear to be a huge advocate of MCP UI. They see the huge potential upside in the future of agentic commerce. They are an early adopter of MCP UI in their agent MCP server.

Exploring MCP UI - the next integral UI layer
Shopify's Catalog MCP

Shopify provide a very nice developer experience here, and the adoption makes perfect sense in the context of e-commerce. Bringing elements such as product cards and checkout systems into agentic search seems like a natural fit.

Providing another vertical where developers can build in opens up a huge ecosystem for MCP UI applications. It's definitely worth keeping an eye on how things progress here. A lot of standards for MCP UI has the potential to be molded by Shopify given their track record for great developer experience.

Admittedly, I am not fully tuned into the latest in Shopify developer experience, but I have previously built a handful of apps within the ecosystem. I found the experience to be much better than other similar ecommerce platforms.

The engineering org within Shopify is well respected in the industry, and I'd recommend looking at some of the engineering content they are putting out.

OpenAI and Stripe (Agentic Commerce Protocol)

Exploring MCP UI - the next integral UI layer

The Agentic Commerce Protocol is an open standard for programmatic commerce flows between buyers, AI agents, and businesses. This lets businesses render checkout elements in an AI chat.

It's an open-source project, but OpenAI and Stripe initially developed it and are now pushing it as the de facto standard in this new wave of shopping through agents.

The breakdownof the protocol can be summarised here:

  • For businesses - Make your products and services available for purchase through AI agents.
  • For AI Agents - Embed commerce into your AI chat without being the merchant of record.
  • For payment providers - Process agentic transactions by passing secure payment tokens between buyers and businesses through AI agents.

I've worked on checkout systems in the past; they are hugely complex, with every payment method having its own unique integration and compliance requirements.

It only makes sense that massive tech companies are trying to build a stable protocol around this. Especially, given the precarious nature of AI agents, such as prompt injection, hallucinations etc.

From my perspective, the transactional nature of e-commerce and buyers' intent as reflected in search terms via AI chat are enough to spur this agentic technology forward.

How UI elements are built in an agentic commerce flow is going to be particularly important as the conversion rate depends on well-defined and contextual components.

Building UI in this system requires a reframing of how users transact. No longer will there be a branded storefront surrounding the checkout process; instead, there will be micro elements that will need to be more direct and clear than ever before.

The agent owns the checkout flow end-to-end. It surfaces options, captures payment details and keeps buyers in the loop. For us developers, this alone requires a rethink of the UI for a buyer/seller model.

Security Concerns

By integrating with an MCP provider like Shopify, many of the typical security considerations are offloaded to a third party. This doesn't mean there aren't any to consider, but compared to something like Clawbot, which notoriously gives free rein to an agent in your OS - developing with MCP UI seems like an agentic area where one doesn't need to worry nearly as much about a brittle unsecure ecosystem.

It's also completely feasible that I'm wrong here, and this wave of MCP UI comes with an onslaught of dependencies with critical vulnerabilities.

Powering up the widget

Nothing is certain in this ever-changing space, but I'm starting to hedge my bets on the MCP UI/Agentic Commerce being the future. Imagine bringing the complex logic of a web application into a widget chat. It flips the conventional client-server narrative on its head. Because now we have a client, a sever and an agent in the flow. Although adding another point of failure comes with its own set of problems, I'm sure they will pan out as this technology expands.

Listen, a lot of my career has been frontend dominant, so I have a natural bias towards a new wave of frontend problems to solve. But if this truly is how we will provide UI for users going forward, we have to adapt to this user experience. It's a narrower focus for sure, but the problems we will be solving have the potential to be interesting, complex and industry-specific (e.g., e-commerce).

Top comments (0)