---
title: "MCP UI: Breaking the text wall with interactive components"
description: "Model Context Protocol (MCP) can let AI agents search catalogs, interpret reviews, build carts, and support purchases, but a text-only flow does not provide the visual and interactive details central to commerce. Shopify presents MCP UI as an extension that returns embedded UI resources for components such as product cards, with delivery through inline HTML, remote resources in sandboxed iframes, or Remote DOM. Its intent-based message system keeps components from directly modifying state: actions such as view_details, checkout, notify, and ui-size-change are surfaced for the agent to interpret, while render data lets hosts provide CSS for adaptive styling. The open-source, deliberately extensible protocol is demonstrated in a Shopify Storefront MCP UI Server prototype and is intended for commerce as well as data visualization, form builders, and media players."
---

# MCP UI: Breaking the text wall with interactive components

[Shopify](https://yomu.fyi/company/shopify) · 2023-10-18 · Aug 5, 2025

**Type:** Explainer

## Summary

Model Context Protocol (MCP) can let AI agents search catalogs, interpret reviews, build carts, and support purchases, but a text-only flow does not provide the visual and interactive details central to commerce. Shopify presents MCP UI as an extension that returns embedded UI resources for components such as product cards, with delivery through inline HTML, remote resources in sandboxed iframes, or Remote DOM. Its intent-based message system keeps components from directly modifying state: actions such as view\_details, checkout, notify, and ui-size-change are surfaced for the agent to interpret, while render data lets hosts provide CSS for adaptive styling. The open-source, deliberately extensible protocol is demonstrated in a Shopify Storefront MCP UI Server prototype and is intended for commerce as well as data visualization, form builders, and media players.

## Context

MCP’s default text-only interaction creates a ceiling for commerce experiences, where images, selectable variants, dependent options, bundle pricing, subscriptions, inventory constraints, and localized availability are fundamental to evaluating and purchasing products.

## Approach / What changed

MCP UI extends MCP with embedded UI resources delivered as inline HTML, remote resources in sandboxed iframes, or Remote DOM. Components communicate through agent-mediated intents rather than directly changing state, and render data allows hosts to pass CSS for adaptive styling.

## Takeaways

- MCP UI supports three delivery methods: inline HTML in a sandboxed iframe, remote resources loaded in a sandboxed iframe, and Remote DOM for direct client-side rendering.
- The intent system lets components emit events such as view\_details, checkout, notify, and ui-size-change while the agent interprets and mediates them.
- The MCP UI specification and implementation are open source and deliberately extensible beyond commerce, including data visualization, form builders, and media players.

**Tags:** [Architecture](https://yomu.fyi/topic/architecture), [Developer Experience](https://yomu.fyi/topic/developer-experience), [Open Source](https://yomu.fyi/topic/open-source)

- Source: [Shopify](https://shopify.engineering/mcp-ui-breaking-the-text-wall)
- Source URL: https://shopify.engineering/mcp-ui-breaking-the-text-wall
- Ingested by Yomu: 2026-08-30T13:19:16.588Z

[Read original post](https://shopify.engineering/mcp-ui-breaking-the-text-wall)