Skip to content

Instantly share code, notes, and snippets.

@vivekhaldar

vivekhaldar/protocol-wars-presentation.html

Created January 12, 2026 21:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save vivekhaldar/d49b61db1989158564068318d6b7ec48 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vivekhaldar/d49b61db1989158564068318d6b7ec48 to your computer and use it in GitHub Desktop.
Download ZIP
Protocol Wars: Agentic Commerce - UCP vs ACP Presentation
Raw
protocol-wars-presentation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Protocol Wars: Agentic Commerce</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: #0a0a0b;
--bg-secondary: #141416;
--bg-tertiary: #1a1a1d;
--text-primary: #fafafa;
--text-secondary: #a1a1a6;
--text-muted: #6b6b70;
/* Protocol Colors */
--ucp-primary: #00d4aa;
--ucp-secondary: #0ea5e9;
--ucp-gradient: linear-gradient(135deg, #00d4aa 0%, #0ea5e9 100%);
--acp-primary: #a855f7;
--acp-secondary: #6366f1;
--acp-gradient: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
--amazon-primary: #ff9900;
--amazon-secondary: #ff6600;
--microsoft-primary: #00bcf2;
--accent-red: #ef4444;
--accent-yellow: #fbbf24;
--accent-green: #22c55e;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
overflow: hidden;
background: var(--bg-primary);
color: var(--text-primary);
font-family: 'IBM Plex Sans', -apple-system, sans-serif;
}
/* Slide Container */
.slides-container {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 60px 80px;
display: none;
flex-direction: column;
justify-content: center;
background: var(--bg-primary);
overflow-y: auto;
}
.slide.active {
display: flex;
}
/* Typography */
.syne {
font-family: 'Syne', sans-serif;
}
.mono {
font-family: 'Space Mono', monospace;
}
h1 {
font-family: 'Syne', sans-serif;
font-weight: 800;
font-size: clamp(3rem, 8vw, 7rem);
line-height: 0.95;
letter-spacing: -0.03em;
}
h2 {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: clamp(2rem, 5vw, 4rem);
line-height: 1.1;
letter-spacing: -0.02em;
}
h3 {
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
line-height: 1.2;
}
p {
font-size: clamp(1rem, 1.5vw, 1.25rem);
line-height: 1.6;
color: var(--text-secondary);
}
.label {
font-family: 'Space Mono', monospace;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-muted);
}
/* Gradient Text */
.gradient-ucp {
background: var(--ucp-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gradient-acp {
background: var(--acp-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.text-ucp { color: var(--ucp-primary); }
.text-acp { color: var(--acp-primary); }
.text-amazon { color: var(--amazon-primary); }
.text-microsoft { color: var(--microsoft-primary); }
/* Progress Bar */
.progress-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--bg-tertiary);
z-index: 1000;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--ucp-primary), var(--acp-primary));
transition: width 0.4s ease;
}
/* Slide Counter */
.slide-counter {
position: fixed;
bottom: 24px;
right: 40px;
font-family: 'Space Mono', monospace;
font-size: 0.875rem;
color: var(--text-muted);
z-index: 1000;
}
.slide-counter .current {
color: var(--text-primary);
font-weight: 700;
}
/* Navigation Hint */
.nav-hint {
position: fixed;
bottom: 24px;
left: 40px;
font-family: 'Space Mono', monospace;
font-size: 0.75rem;
color: var(--text-muted);
z-index: 1000;
display: flex;
gap: 16px;
align-items: center;
}
.nav-hint kbd {
background: var(--bg-tertiary);
padding: 4px 8px;
border-radius: 4px;
border: 1px solid rgba(255,255,255,0.1);
}
/* Title Slide */
.slide-title {
position: relative;
overflow: hidden;
}
.slide-title::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 80%;
height: 200%;
background: radial-gradient(ellipse at center, rgba(0, 212, 170, 0.08) 0%, transparent 60%);
pointer-events: none;
}
.slide-title::after {
content: '';
position: absolute;
bottom: -50%;
left: -20%;
width: 80%;
height: 200%;
background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.08) 0%, transparent 60%);
pointer-events: none;
}
.title-content {
position: relative;
z-index: 1;
max-width: 900px;
}
.title-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--bg-tertiary);
border: 1px solid rgba(255,255,255,0.1);
padding: 8px 16px;
border-radius: 100px;
margin-bottom: 32px;
}
.title-badge .dot {
width: 8px;
height: 8px;
background: var(--accent-red);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.title-meta {
margin-top: 48px;
display: flex;
gap: 48px;
}
.title-meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Versus Layout */
.versus-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 40px;
align-items: center;
height: 100%;
}
.protocol-card {
background: var(--bg-secondary);
border-radius: 16px;
padding: 40px;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid rgba(255,255,255,0.05);
position: relative;
overflow: hidden;
}
.protocol-card.ucp {
border-top: 3px solid var(--ucp-primary);
}
.protocol-card.ucp::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(180deg, rgba(0, 212, 170, 0.1) 0%, transparent 100%);
pointer-events: none;
}
.protocol-card.acp {
border-top: 3px solid var(--acp-primary);
}
.protocol-card.acp::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(180deg, rgba(168, 85, 247, 0.1) 0%, transparent 100%);
pointer-events: none;
}
.protocol-header {
margin-bottom: 24px;
}
.protocol-name {
font-family: 'Syne', sans-serif;
font-weight: 800;
font-size: 2.5rem;
margin-bottom: 8px;
}
.protocol-subtitle {
color: var(--text-secondary);
font-size: 1rem;
}
.protocol-features {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
margin-top: auto;
}
.protocol-features li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 0.95rem;
color: var(--text-secondary);
}
.protocol-features .icon {
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
flex-shrink: 0;
margin-top: 2px;
}
.protocol-features .icon.check {
background: rgba(34, 197, 94, 0.2);
color: var(--accent-green);
}
.versus-divider {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.versus-text {
font-family: 'Syne', sans-serif;
font-weight: 800;
font-size: 3rem;
background: linear-gradient(180deg, var(--text-primary) 0%, var(--text-muted) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.versus-line {
width: 2px;
height: 100px;
background: linear-gradient(180deg, transparent, var(--text-muted), transparent);
}
/* Comparison Table */
.comparison-table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
}
.comparison-table th {
font-family: 'Space Mono', monospace;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
text-align: left;
padding: 16px 20px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.comparison-table th:not(:first-child) {
text-align: center;
}
.comparison-table td {
padding: 16px 20px;
border-bottom: 1px solid rgba(255,255,255,0.05);
color: var(--text-secondary);
}
.comparison-table td:not(:first-child) {
text-align: center;
}
.comparison-table tr:hover td {
background: rgba(255,255,255,0.02);
}
.comparison-table .feature-name {
color: var(--text-primary);
font-weight: 500;
}
.comparison-table .ucp-col {
color: var(--ucp-primary);
}
.comparison-table .acp-col {
color: var(--acp-primary);
}
/* Stats Grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
}
.stat-card {
background: var(--bg-secondary);
border-radius: 12px;
padding: 32px;
text-align: center;
border: 1px solid rgba(255,255,255,0.05);
}
.stat-value {
font-family: 'Syne', sans-serif;
font-weight: 800;
font-size: 3rem;
line-height: 1;
margin-bottom: 8px;
}
.stat-label {
color: var(--text-secondary);
font-size: 0.9rem;
}
/* Identity Diagram */
.identity-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
margin-top: 40px;
}
.identity-model {
background: var(--bg-secondary);
border-radius: 16px;
padding: 32px;
border: 1px solid rgba(255,255,255,0.05);
}
.identity-model h3 {
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 12px;
}
.identity-flow {
display: flex;
flex-direction: column;
gap: 16px;
}
.flow-step {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
background: var(--bg-tertiary);
border-radius: 8px;
}
.flow-step .step-icon {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.flow-step .step-content {
flex: 1;
}
.flow-step .step-title {
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 2px;
}
.flow-step .step-desc {
font-size: 0.8rem;
color: var(--text-muted);
}
.flow-arrow {
text-align: center;
color: var(--text-muted);
font-size: 1.25rem;
}
/* Adoption Grid */
.adoption-section {
margin-top: 32px;
}
.adoption-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
}
.adoption-badge {
font-family: 'Space Mono', monospace;
font-size: 0.7rem;
padding: 6px 12px;
border-radius: 100px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.badge-live {
background: rgba(34, 197, 94, 0.2);
color: var(--accent-green);
}
.badge-announced {
background: rgba(251, 191, 36, 0.2);
color: var(--accent-yellow);
}
.merchants-grid {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.merchant-tag {
background: var(--bg-tertiary);
padding: 10px 16px;
border-radius: 8px;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(255,255,255,0.05);
}
.merchant-tag .status {
width: 8px;
height: 8px;
border-radius: 50%;
}
.merchant-tag .status.live {
background: var(--accent-green);
}
.merchant-tag .status.soon {
background: var(--accent-yellow);
}
/* Amazon Section */
.amazon-card {
background: var(--bg-secondary);
border-radius: 16px;
padding: 48px;
border: 1px solid rgba(255,255,255,0.05);
border-left: 4px solid var(--amazon-primary);
position: relative;
overflow: hidden;
}
.amazon-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
background: linear-gradient(90deg, rgba(255, 153, 0, 0.1) 0%, transparent 100%);
pointer-events: none;
}
.amazon-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 32px;
}
.amazon-stat {
text-align: center;
}
.amazon-stat .value {
font-family: 'Syne', sans-serif;
font-weight: 800;
font-size: 2rem;
color: var(--amazon-primary);
}
.amazon-stat .label {
font-size: 0.8rem;
color: var(--text-muted);
margin-top: 4px;
}
.amazon-products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 32px;
}
.amazon-product {
background: var(--bg-tertiary);
padding: 20px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.05);
}
.amazon-product h4 {
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 8px;
color: var(--amazon-primary);
}
.amazon-product p {
font-size: 0.85rem;
line-height: 1.5;
}
/* Winners Section */
.winners-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 40px;
}
.winner-card {
background: var(--bg-secondary);
border-radius: 16px;
padding: 32px;
border: 1px solid rgba(255,255,255,0.05);
}
.winner-card h4 {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 12px;
color: var(--text-primary);
}
.winner-card p {
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: 16px;
}
.winner-protocol {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Space Mono', monospace;
font-size: 0.8rem;
padding: 6px 12px;
border-radius: 6px;
}
.winner-protocol.ucp {
background: rgba(0, 212, 170, 0.15);
color: var(--ucp-primary);
}
.winner-protocol.acp {
background: rgba(168, 85, 247, 0.15);
color: var(--acp-primary);
}
.winner-protocol.amazon {
background: rgba(255, 153, 0, 0.15);
color: var(--amazon-primary);
}
/* Links/Sources */
.sources-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 32px;
}
.source-link {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: var(--bg-secondary);
border-radius: 8px;
text-decoration: none;
color: var(--text-secondary);
transition: all 0.2s ease;
border: 1px solid rgba(255,255,255,0.05);
}
.source-link:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
transform: translateX(4px);
}
.source-link .icon {
font-size: 1.25rem;
}
.source-link .url {
font-family: 'Space Mono', monospace;
font-size: 0.75rem;
color: var(--text-muted);
}
/* Layout Helpers */
.split-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.section-header {
margin-bottom: 32px;
}
.section-header .label {
margin-bottom: 12px;
}
/* Blockquote */
.insight-block {
background: var(--bg-secondary);
border-left: 3px solid var(--acp-primary);
padding: 24px 32px;
border-radius: 0 12px 12px 0;
margin-top: 32px;
}
.insight-block p {
font-style: italic;
font-size: 1.1rem;
color: var(--text-primary);
}
/* Landscape Grid (4-way) */
.landscape-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 40px;
}
.landscape-card {
background: var(--bg-secondary);
border-radius: 12px;
padding: 28px;
border: 1px solid rgba(255,255,255,0.05);
position: relative;
overflow: hidden;
}
.landscape-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
}
.landscape-card.google::before { background: var(--ucp-gradient); }
.landscape-card.openai::before { background: var(--acp-gradient); }
.landscape-card.microsoft::before { background: var(--microsoft-primary); }
.landscape-card.amazon::before { background: var(--amazon-primary); }
.landscape-card h4 {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 1.25rem;
margin-bottom: 4px;
}
.landscape-card .protocol-label {
font-family: 'Space Mono', monospace;
font-size: 0.7rem;
color: var(--text-muted);
margin-bottom: 12px;
}
.landscape-card .partners {
font-size: 0.85rem;
color: var(--text-secondary);
}
/* Animation Classes */
.fade-in {
animation: fadeIn 0.6s ease forwards;
}
.slide-up {
animation: slideUp 0.6s ease forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
/* Responsive */
@media (max-width: 1200px) {
.slide.active {
padding: 40px;
}
.versus-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.versus-divider {
flex-direction: row;
}
.versus-line {
width: 100px;
height: 2px;
}
}
</style>
</head>
<body>
<div class="slides-container">
<!-- Slide 1: Title -->
<section class="slide slide-title active" data-slide="1">
<div class="title-content">
<div class="title-badge">
<span class="dot"></span>
<span class="label" style="color: var(--text-secondary);">January 2026</span>
</div>
<h1>
The <span class="gradient-ucp">Protocol</span><br>
<span class="gradient-acp">Wars</span>
</h1>
<p style="font-size: 1.5rem; margin-top: 24px; max-width: 600px; color: var(--text-primary);">
How Google, OpenAI, Microsoft, and Amazon are battling to own the future of AI-powered commerce.
</p>
<div class="title-meta">
<div class="title-meta-item">
<span class="label">Market Size by 2030</span>
<span class="syne" style="font-size: 1.5rem; font-weight: 700;">$3-5 Trillion</span>
</div>
<div class="title-meta-item">
<span class="label">Competing Protocols</span>
<span class="syne" style="font-size: 1.5rem; font-weight: 700;">UCP · ACP · Proprietary</span>
</div>
</div>
</div>
</section>
<!-- Slide 2: What is UCP -->
<section class="slide" data-slide="2">
<div class="split-layout">
<div>
<p class="label">Google's Play</p>
<h2 style="margin-bottom: 24px;">Universal Commerce<br><span class="gradient-ucp">Protocol</span></h2>
<p style="margin-bottom: 24px;">
Announced at NRF 2026. An open standard defining the entire commerce journey — discovery, checkout, fulfillment, and post-purchase.
</p>
<p style="margin-bottom: 32px;">
Co-developed with Shopify, Walmart, Target, Etsy, and Wayfair. Endorsed by 20+ global partners including Visa, Mastercard, and Stripe.
</p>
<div style="display: flex; gap: 16px; flex-wrap: wrap;">
<a href="https://ucp.dev" target="_blank" class="source-link" style="flex: 1; min-width: 200px;">
<span class="icon">📄</span>
<div>
<div>Official Spec</div>
<div class="url">ucp.dev</div>
</div>
</a>
<a href="https://github.com/Universal-Commerce-Protocol/ucp" target="_blank" class="source-link" style="flex: 1; min-width: 200px;">
<span class="icon">⌨️</span>
<div>
<div>GitHub Repo</div>
<div class="url">github.com/Universal-Commerce-Protocol</div>
</div>
</a>
</div>
</div>
<div>
<div class="protocol-card ucp" style="height: auto;">
<div class="protocol-header">
<p class="label">Key Capabilities</p>
</div>
<ul class="protocol-features">
<li>
<span class="icon check">✓</span>
<div><strong>Checkout</strong> — Cart, tax, payment flows</div>
</li>
<li>
<span class="icon check">✓</span>
<div><strong>Fulfillment</strong> — Shipping options & tracking</div>
</li>
<li>
<span class="icon check">✓</span>
<div><strong>Discounts</strong> — Coupons & promotions</div>
</li>
<li>
<span class="icon check">✓</span>
<div><strong>Order Lifecycle</strong> — Shipped, delivered, returns</div>
</li>
<li>
<span class="icon check">✓</span>
<div><strong>Identity Linking</strong> — OAuth 2.0 account access</div>
</li>
</ul>
<div style="margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1);">
<p class="label" style="margin-bottom: 8px;">Transports</p>
<p style="font-size: 0.9rem;">REST · MCP · A2A (Agent2Agent)</p>
</div>
</div>
</div>
</div>
</section>
<!-- Slide 3: What is ACP -->
<section class="slide" data-slide="3">
<div class="split-layout">
<div>
<p class="label">OpenAI + Stripe</p>
<h2 style="margin-bottom: 24px;">Agentic Commerce<br><span class="gradient-acp">Protocol</span></h2>
<p style="margin-bottom: 24px;">
Launched September 2025. Powers "Instant Checkout" in ChatGPT. Focused specifically on checkout and secure payment delegation.
</p>
<p style="margin-bottom: 32px;">
First-mover advantage with Etsy live in production. Over 1M Shopify merchants coming soon.
</p>
<div style="display: flex; gap: 16px; flex-wrap: wrap;">
<a href="https://www.agenticcommerce.dev/" target="_blank" class="source-link" style="flex: 1; min-width: 200px;">
<span class="icon">📄</span>
<div>
<div>Official Spec</div>
<div class="url">agenticcommerce.dev</div>
</div>
</a>
<a href="https://openai.com/index/buy-it-in-chatgpt/" target="_blank" class="source-link" style="flex: 1; min-width: 200px;">
<span class="icon">🛒</span>
<div>
<div>OpenAI Announcement</div>
<div class="url">openai.com</div>
</div>
</a>
</div>
</div>
<div>
<div class="protocol-card acp" style="height: auto;">
<div class="protocol-header">
<p class="label">Key Features</p>
</div>
<ul class="protocol-features">
<li>
<span class="icon check">✓</span>
<div><strong>Checkout</strong> — Cart & payment processing</div>
</li>
<li>
<span class="icon check">✓</span>
<div><strong>Delegated Payment</strong> — One-time secure tokens</div>
</li>
<li>
<span class="icon check">✓</span>
<div><strong>Product Feeds</strong> — TSV/CSV/JSON ingestion</div>
</li>
<li>
<span class="icon check">✓</span>
<div><strong>One-Line Integration</strong> — For Stripe merchants</div>
</li>
</ul>
<div style="margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1);">
<p class="label" style="margin-bottom: 8px;">Primary PSP</p>
<p style="font-size: 0.9rem;">Stripe (others can implement spec)</p>
</div>
<div style="margin-top: 16px;">
<p class="label" style="margin-bottom: 8px;">Platform</p>
<p style="font-size: 0.9rem;">ChatGPT Plus/Pro/Free (US)</p>
</div>
</div>
</div>
</div>
</section>
<!-- Slide 4: Head to Head Comparison -->
<section class="slide" data-slide="4">
<div class="section-header">
<p class="label">Technical Comparison</p>
<h2><span class="gradient-ucp">UCP</span> vs <span class="gradient-acp">ACP</span></h2>
</div>
<table class="comparison-table">
<thead>
<tr>
<th>Feature</th>
<th style="color: var(--ucp-primary);">UCP (Google)</th>
<th style="color: var(--acp-primary);">ACP (OpenAI/Stripe)</th>
</tr>
</thead>
<tbody>
<tr>
<td class="feature-name">Scope</td>
<td class="ucp-col">Full lifecycle (discovery → post-purchase)</td>
<td class="acp-col">Checkout-focused</td>
</tr>
<tr>
<td class="feature-name">Transports</td>
<td class="ucp-col">REST, MCP, A2A</td>
<td class="acp-col">REST, MCP</td>
</tr>
<tr>
<td class="feature-name">Discovery</td>
<td class="ucp-col">Dynamic capability profiles</td>
<td class="acp-col">Product feed ingestion</td>
</tr>
<tr>
<td class="feature-name">Payment Security</td>
<td class="ucp-col">AP2 Mandates (PSP-agnostic)</td>
<td class="acp-col">Stripe Shared Payment Token</td>
</tr>
<tr>
<td class="feature-name">Identity/Auth</td>
<td class="ucp-col">OAuth 2.0 (first-class)</td>
<td class="acp-col">Not in spec (guest checkout)</td>
</tr>
<tr>
<td class="feature-name">Extensions</td>
<td class="ucp-col">First-class concept</td>
<td class="acp-col">Not formalized</td>
</tr>
<tr>
<td class="feature-name">PSP Lock-in</td>
<td class="ucp-col">None</td>
<td class="acp-col">Stripe (de facto)</td>
</tr>
<tr>
<td class="feature-name">Production Status</td>
<td>Announced Jan 11, 2026</td>
<td style="color: var(--accent-green);">Live (Etsy in ChatGPT)</td>
</tr>
</tbody>
</table>
</section>
<!-- Slide 5: The Landscape -->
<section class="slide" data-slide="5">
<div class="section-header">
<p class="label">The Standards War</p>
<h2>Four Giants, Three Strategies</h2>
</div>
<div class="landscape-grid">
<div class="landscape-card google">
<h4 class="text-ucp">Google</h4>
<p class="protocol-label">Universal Commerce Protocol (UCP)</p>
<p class="partners"><strong>Partners:</strong> Shopify, Walmart, Target, Etsy, Visa, Mastercard, Adyen</p>
<p style="margin-top: 12px; font-size: 0.85rem; color: var(--text-muted);">Open standard, PSP-agnostic, full commerce lifecycle</p>
</div>
<div class="landscape-card openai">
<h4 class="text-acp">OpenAI + Stripe</h4>
<p class="protocol-label">Agentic Commerce Protocol (ACP)</p>
<p class="partners"><strong>Partners:</strong> Etsy (live), Shopify (coming), ChatGPT distribution</p>
<p style="margin-top: 12px; font-size: 0.85rem; color: var(--text-muted);">Open standard, Stripe-first, checkout-focused</p>
</div>
<div class="landscape-card microsoft">
<h4 class="text-microsoft">Microsoft + PayPal</h4>
<p class="protocol-label">Copilot Checkout (Proprietary)</p>
<p class="partners"><strong>Partners:</strong> Ashley Global, 192K+ PayPal merchants</p>
<p style="margin-top: 12px; font-size: 0.85rem; color: var(--text-muted);">Platform play, PayPal ecosystem</p>
</div>
<div class="landscape-card amazon">
<h4 class="text-amazon">Amazon</h4>
<p class="protocol-label">Walled Garden (No Protocol)</p>
<p class="partners"><strong>Products:</strong> Rufus, Alexa+, "Buy For Me"</p>
<p style="margin-top: 12px; font-size: 0.85rem; color: var(--text-muted);">Closed ecosystem, blocking external agents</p>
</div>
</div>
<div class="insight-block">
<p>"The three-way standards competition will likely consolidate — watch which retailers adopt which protocols."</p>
</div>
</section>
<!-- Slide 6: Identity Deep Dive -->
<section class="slide" data-slide="6">
<div class="section-header">
<p class="label">Critical Difference</p>
<h2>How They Handle Identity</h2>
</div>
<div class="identity-comparison">
<div class="identity-model">
<h3><span class="text-ucp">●</span> UCP: Account Access</h3>
<div class="identity-flow">
<div class="flow-step">
<div class="step-icon" style="background: rgba(0, 212, 170, 0.2);">🔐</div>
<div class="step-content">
<div class="step-title">OAuth 2.0 Authorization</div>
<div class="step-desc">Agent requests merchant account access</div>
</div>
</div>
<div class="flow-arrow">↓</div>
<div class="flow-step">
<div class="step-icon" style="background: rgba(0, 212, 170, 0.2);">👤</div>
<div class="step-content">
<div class="step-title">User Grants Permission</div>
<div class="step-desc">One-time consent per merchant</div>
</div>
</div>
<div class="flow-arrow">↓</div>
<div class="flow-step">
<div class="step-icon" style="background: rgba(0, 212, 170, 0.2);">✨</div>
<div class="step-content">
<div class="step-title">Full Account Access</div>
<div class="step-desc">Saved addresses, payment methods, loyalty, order history</div>
</div>
</div>
</div>
<p style="margin-top: 20px; font-size: 0.85rem; color: var(--text-muted);">
<strong>Enables:</strong> "Buy my usual coffee order from Starbucks"
</p>
</div>
<div class="identity-model">
<h3><span class="text-acp">●</span> ACP: Guest Checkout</h3>
<div class="identity-flow">
<div class="flow-step">
<div class="step-icon" style="background: rgba(168, 85, 247, 0.2);">💳</div>
<div class="step-content">
<div class="step-title">Delegated Payment Token</div>
<div class="step-desc">One-time, scoped to merchant + amount</div>
</div>
</div>
<div class="flow-arrow">↓</div>
<div class="flow-step">
<div class="step-icon" style="background: rgba(168, 85, 247, 0.2);">📦</div>
<div class="step-content">
<div class="step-title">Collect Shipping Info</div>
<div class="step-desc">ChatGPT asks for address each time</div>
</div>
</div>
<div class="flow-arrow">↓</div>
<div class="flow-step">
<div class="step-icon" style="background: rgba(168, 85, 247, 0.2);">🛒</div>
<div class="step-content">
<div class="step-title">Stateless Transaction</div>
<div class="step-desc">No merchant account access</div>
</div>
</div>
</div>
<p style="margin-top: 20px; font-size: 0.85rem; color: var(--text-muted);">
<strong>Trade-off:</strong> More privacy, less personalization
</p>
</div>
</div>
</section>
<!-- Slide 7: Production Adoption -->
<section class="slide" data-slide="7">
<div class="section-header">
<p class="label">Who's Using What</p>
<h2>Production Adoption</h2>
</div>
<div class="split-layout" style="gap: 40px;">
<div>
<div class="adoption-section">
<div class="adoption-header">
<h3 class="text-acp">ACP (OpenAI/Stripe)</h3>
<span class="adoption-badge badge-live">Live Now</span>
</div>
<div class="merchants-grid">
<div class="merchant-tag"><span class="status live"></span> Etsy</div>
<div class="merchant-tag"><span class="status soon"></span> Shopify (1M+ merchants)</div>
<div class="merchant-tag"><span class="status soon"></span> Glossier</div>
<div class="merchant-tag"><span class="status soon"></span> SKIMS</div>
<div class="merchant-tag"><span class="status soon"></span> Spanx</div>
<div class="merchant-tag"><span class="status soon"></span> Vuori</div>
</div>
<p style="margin-top: 16px; font-size: 0.85rem;">
<a href="https://stripe.com/blog/developing-an-open-standard-for-agentic-commerce" target="_blank" style="color: var(--acp-primary);">Source: Stripe Blog →</a>
</p>
</div>
<div class="adoption-section" style="margin-top: 32px;">
<div class="adoption-header">
<h3 class="text-ucp">UCP (Google)</h3>
<span class="adoption-badge badge-announced">Q1 2026</span>
</div>
<div class="merchants-grid">
<div class="merchant-tag"><span class="status soon"></span> Walmart (co-developer)</div>
<div class="merchant-tag"><span class="status soon"></span> Target (co-developer)</div>
<div class="merchant-tag"><span class="status soon"></span> Shopify (co-developer)</div>
<div class="merchant-tag"><span class="status soon"></span> Etsy (co-developer)</div>
<div class="merchant-tag"><span class="status soon"></span> Wayfair</div>
</div>
<p style="margin-top: 16px; font-size: 0.85rem;">
<a href="https://ucp.dev" target="_blank" style="color: var(--ucp-primary);">Source: ucp.dev →</a>
</p>
</div>
</div>
<div>
<div class="stat-card" style="margin-bottom: 20px;">
<div class="stat-value gradient-acp">800M+</div>
<div class="stat-label">ChatGPT Weekly Active Users</div>
</div>
<div class="stat-card" style="margin-bottom: 20px;">
<div class="stat-value gradient-ucp">36%</div>
<div class="stat-label">Product Discovery via Google</div>
</div>
<div class="insight-block" style="margin-top: 0;">
<p style="font-size: 0.95rem;">"The critical question: will Shopify implement both? They co-developed UCP but are also announced for ACP."</p>
</div>
</div>
</div>
</section>
<!-- Slide 8: Amazon's Strategy -->
<section class="slide" data-slide="8">
<div class="section-header">
<p class="label">The Outlier</p>
<h2><span class="text-amazon">Amazon's</span> Walled Garden</h2>
</div>
<div class="amazon-card">
<h3 style="margin-bottom: 16px;">Why Amazon Won't Join Open Protocols</h3>
<p style="max-width: 700px;">
Amazon has nothing to gain and everything to lose. They already own the customer, and open protocols would commoditize their position. Instead, they're building their own AI agents that shop the entire internet.
</p>
<div class="amazon-stats">
<div class="amazon-stat">
<div class="value">40%</div>
<div class="label">US E-commerce Share</div>
</div>
<div class="amazon-stat">
<div class="value">$56B</div>
<div class="label">Ad Revenue at Risk</div>
</div>
<div class="amazon-stat">
<div class="value">250M+</div>
<div class="label">Rufus Users</div>
</div>
<div class="amazon-stat">
<div class="value">38%</div>
<div class="label">Shopping Sessions via Rufus</div>
</div>
</div>
<div class="amazon-products">
<div class="amazon-product">
<h4>Rufus</h4>
<p>AI shopping assistant. 149% YoY growth. Can auto-add to cart and checkout.</p>
</div>
<div class="amazon-product">
<h4>Alexa+</h4>
<p>Agentic AI. Multi-step tasks. New integrations: Expedia, Yelp, Square, Angi.</p>
</div>
<div class="amazon-product">
<h4>"Buy For Me"</h4>
<p>Shops competitor websites without leaving Amazon. The offensive play.</p>
</div>
</div>
</div>
<p style="margin-top: 20px; font-size: 0.85rem;">
<a href="https://www.modernretail.co/technology/why-the-ai-shopping-agent-wars-will-heat-up-in-2026/" target="_blank" style="color: var(--amazon-primary);">Source: Modern Retail →</a>
</p>
</section>
<!-- Slide 9: Who Wins -->
<section class="slide" data-slide="9">
<div class="section-header">
<p class="label">Strategic Outlook</p>
<h2>Who Wins?</h2>
</div>
<div class="winners-grid">
<div class="winner-card">
<h4>If open protocols dominate...</h4>
<p>Retailers want PSP flexibility and won't accept Stripe lock-in. The broader coalition and full lifecycle coverage wins.</p>
<span class="winner-protocol ucp">→ UCP (Google)</span>
</div>
<div class="winner-card">
<h4>If ChatGPT becomes the shopping interface...</h4>
<p>800M+ weekly users, live production with Etsy, Shopify coming soon. First-mover advantage and distribution win.</p>
<span class="winner-protocol acp">→ ACP (OpenAI)</span>
</div>
<div class="winner-card">
<h4>If voice commerce takes off...</h4>
<p>Alexa+ is already there with agentic capabilities. Amazon's 600M+ devices become the shopping interface.</p>
<span class="winner-protocol amazon">→ Amazon</span>
</div>
<div class="winner-card">
<h4>If consumers stay loyal to Amazon...</h4>
<p>40% market share. "Buy For Me" lets Amazon's agent shop competitors while blocking others. No protocol needed.</p>
<span class="winner-protocol amazon">→ Amazon</span>
</div>
</div>
<div class="insight-block">
<p>"The real question: will regulators let Amazon's agent buy from competitors while blocking competitors' agents from buying on Amazon?"</p>
</div>
</section>
<!-- Slide 10: Sources & Conclusion -->
<section class="slide" data-slide="10">
<div class="section-header">
<p class="label">Learn More</p>
<h2>Sources & Links</h2>
</div>
<div class="split-layout" style="align-items: start;">
<div>
<h3 style="margin-bottom: 16px; color: var(--ucp-primary);">UCP (Google)</h3>
<div class="sources-list">
<a href="https://ucp.dev" target="_blank" class="source-link">
<span class="icon">🌐</span>
<div>
<div>Official Documentation</div>
<div class="url">ucp.dev</div>
</div>
</a>
<a href="https://github.com/Universal-Commerce-Protocol/ucp" target="_blank" class="source-link">
<span class="icon">⌨️</span>
<div>
<div>GitHub Repository</div>
<div class="url">github.com/Universal-Commerce-Protocol</div>
</div>
</a>
<a href="https://ucp.dev/specification/overview" target="_blank" class="source-link">
<span class="icon">📄</span>
<div>
<div>Protocol Specification</div>
<div class="url">ucp.dev/specification</div>
</div>
</a>
</div>
<h3 style="margin-top: 32px; margin-bottom: 16px; color: var(--acp-primary);">ACP (OpenAI/Stripe)</h3>
<div class="sources-list">
<a href="https://www.agenticcommerce.dev/" target="_blank" class="source-link">
<span class="icon">🌐</span>
<div>
<div>Official Documentation</div>
<div class="url">agenticcommerce.dev</div>
</div>
</a>
<a href="https://openai.com/index/buy-it-in-chatgpt/" target="_blank" class="source-link">
<span class="icon">🛒</span>
<div>
<div>OpenAI Announcement</div>
<div class="url">openai.com</div>
</div>
</a>
<a href="https://stripe.com/blog/developing-an-open-standard-for-agentic-commerce" target="_blank" class="source-link">
<span class="icon">💳</span>
<div>
<div>Stripe Blog</div>
<div class="url">stripe.com/blog</div>
</div>
</a>
</div>
</div>
<div>
<h3 style="margin-bottom: 16px; color: var(--amazon-primary);">Amazon & Industry</h3>
<div class="sources-list">
<a href="https://www.modernretail.co/technology/why-the-ai-shopping-agent-wars-will-heat-up-in-2026/" target="_blank" class="source-link">
<span class="icon">📰</span>
<div>
<div>AI Shopping Agent Wars</div>
<div class="url">modernretail.co</div>
</div>
</a>
<a href="https://www.aboutamazon.com/news/retail/amazon-rufus-ai-assistant-personalized-shopping-features" target="_blank" class="source-link">
<span class="icon">🤖</span>
<div>
<div>Amazon Rufus Announcement</div>
<div class="url">aboutamazon.com</div>
</div>
</a>
<a href="https://newsroom.paypal-corp.com/2026-01-08-PayPal-Powers-Microsofts-Launch-of-Copilot-Checkout" target="_blank" class="source-link">
<span class="icon">💼</span>
<div>
<div>Microsoft Copilot Checkout</div>
<div class="url">newsroom.paypal-corp.com</div>
</div>
</a>
</div>
<div style="margin-top: 48px; padding: 32px; background: var(--bg-secondary); border-radius: 12px; text-align: center;">
<p class="label" style="margin-bottom: 8px;">Market Opportunity</p>
<div class="stat-value" style="font-size: 3.5rem; background: linear-gradient(135deg, var(--ucp-primary), var(--acp-primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">$3-5T</div>
<p style="color: var(--text-muted);">AI-powered retail by 2030<br><span style="font-size: 0.8rem;">(McKinsey estimate)</span></p>
</div>
</div>
</div>
</section>
</div>
<!-- Progress Bar -->
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<!-- Slide Counter -->
<div class="slide-counter">
<span class="current" id="currentSlide">1</span> / <span id="totalSlides">10</span>
</div>
<!-- Navigation Hint -->
<div class="nav-hint">
<span><kbd>←</kbd> <kbd>→</kbd> Navigate</span>
<span><kbd>F</kbd> Fullscreen</span>
</div>
<script>
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
let currentSlide = 1;
document.getElementById('totalSlides').textContent = totalSlides;
function updateSlide(newSlide) {
if (newSlide < 1 || newSlide > totalSlides) return;
slides.forEach((slide, index) => {
slide.classList.remove('active');
if (index + 1 === newSlide) {
slide.classList.add('active');
}
});
currentSlide = newSlide;
document.getElementById('currentSlide').textContent = currentSlide;
document.getElementById('progressBar').style.width = `${(currentSlide / totalSlides) * 100}%`;
}
function nextSlide() {
updateSlide(currentSlide + 1);
}
function prevSlide() {
updateSlide(currentSlide - 1);
}
function toggleFullscreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
document.exitFullscreen();
}
}
document.addEventListener('keydown', (e) => {
switch(e.key) {
case 'ArrowRight':
case 'ArrowDown':
case ' ':
case 'PageDown':
e.preventDefault();
nextSlide();
break;
case 'ArrowLeft':
case 'ArrowUp':
case 'PageUp':
e.preventDefault();
prevSlide();
break;
case 'Home':
e.preventDefault();
updateSlide(1);
break;
case 'End':
e.preventDefault();
updateSlide(totalSlides);
break;
case 'f':
case 'F':
toggleFullscreen();
break;
}
});
// Navigation: keyboard only (arrow keys, space, etc.)
// Initialize
updateSlide(1);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment