MCP-UI in Action: A Demo of One-Click Agentic Checkout
Our mental model for agentic commerce is that a commerce agent will use two interfaces: the first is the human route - going through existing systems built for humans and browsers. This includes browser agents, automation, and similar tools. The second is the machine route - dedicated APIs and services that are agent-first.
Each has each own trade-offs. The human route is available today and doesn’t require major changes, but it runs into reliability problems at scale: bot detection, fragility, and browser agents difficulty with complex web interfaces (e.g. javascript, weird and unexpected popups etc.). The machine route is much more reliable, but requires a complete overhaul and heavy investment of resources, which presents the chicken or the egg problem - merchants won’t put heavy resources without seeing commerce traffic, and commerce traffic won’t come without reliable interfaces that can translate into great products.
We believe agentic commerce will develop along both paths. Today we’re sharing a demo from the second family of agentic commerce - the machine route. It reflects our view on how a headless store should work, how an agent wallet fits in, and a new emerging standard we like called MCP-UI.
MCP-UI
The future of agentic commerce interfaces will probably be a mix of both chat/voice input *and* web interactive elements, same as how it looked in traditional commerce (e.g. buttons and boxes).
The standard that’s evolving fastest to support this future is MCP-UI. It lets agents combine tool calling through MCP (for example, “show me all the Michael Jordan t-shirts available in XL” would call the show_products() MCP tool) alongside rendering interactive web components to create richer UIs. Instead of receiving plain text as a response, we will get some interactive UI.
MCP-UI example:
This standard is being led by Liad Yosef and Ido Salomon, with Shopify driving implementation. ChatGPT is expected to adopt it soon, and apps like Perplexity already show how chat and interactive elements can work together with their own implementation.
A simple example that already exists in the wild today is Perplexity’s richer agentic interfaces - asking it for hotels in NYC, it doesn’t just return a text summary but renders interactive components.
We believe in this standard and wanted to demonstrate how MCP-UI can work with a new generation of agentic wallets. Together, they create a smoother streamlined user experience to enable the next phase of agentic commerce.
Check out the demo for yourself and don't forget to see the full walkthrough video. If you want to build using nekuda, reach out at founders@nekuda.ai.
Our MCP-UI demo includes:
Shopping agent with a chat interface - Users can search for products, and use the chat and interactive web components interchangeably to choose products and navigate a catalog.
Merchant headless store which includes both an MCP server and traditional API. This store exposes the agent with it’s catalog, manages a stateful cart of the user shopping session and powers a headless checkout.
Unified nekuda wallet that is installed at the agent-level, and can store cards, tokenizes them, and interact with the headless store through specific agent actions. Our proposed wallet architecture allows actions like requesting the calculation of the final price based on the user’s shipping address (including tax and shipping) from the headless store, and sending approved payment credentials for an agentic transaction checkout. This implementation is the best UI/UX experience for agentic commerce (more on this below).
This is what the main demo interface looks like:
The demo isn’t just about showing MCP-UI. It’s meant to illustrate how we think the future architecture of commerce agents should look - especially the checkout. The agentic wallet should be a single, unified wallet that works across all merchants and ecosystems (PayPal, Shopify, etc.) with true one-click checkout. Let’s explain why - and why this doesn’t exist today.
Why is a unified wallet the future?
Right now, there are two major agentic commerce kits for developers to build third-party commerce agents: Shopify (which we covered here) and PayPal. Both give developers an end-to-end toolkit: catalog access to merchants, the ability to build and maintain a stateful cart, and eventually checkout (including collecting payment credentials and shipping details). Both Shopify and PayPal have ecosystems of merchants that manage their inventory through them. (Admittedly, this hasn’t been PayPal’s biggest strength historically, so many merchants using PayPal are not actually managing their inventory through them). Both can now offer “merchant networks” via MCP, with essentially the same pitch: build a third-party commerce agent, access our large catalog of products and merchants, and deliver a complete experience - including checkout - with a simple MCP integration.
Both companies are excellent at what they do, but if a developer wants to integrate merchants from both Shopify and PayPal, fragmentation becomes a real problem. Each creates its own checkout flow - usually a separate page with its own design and logic. That breaks UX and adds friction, when what users actually want is the Amazon experience: true one-click checkout. You input the card once, and you never have to think about it again. That kind of smooth flow creates more stickiness for the agent developer.
Fragmentation in agentic commerce won’t be solved by more merchant platforms. It requires a universal wallet. Payments belong at the agent level, not siloed per merchant or merchant platform. This breaks from the legacy design of e-commerce, where developers never touched card data, and merchants usually had some clever scheme with PSPs to make sure they only get tokens that were passed to PSPs (e.g. iframe based GUI that, after a user entered his payment credentials, sends the merchant some internal PSP token that represents payment data but doesn’t require any compliance to work with). But in the agentic model, touching it is unavoidable. So how can we keep it safe? the answer is agentic network tokens.
Network tokens change the risk equation. A PAN and CVV can be stolen and reused. A network token without its dynamic CVV (a.k.a DTVV) is worthless. The DTVV is generated on the fly for one transaction only, blocking replay and securing the flow under the card networks’ rails. The agentic network tokens framework allows users to scope the use in their credit card, so they can safely delegate it to the agent.
With network tokens, an agent can send a cart plus a one-time payment credential (network token + DTVV) to a headless merchant store, and complete a transaction in one-click, or one prompt. As they are already supported by merchants and PSPs, the infrastructure change needed here is actually very small.
What is still needed?
As more merchants adopt agents and shift their workflows, we’ll need to enable network-token–based headless flows in their stores. Each merchant should support two core interactions:
Calculate final price – The merchant receives shipping details from the agent wallet, calculates tax and shipping costs, and returns the total price. This could take place at the beginning or end of the commerce session.
Expose a payment endpoint – The merchant accepts a cart_id along with a network token and DTVV from the wallet, and finalizes the order. The merchant than passes the payment credentials to the PSP via its existing integration (there are a few variations for this implementation depending on how the compliance rules will evolve around network tokens. For more details of how to deal with it in your headless store, reach out founders@nekuda.ai).
These two flows are key to creating the new generation of agentic commerce. If you want to use our unified wallet, or have some questions on how to implement best-in-class headless stores with headless checkouts, please reach out at founders@nekuda.ai.