index.html•15 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>MCP Demo Day - Preview the Future of Agentic Software</title>
<meta
name="description"
content="Join us on May 1st, 2025 to witness groundbreaking demos from companies like Atlassian, Linear, Stripe, and more. Experience the next evolution of AI-powered software."
/>
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://demo-day.mcp.cloudflare.com/" />
<meta property="og:title" content="MCP Demo Day - Preview the Future of Agentic Software" />
<meta
property="og:description"
content="Join us on May 1st, 2025 to witness groundbreaking demos from companies like Atlassian, Linear, Stripe, and more. Experience the next evolution of AI-powered software."
/>
<meta property="og:image" content="https://demo-day.mcp.cloudflare.com/public/mcpog.png" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="MCP Demo Day - Preview the Future of Agentic Software" />
<meta
name="twitter:description"
content="Join us on May 1st, 2025 to witness groundbreaking demos from companies like Atlassian, Linear, Stripe, and more. Experience the next evolution of AI-powered software."
/>
<meta name="twitter:image" content="https://demo-day.mcp.cloudflare.com/public/mcpog.png" />
<link rel="icon" type="image/png" href="public/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="public/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="public/favicon-16x16.png" />
<link rel="stylesheet" href="styles.css" />
<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=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="page-wrapper">
<main class="container">
<section class="left-panel">
<div class="header">
<div class="logo">
<img src="public/mcp_demo_day.svg" alt="MCP Logo" class="cloud-logo" />
</div>
<div class="date-time" onclick="document.getElementById('calendarDialog').showModal()">
<button class="calendar-trigger" aria-label="Add to calendar">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
<path
d="M6 5V3M14 5V3M5 9H15M5 7.5H15M4.2 17H15.8C16.4627 17 17 16.4627 17 15.8V5.2C17 4.53726 16.4627 4 15.8 4H4.2C3.53726 4 3 4.53726 3 5.2V15.8C3 16.4627 3.53726 17 4.2 17Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<div class="date-time-text">
<h2>MAY 1, 2025</h2>
<h3>ONLINE 10:00 AM PT / 1 PM ET</h3>
</div>
</div>
</div>
<div class="content">
<h1>Preview the Future<br />of Agentic Software</h1>
<p class="description">
Come see how the world's most innovative platforms have connected agents to their
services with MCP to build a new class of product experiences.
</p>
<div class="input-group">
<a class="notify-btn" href="https://www.youtube.com/watch?v=njBGqr-BU54">
Watch the stream
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M2.5 8H13.5M13.5 8L9 3.5M13.5 8L9 12.5"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
<div class="success-message">
<div class="success-text">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15 5L7 13L3 9"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
You're in! See you on May 1st
</div>
<div class="calendar-actions">
<button class="calendar-action" data-calendar-type="google">
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
width="100"
height="100"
viewBox="0,0,256,256"
style="fill: #ffffff"
>
<g
fill="#ffffff"
fill-rule="nonzero"
stroke="none"
stroke-width="1"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="10"
stroke-dasharray=""
stroke-dashoffset="0"
font-family="none"
font-weight="none"
font-size="none"
text-anchor="none"
style="mix-blend-mode: normal"
>
<g transform="scale(5.12,5.12)">
<path
d="M25.99609,48c-12.68359,0 -23.00391,-10.31641 -23.00391,-23c0,-12.68359 10.32031,-23 23.00391,-23c5.74609,0 11.24609,2.12891 15.49219,5.99609l0.77344,0.70703l-7.58594,7.58594l-0.70312,-0.60156c-2.22656,-1.90625 -5.05859,-2.95703 -7.97656,-2.95703c-6.76562,0 -12.27344,5.50391 -12.27344,12.26953c0,6.76563 5.50781,12.26953 12.27344,12.26953c4.87891,0 8.73438,-2.49219 10.55078,-6.73828h-11.55078v-10.35547l22.55078,0.03125l0.16797,0.79297c1.17578,5.58203 0.23438,13.79297 -4.53125,19.66797c-3.94531,4.86328 -9.72656,7.33203 -17.1875,7.33203z"
></path>
</g>
</g>
</svg>
Google Calendar
</button>
<button class="calendar-action" data-calendar-type="outlook">
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
width="100"
height="100"
viewBox="0,0,256,256"
style="fill: #ffffff"
>
<g
fill="#ffffff"
fill-rule="nonzero"
stroke="none"
stroke-width="1"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="10"
stroke-dasharray=""
stroke-dashoffset="0"
font-family="none"
font-weight="none"
font-size="none"
text-anchor="none"
style="mix-blend-mode: normal"
>
<g transform="scale(5.12,5.12)">
<path
d="M5,4c-0.552,0 -1,0.447 -1,1v19h20v-20zM26,4v20h20v-19c0,-0.553 -0.448,-1 -1,-1zM4,26v19c0,0.553 0.448,1 1,1h19v-20zM26,26v20h19c0.552,0 1,-0.447 1,-1v-19z"
></path>
</g>
</g>
</svg>
Outlook
</button>
<button class="calendar-action" data-calendar-type="ics">
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path
d="M12 15V3m0 12l-4-4m4 4l4-4M3 17l.6 2.6c.2.8.8 1.4 1.6 1.4h13.6c.8 0 1.4-.6 1.6-1.4l.6-2.6"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
Download .ics
</button>
</div>
</div>
</div>
<div class="attendees">
<div class="attendee-avatars">
<div class="attendee-avatar" data-tooltip="Special Guest">
<img src="public/special_guest.png" alt="Special Guest" />
</div>
<div class="attendee-avatar" data-tooltip="Sunil Pai">
<img src="public/sunil.jpg" alt="Sunil Pai" />
</div>
<div class="attendee-avatar" data-tooltip="Dina Kozlov">
<img src="public/dina.jpg" alt="Dina Kozlov" />
</div>
</div>
<span class="attendee-count"><strong>+ all the other cool kids</strong> went</span>
</div>
</div>
</section>
<section class="right-panel">
<div class="demos-section">
<h4>DEMOS FROM</h4>
<ul class="demo-companies">
<li>Asana</li>
<li>Atlassian</li>
<li>Cloudflare</li>
<li>Intercom</li>
<li>Linear</li>
<li>Paypal</li>
<li>Sentry</li>
<li>Square</li>
<li>Stripe</li>
<li>Webflow</li>
<li>+ More</li>
</ul>
</div>
</section>
</main>
<footer>
<div class="footer-left">
<img src="public/cloudflare_logo.svg" alt="Cloudflare" class="cloudflare-logo" />
<div class="footer-links"></div>
</div>
<a
href="https://developers.cloudflare.com/agents/guides/remote-mcp-server/?utm_source=website&utm_medium=reg+page&utm_campaign=MCP+Demo+Day"
target="_blank"
class="build-btn"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24" height="24">
<path d="M8.16 23h21.177v-5.86l-4.023-2.307-.694-.3-16.46.113z" fill="transparent" />
<path
d="M22.012 22.222c.197-.675.122-1.294-.206-1.754-.3-.422-.807-.666-1.416-.694l-11.545-.15c-.075 0-.14-.038-.178-.094s-.047-.13-.028-.206c.038-.113.15-.197.272-.206l11.648-.15c1.38-.066 2.88-1.182 3.404-2.55l.666-1.735a.38.38 0 0 0 .02-.225c-.75-3.395-3.78-5.927-7.4-5.927-3.34 0-6.17 2.157-7.184 5.15-.657-.488-1.5-.75-2.392-.666-1.604.16-2.9 1.444-3.048 3.048a3.58 3.58 0 0 0 .084 1.191A4.84 4.84 0 0 0 0 22.1c0 .234.02.47.047.703.02.113.113.197.225.197H21.58a.29.29 0 0 0 .272-.206l.16-.572z"
fill="currentColor"
/>
<path
d="M25.688 14.803l-.32.01c-.075 0-.14.056-.17.13l-.45 1.566c-.197.675-.122 1.294.206 1.754.3.422.807.666 1.416.694l2.457.15c.075 0 .14.038.178.094s.047.14.028.206c-.038.113-.15.197-.272.206l-2.56.15c-1.388.066-2.88 1.182-3.404 2.55l-.188.478c-.038.094.028.188.13.188h8.797a.23.23 0 0 0 .225-.169A6.41 6.41 0 0 0 32 21.106a6.32 6.32 0 0 0-6.312-6.302"
fill="currentColor"
/>
</svg>
Build An MCP Server
</a>
</footer>
</div>
<dialog id="calendarDialog" class="calendar-popover">
<h4>Add to Calendar</h4>
<button class="close-button" onclick="document.getElementById('calendarDialog').close()">
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1"
>
<path d="M6 18L18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<div class="calendar-options">
<button class="calendar-option" data-calendar-type="google">
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
width="100"
height="100"
viewBox="0,0,256,256"
style="fill: #ffffff"
>
<g
fill="#ffffff"
fill-rule="nonzero"
stroke="none"
stroke-width="1"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="10"
stroke-dasharray=""
stroke-dashoffset="0"
font-family="none"
font-weight="none"
font-size="none"
text-anchor="none"
style="mix-blend-mode: normal"
>
<g transform="scale(5.12,5.12)">
<path
d="M25.99609,48c-12.68359,0 -23.00391,-10.31641 -23.00391,-23c0,-12.68359 10.32031,-23 23.00391,-23c5.74609,0 11.24609,2.12891 15.49219,5.99609l0.77344,0.70703l-7.58594,7.58594l-0.70312,-0.60156c-2.22656,-1.90625 -5.05859,-2.95703 -7.97656,-2.95703c-6.76562,0 -12.27344,5.50391 -12.27344,12.26953c0,6.76563 5.50781,12.26953 12.27344,12.26953c4.87891,0 8.73438,-2.49219 10.55078,-6.73828h-11.55078v-10.35547l22.55078,0.03125l0.16797,0.79297c1.17578,5.58203 0.23438,13.79297 -4.53125,19.66797c-3.94531,4.86328 -9.72656,7.33203 -17.1875,7.33203z"
></path>
</g>
</g>
</svg>
<span>Google Calendar</span>
</button>
<button class="calendar-option" data-calendar-type="outlook">
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
width="100"
height="100"
viewBox="0,0,256,256"
style="fill: #ffffff"
>
<g
fill="#ffffff"
fill-rule="nonzero"
stroke="none"
stroke-width="1"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="10"
stroke-dasharray=""
stroke-dashoffset="0"
font-family="none"
font-weight="none"
font-size="none"
text-anchor="none"
style="mix-blend-mode: normal"
>
<g transform="scale(5.12,5.12)">
<path
d="M5,4c-0.552,0 -1,0.447 -1,1v19h20v-20zM26,4v20h20v-19c0,-0.553 -0.448,-1 -1,-1zM4,26v19c0,0.553 0.448,1 1,1h19v-20zM26,26v20h19c0.552,0 1,-0.447 1,-1v-19z"
></path>
</g>
</g>
</svg>
<span>Outlook Calendar</span>
</button>
<button class="calendar-option" data-calendar-type="apple">
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
width="100"
height="100"
viewBox="0,0,256,256"
style="fill: #ffffff"
>
<g
fill="#ffffff"
fill-rule="nonzero"
stroke="none"
stroke-width="1"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="10"
stroke-dasharray=""
stroke-dashoffset="0"
font-family="none"
font-weight="none"
font-size="none"
text-anchor="none"
style="mix-blend-mode: normal"
>
<g transform="scale(5.12,5.12)">
<path
d="M44.52734,34.75c-1.07812,2.39453 -1.59766,3.46484 -2.98437,5.57813c-1.94141,2.95313 -4.67969,6.64063 -8.0625,6.66406c-3.01172,0.02734 -3.78906,-1.96484 -7.87891,-1.92969c-4.08594,0.01953 -4.9375,1.96875 -7.95312,1.9375c-3.38672,-0.03125 -5.97656,-3.35156 -7.91797,-6.30078c-5.42969,-8.26953 -6.00391,-17.96484 -2.64844,-23.12109c2.375,-3.65625 6.12891,-5.80469 9.65625,-5.80469c3.59375,0 5.85156,1.97266 8.82031,1.97266c2.88281,0 4.63672,-1.97656 8.79297,-1.97656c3.14063,0 6.46094,1.71094 8.83594,4.66406c-7.76562,4.25781 -6.50391,15.34766 1.33984,18.31641zM31.19531,8.46875c1.51172,-1.94141 2.66016,-4.67969 2.24219,-7.46875c-2.46484,0.16797 -5.34766,1.74219 -7.03125,3.78125c-1.52734,1.85938 -2.79297,4.61719 -2.30078,7.28516c2.69141,0.08594 5.47656,-1.51953 7.08984,-3.59766z"
></path>
</g>
</g>
</svg>
<span>Apple Calendar</span>
</button>
<button class="calendar-option" data-calendar-type="ics">
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1"
>
<path
d="M12 15V3m0 12l-4-4m4 4l4-4M2 17l.621 2.485A2 2 0 004.561 21h14.878a2 2 0 001.94-1.515L22 17"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span>Download .ics File</span>
</button>
</div>
</dialog>
<script src="script.js"></script>
</body>
</html>