AI アシスタントとのやり取りが、ついにテキストの壁を超えました。Shopify が開発した**MCP UI（Model Context Protocol UI）**は、AI エージェントが完全にインタラクティブな UI コンポーネントを返すことを可能にする画期的なプロトコルです。本記事では、MCP UI の仕組みと可能性について、実装例を交えながら詳しく解説します。
MCP UIとは何か
MCP UI は、**Model Context Protocol（MCP）**を拡張して、AI エージェントがリッチでインタラクティブな UI コンポーネントを提供できるようにするオープンソースのプロトコルです。従来のテキストベースのやり取りから脱却し、ビジュアルで直感的なインターフェースを実現します。
MCPの基本概念
Model Context Protocol（MCP）は、Anthropicが開発したオープンスタンダードで、AI アシスタントをコンテンツリポジトリ、ビジネスツール、開発環境などのデータソースに接続するためのプロトコルです。これにより、AI モデルはより関連性の高い、正確なレスポンスを生成できるようになります。
MCP UI は、この MCP の埋め込みリソース仕様の上に構築され、インタラクティブな UI リソースを MCP 経由で渡し、任意のホストアプリケーション内に埋め込むことを可能にします。
なぜMCP UIが必要なのか
従来の課題
EC サイトを例に考えてみましょう。ユーザーが「赤いスニーカーを探している」と AI アシスタントに伝えた場合、従来のテキストベースのアプローチでは：
AI: 以下の赤いスニーカーが見つかりました：
1. Nike Air Max - ¥15,000
2. Adidas Ultraboost - ¥18,000
3. New Balance 574 - ¥12,000
どれにしますか？このような表示では、商品画像、サイズ選択、在庫状況、レビューなど、購買決定に必要な多くの情報が欠けています。
MCP UIによる解決
MCP UI を使用すると、AI エージェントは以下のような完全にインタラクティブなコンポーネントを返すことができます：
- 商品画像ギャラリー
- サイズ・カラー選択 UI
- リアルタイムの在庫表示
- カート追加ボタン
- レビュー表示
これらすべてが、AI との会話の中で自然に提供されます。
技術的な仕組み
3つの配信方法
MCP UI は、UI コンポーネントを配信するために 3 つの方法をサポートしています：
1. インラインHTML
// サンドボックス化されたiframe内で実行
const uiResource = {
type: 'inline',
html: `
<div class="product-card">
<img src="product.jpg" alt="Product">
<button onclick="sendIntent('add_to_cart')">
カートに追加
</button>
</div>
`,
};2. リモートリソース
// 外部URLからコンポーネントをロード
const uiResource = {
type: 'remote',
url: 'https://example.com/components/product-selector',
};3. リモートDOM
// クライアントサイドで直接レンダリング
const uiResource = {
type: 'remote-dom',
component: 'ProductSelector',
props: {
productId: '12345',
variant: 'red',
},
};インテントベースのメッセージングシステム
MCP UI の核心は、インテントベースのメッセージングシステムです。コンポーネントは直接状態を変更するのではなく、「インテント（意図）」をバブルアップし、AI エージェントがそれを解釈します。
// コンポーネント側
function handleAddToCart(productId) {
// 直接カートに追加するのではなく、インテントを送信
window.parent.postMessage(
{
type: 'intent',
action: 'add_to_cart',
data: { productId, quantity: 1 },
},
'*'
);
}
// エージェント側
window.addEventListener('message', (event) => {
if (event.data.type === 'intent') {
switch (event.data.action) {
case 'add_to_cart':
// エージェントがインテントを解釈して実行
processAddToCart(event.data.data);
break;
case 'view_details':
showProductDetails(event.data.data);
break;
}
}
});主なインテントイベント
view_details: 詳細表示のリクエストcheckout: チェックアウト処理の開始notify: 通知の送信ui-size-change: UI サイズの変更通知
実装方法とSDK
TypeScript/JavaScriptクライアント
npm install @mcp-ui/clientimport { UIResourceRenderer } from '@mcp-ui/client';
function ChatInterface() {
const handleIntent = (intent) => {
// インテントの処理
console.log('Received intent:', intent);
};
return <UIResourceRenderer resource={uiResource} onIntent={handleIntent} sandbox={true} />;
}Rubyサーバー
# Gemfile
gem 'mcp_ui_server'require 'mcp_ui_server'
class ProductUIGenerator
include McpUiServer::Utils
def generate_product_card(product)
create_ui_resource(
type: 'inline',
html: render_product_html(product),
styles: load_styles('product-card.css')
)
end
endアダプティブスタイリング
MCP UI は、レンダーデータシステムを通じて CSS スタイリングをサポートし、コンポーネントがホスト環境に一致するようにスタイルを調整できます。
const uiResource = {
type: 'inline',
html: '<div class="card">...</div>',
renderData: {
theme: 'dark',
primaryColor: '#007bff',
fontFamily: 'Inter, sans-serif',
},
};ユースケースと活用例
Eコマース
- 複雑な商品バリアント処理: サイズ、色、素材などの組み合わせ
- バンドル価格の管理: 複数商品の組み合わせ価格
- サブスクリプションオプション: 定期購入の設定 UI
- リアルタイム在庫追跡: 在庫状況の即時表示
- ローカライズ価格: 地域別の価格表示
その他の活用分野
データビジュアライゼーション
// インタラクティブなチャートコンポーネント
const chartResource = {
type: 'inline',
html: `
<canvas id="chart"></canvas>
<script>
// Chart.jsなどを使用したグラフ描画
renderInteractiveChart(data);
</script>
`,
};フォームビルダー
// 動的なフォーム生成
const formResource = {
type: 'remote',
url: '/forms/dynamic-builder',
config: {
fields: ['name', 'email', 'message'],
validation: true,
},
};メディアプレーヤー
// カスタムメディアコントロール
const playerResource = {
type: 'inline',
html: `
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
<div class="custom-controls">...</div>
`,
};セキュリティと制御
サンドボックス実行
すべての UI コンポーネントは、サンドボックス化されたiframe内で実行されます。これにより：
- 悪意のあるコードからホストアプリケーションを保護
- コンポーネント間の隔離を確保
- セキュアな双方向通信を実現
<iframe
sandbox="allow-scripts allow-same-origin"
src="about:blank"
srcdoc="<!-- UI content -->"
></iframe>権限管理
const permissions = {
allowScripts: true,
allowForms: true,
allowPopups: false,
allowTopNavigation: false,
};
<UIResourceRenderer resource={uiResource} permissions={permissions} />;今後の展望
業界での採用状況
現在、多くの企業や開発ツールが MCP と MCP UI の採用を進めています：
- Shopify: MCP UI の開発元として、EC プラットフォームでの活用
- 開発ツール: Zed、Replit、Codeium、Sourcegraph などが統合を進行中
- Figma: Dev Mode MCP server を通じて、デザインツールとの連携
- IDE統合: VS Code、Cursor、Windsurf、Claude Code での活用
コミュニティの発展
MCP UI は、UI Community Working Groupを中心に、活発な開発とディスカッションが行われています。実験的なプレイグラウンドとして、新しいアイデアの検証と実装が継続的に行われています。
将来の可能性
// 将来的な拡張例
const futureUIResource = {
type: 'ar-component', // AR/VRコンポーネント
model: '3d-product.glb',
interactions: {
rotate: true,
zoom: true,
annotations: true,
},
};まとめ
MCP UI は、AI エージェントとユーザーのインタラクションを根本的に変革する技術です。主なポイントをまとめると：
- テキストの壁を超越: リッチでインタラクティブな UI コンポーネントの提供
- セキュアな実装: サンドボックス化による安全な実行環境
- 柔軟な配信方法: インライン、リモート、リモート DOM の 3 つの選択肢
- インテントベース: 直接的な状態変更ではなく、意図の伝達による制御
- オープンソース: コミュニティ主導の継続的な改善
AI エージェントの未来は、より賢くなるだけでなく、よりインタラクティブになります。MCP UI は、その未来を実現するための重要な基盤技術として、今後さらなる発展が期待されています。
開発者として、この新しいパラダイムを理解し、活用することで、ユーザーにより豊かな体験を提供できるようになるでしょう。
参考文献
📖 公式ドキュメント
- MCP UI: Breaking the text wall - Shopify Engineering
- Model Context Protocol - Anthropic
- MCP UI Introduction - mcpui.dev
- Model Context Protocol Documentation
