Why text-only agents fall short for commerce

Model Context Protocol (MCP) gives AI agents tools to search catalogs, digest reviews, build carts, and shepherd buyers to checkout. But the default text-only flow caps what an agent can deliver. In commerce, visual context is not decoration—it's the medium of decision. A product is a gallery of angles, clickable color swatches, size selectors that shift availability, bundle builders whose pricing reacts, subscription frequency pickers. Asking a buyer to navigate that through prose is asking them to shop with one hand tied.

MCP UI: components, not just content

Why not let agents generate their own UI? The honest answer is that commerce UI is deceptively hard. A basic product selector—image, price, button—looks trivial until you account for dependent variant options ("Large" changes which colors exist), bundle pricing rules, subscription frequency selectors, real-time inventory constraints, and localized pricing and availability.

Shopify's answer is MCP UI, an open-source extension to MCP that lets agents return embedded UI resources alongside data. The protocol supports three delivery methods:

  1. Inline HTML, embedded via srcDoc in a sandboxed iframe
  2. Remote resources, loaded in a sandboxed iframe
  3. Remote DOM, for direct client-side rendering

When an agent queries an MCP server, it receives the JSON response plus a set of ui:// resources. Those resources render as fully functional product cards—handling variant selection, bundles, subscriptions, image galleries, and add-to-cart—without the agent reinventing UI state management.

Intent-based events keep the agent in charge

Embedded components create a synchronization problem: when a user clicks "Add to Cart" inside a component, who owns that action? MCP UI routes events through an intent-based message system. Components don't mutate state directly—they emit intents the agent interprets and mediates.

The same pattern covers a range of actions, letting components expose rich events while the agent stays in control of the purchase journey:

  • view_details — user clicked for more information
  • checkout — user ready to complete purchase
  • notify — component performed an action (e.g., cart updated)
  • ui-size-change — component needs size adjustment

Styling adapts to the host environment

Embedded components must match their host app, not clash with it. MCP UI's render data system supports CSS styling so the agent can pass in styles by the host's brand guidelines. Components adapt to their environment without sacrificing functional integrity.

An extensible protocol beyond shopping

Shopify's agent MCP is an early adopter, and the MCP UI spec and implementation are open source. The protocol builds on the MCP embedded resources spec and is deliberately extensible—commerce is the first use case, but the same mechanics support data visualization, form builders, media players, or any domain where visual context clarifies meaning.

The direction for AI agents is not just smarter reasoning—it's richer interaction. MCP UI is a step toward making that interaction standard rather than bespoke.