blog

MCP UI: Breaking the text wall with interactive components

MCP UI extends the Model Context Protocol to enable AI agents to return fully interactive UI components. It solves the critical challenge that commerce experiences require visual and interactive elements like product selectors, image galleries, and cart flows. This open-source protocol allows agents to embed commerce components while maintaining control through an intent-based messaging system, delivering shopping experiences that go far beyond traditional text-only AI interactions.

Published on

Model Context Protocol (MCP) gives AI agents superpowers. A shopping assistant can search product catalog, digest reviews, build a cart, and help buyers complete the purchase. But the default text-only flow sets a ceiling on the user experience. For commerce, visual context isn't just helpful—it's essential. A product isn't just a SKU and price. It's images showing different angles, color swatches you can click, size selectors that update availability, bundle configurations that affect pricing, and more. These aren't nice-to-haves; they're fundamental to how people shop. To deliver a great shopping experience, agents need to augment their conversation flow with visual and interactive components.

Tackling the UI challenge with MCP UI

"Why not have agents generate their own UI?" It's a reasonable question with an unreasonable answer: commerce UI is deceptively complex. Take a product selector. The basic version seems simple—show an image, price, and "Add to Cart" button. But real commerce quickly introduces complications:

  • Variants with dependent options (selecting "Large" changes available colors)
  • Bundle builders with complex pricing rules
  • Subscription options with frequency selectors
  • Inventory constraints that update in real-time
  • Localized pricing and availability

Commerce is complex, and the UI components need to accommodate it to ensure that the buyer receives the full and accurate set of capabilities when evaluating which product to purchase. This is a challenge we're well familiar with at Shopify, which made us think, what if MCP could return not just data, but fully interactive UI components? 

That was our motivation to use the emerging MCP UI. This protocol extends MCP by returning a set of embedded UI resources, and it has support for three delivery methods:

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

Here's what this looks like in practice for a remote resource UI:

The agent receives the JSON response and a set of embedded ui:// resources that can be used to render fully functional product cards for the provided results. In the example above, the MCP server embeds a remote resource URI, which can be loaded within a sandboxed iframe to deliver an interactive product card that handles variant selection, bundles, subscriptions, image galleries, and add-to-cart flows. It's a batteries included experience.

Check out the Shopify Storefront MCP UI Server prototype for an interactive preview of search, product, cart and checkout components in action.

The Intent System: keeping agents in control

Interactive components create a synchronization challenge for the agent. When a user clicks "Add to Cart" inside an embedded component, what happens? MCP UI solves this with an intent-based message system. Components don't directly modify state—they bubble up intents that the agent interprets:

This architecture preserves agent control while enabling rich and interactive user experiences. Other events follow the same pattern, allowing provided components to expose a rich set of intent events that the agent can mediate and help the buyer through 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

Adaptive styling: delivering native UI

Embedded components need to match their host environment. MCP UI supports CSS styling with the render data system:

Components can adapt to their environment while maintaining functional integrity. The agent can pass in CSS to customize the presentation of the component to meet their app's brand guidelines.

Building the future of interactive agents

We believe MCP UI is a necessary and powerful power-up for the MCP protocol. By establishing a well-defined protocol and conventions, we can help agents and MCP providers deliver richer and more powerful experiences by working together. Our agent MCP is an early adopter of MCP UI, and we are eager to see what you build with it.

MCP UI specification and implementation are open source. The protocol is deliberately extensible. Built on top of the MCP embedded resources spec, the MCP UI protocol specifies the way for interactive UI resources to be passed over MCP and be embedded inside any host. While we've focused on commerce, the same patterns enable rich interactions for data visualization, form builders, media players, or any domain where visual context enhances understanding.

The future of AI agents isn't just smarter—it's more interactive. We’re excited about the possibilities and future of MCP UI at Shopify. Take a look at our demo and docs to learn more, and let us know what you think!

About the Author

Liad Yosef is a Senior Staff Developer at Shopify.

X: @liadyosef


Point of Contact

Samuel Path, Senior Engineer at Shopify

X: @smlpth

Bret Little, Staff Engineer at Shopify

X: @little_bret

LY
by
Published on
Share article
Work from anywhere
with Shopify

See our open roles and learn more about our digital by design culture.

See open roles