The world of online commerce is undergoing a significant transformation, with a new paradigm emerging: agentic commerce. Agentic commerce is an AI-powered shopping experience that can understand complex user requests, browse products, and even complete transactions on behalf of the customer.
This shift isn't just about convenience; it's about reimagining how people interact with the digital marketplace. By delegating tasks to intelligent agents, shoppers can move beyond keyword searches and endless scrolling to experiences that feel more like having a personal assistant. Imagine asking your shopping agent to “find me the best laptop under $1,000 for video editing, with at least 16GB of RAM, a lightweight design, and fast shipping,” and having it deliver curated options that meet those exact needs.
While still in its early stages, agentic commerce is already being explored by innovators who see its potential to reduce friction, increase personalization, and transform online retail into something more adaptive and intuitive. As this model matures, it promises to redefine customer expectations, reshape business strategies, and usher in a new era of shopping that blends automation, intelligence, and trust.
But how are brands embracing agentic commerce now? Let's take a look at two examples, including how VGS is innovating for the future of agentic commerce.
Learn how VGS unlocks agentic payments in commerce.
Our helpful agentic commerce hub has all the resources you need to successfully enable payments on agent platforms.
Learn More
Shopify's Innovative MCP UI
One of the most significant recent developments in this space is Shopify's launch of the Model Context Protocol (MCP) UI (https://github.com/idosal/mcp-ui). The MCP UI technology breaks the "text wall" of traditional AI interactions. Instead of a chatbot simply describing a product, MCP UI allows AI agents to render fully interactive user interface components, like product selectors, image galleries, and checkout flows, directly within the conversation. This move dramatically improves the user experience, making AI-assisted shopping feel more natural and intuitive. Shopify claims a 12.3% conversion for AI-assisted shopping vs 3.1% without agents. These figures highlight the immense potential of this new approach.
VGS Collect: Securing the Agentic Commerce Experience
As agentic commerce grows, so does the need for agents to collect and handle payment data while building trust and keeping the cardholders' data safe and compliant. VGS is deeply committed to enabling this new wave of online commerce, and the VGS Agent Toolkit provides bleeding-edge tooling that helps players in the agentic commerce space safely collect and transmit payment data.
Some important features of the toolkit include:
- PCI Compliance: Sensitive payment data never touches your servers or AI agent
- Agentic Interface: AI agents can trigger secure payment forms through MCP UI
- Modern UI: Clean, responsive interface built with React and Bootstrap
- Real-time Integration: Seamless communication between agent and payment form
- Security First: Built on VGS's battle-tested security infrastructure
A key highlight, included above, is VGS releasing our new Collect based MCP UI component that allows agents to safely collect card data from customers directly in an agentic conversational prompt without the customer needing to switch context.
But how does it work?
How VGS Collect MCP UI Works in the following steps:
- User Interaction: User types "collect" in the chat interface
- Agent Response: AI agent triggers the MCP UI tool to render a payment form
- Secure Collection: VGS Collect iFrame securely collects payment data
- Tokenization: Sensitive data is tokenized by VGS before reaching your systems
- Agent Continuation: Agent receives only tokenized data for further processing
Let's walk through how a prompt can trigger the MCP UI tool and render the VGS Collect from to securely handle capturing card data from a user, storing this within the VGS Vault as a card object, and then passing the identifier of the card object back to the prompt for subsequent use.
The first thing our sample app does is invoke the MCP server to submit a query. We pass the inputValue parameter to the MCP server, which would invoke our model and provide all of our tool calls. Looking at the code, you can see the server is invoked like this within mcp-ui-collect/frontend/src/App.tsx.
This in turn invokes the handler for the MCP server, in this case our name is “collect” and when it's invoked we invoke the collect method which will render an embedded resource containing our form definition
As you can see, there's a collect.html file which contains our form definition that will be rendered into the UI. This file is the same as any collect form and can contain a static or dynamically rendered form. In our example, we've followed the VGS Agentic Commerce demo and connected it to the VGS CMP platform which will create a card object.
Once the form is rendered into the UI, all events are managed by the Collect framework, and then once the card is created, we use cross-frame communication to send a “card-created” event from the Collect form back to the parent frame which has a “card-created” event handler to signal that a card is created. More events can be passed to allow further customization if desired.
Even sent from mcp-ui-collect/backend/script.js
Event received in mcp-ui-collect/frontend/src/App.tsx
As you can see, the MCP UI component makes both cross frame communication and event handling extremely simple, allowing us to render components into our prompt with minimal effort.
By using VGS, developers can collect credit card numbers before they ever touch their own systems, quickly and easily. This not only protects customer data but also allows agents to actively participate in commerce without the burden of needing to be PCI compliant. By enabling secure-by-design data collection, VGS is helping to build a trusted foundation for the next generation of AI-powered shopping.
As the latest release in the VGS Agent Toolkit, this complements a complete payment data suite of tools that allows agents to collect, store, and transmit card data securely and quickly to any merchant, PSP, or other payment provider.
Ready to unlock tokenization for agentic commerce?
Manage your agentic commerce businesses with secure data storage and network tokens to enable seamless buying experiences with merchants and AI agents, unlock payments, and grow revenue.
Learn More
