jake/mcpengine-demos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
mcpengine-demos/index.html

156 lines
14 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP Engine — AI-Powered Integrations</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', system-ui, sans-serif; }
.card-glow:hover { box-shadow: 0 0 30px rgba(139,92,246,0.15); transform: translateY(-2px); }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 antialiased">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-6">
<span class="w-2 h-2 rounded-full bg-violet-500 animate-pulse"></span>
30 Platforms · Open Source
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-4">
<span style="background:linear-gradient(135deg,#8b5cf6,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">MCP Engine</span>
</h1>
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Connect any SaaS platform to AI in 2 clicks. Full API access through the Model Context Protocol.</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
<a href="calendly.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#006BFF"><span class="font-bold text-sm text-white">C</span></div>
<div><div class="font-semibold">Calendly</div><div class="text-xs text-zinc-500">47 tools</div></div>
</a>
<a href="zendesk.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#03363D"><span class="font-bold text-sm text-white">Z</span></div>
<div><div class="font-semibold">Zendesk</div><div class="text-xs text-zinc-500">156 tools</div></div>
</a>
<a href="trello.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#0079BF"><span class="font-bold text-sm text-white">T</span></div>
<div><div class="font-semibold">Trello</div><div class="text-xs text-zinc-500">89 tools</div></div>
</a>
<a href="gusto.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#F45D48"><span class="font-bold text-sm text-white">G</span></div>
<div><div class="font-semibold">Gusto</div><div class="text-xs text-zinc-500">72 tools</div></div>
</a>
<a href="mailchimp.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#FFE01B"><span class="font-bold text-sm text-black">M</span></div>
<div><div class="font-semibold">Mailchimp</div><div class="text-xs text-zinc-500">94 tools</div></div>
</a>
<a href="clickup.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#7B68EE"><span class="font-bold text-sm text-white">C</span></div>
<div><div class="font-semibold">ClickUp</div><div class="text-xs text-zinc-500">134 tools</div></div>
</a>
<a href="acuity.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#315B7D"><span class="font-bold text-sm text-white">A</span></div>
<div><div class="font-semibold">Acuity Scheduling</div><div class="text-xs text-zinc-500">38 tools</div></div>
</a>
<a href="squarespace.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#000000;border:1px solid #333"><span class="font-bold text-sm text-white">S</span></div>
<div><div class="font-semibold">Squarespace</div><div class="text-xs text-zinc-500">67 tools</div></div>
</a>
<a href="brevo.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#0B996E"><span class="font-bold text-sm text-white">B</span></div>
<div><div class="font-semibold">Brevo</div><div class="text-xs text-zinc-500">82 tools</div></div>
</a>
<a href="wrike.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#08CF65"><span class="font-bold text-sm text-white">W</span></div>
<div><div class="font-semibold">Wrike</div><div class="text-xs text-zinc-500">98 tools</div></div>
</a>
<a href="bamboohr.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#73C41D"><span class="font-bold text-sm text-white">B</span></div>
<div><div class="font-semibold">BambooHR</div><div class="text-xs text-zinc-500">56 tools</div></div>
</a>
<a href="freshbooks.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#0075DD"><span class="font-bold text-sm text-white">F</span></div>
<div><div class="font-semibold">FreshBooks</div><div class="text-xs text-zinc-500">64 tools</div></div>
</a>
<a href="clover.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#43B02A"><span class="font-bold text-sm text-white">C</span></div>
<div><div class="font-semibold">Clover</div><div class="text-xs text-zinc-500">78 tools</div></div>
</a>
<a href="servicetitan.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#FF6B00"><span class="font-bold text-sm text-white">S</span></div>
<div><div class="font-semibold">ServiceTitan</div><div class="text-xs text-zinc-500">124 tools</div></div>
</a>
<a href="rippling.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#FEC400"><span class="font-bold text-sm text-black">R</span></div>
<div><div class="font-semibold">Rippling</div><div class="text-xs text-zinc-500">89 tools</div></div>
</a>
<a href="freshdesk.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#25C16F"><span class="font-bold text-sm text-white">F</span></div>
<div><div class="font-semibold">Freshdesk</div><div class="text-xs text-zinc-500">92 tools</div></div>
</a>
<a href="keap.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#2D9F2D"><span class="font-bold text-sm text-white">K</span></div>
<div><div class="font-semibold">Keap</div><div class="text-xs text-zinc-500">76 tools</div></div>
</a>
<a href="constantcontact.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#1856A8"><span class="font-bold text-sm text-white">C</span></div>
<div><div class="font-semibold">Constant Contact</div><div class="text-xs text-zinc-500">58 tools</div></div>
</a>
<a href="lightspeed.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#E4002B"><span class="font-bold text-sm text-white">L</span></div>
<div><div class="font-semibold">Lightspeed</div><div class="text-xs text-zinc-500">86 tools</div></div>
</a>
<a href="bigcommerce.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#34313F"><span class="font-bold text-sm text-white">B</span></div>
<div><div class="font-semibold">BigCommerce</div><div class="text-xs text-zinc-500">112 tools</div></div>
</a>
<a href="toast.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#FF4C00"><span class="font-bold text-sm text-white">T</span></div>
<div><div class="font-semibold">Toast</div><div class="text-xs text-zinc-500">94 tools</div></div>
</a>
<a href="jobber.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#7AC143"><span class="font-bold text-sm text-white">J</span></div>
<div><div class="font-semibold">Jobber</div><div class="text-xs text-zinc-500">68 tools</div></div>
</a>
<a href="wave.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#165DFF"><span class="font-bold text-sm text-white">W</span></div>
<div><div class="font-semibold">Wave</div><div class="text-xs text-zinc-500">42 tools</div></div>
</a>
<a href="closecrm.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#3D5AFE"><span class="font-bold text-sm text-white">C</span></div>
<div><div class="font-semibold">Close CRM</div><div class="text-xs text-zinc-500">84 tools</div></div>
</a>
<a href="pipedrive.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#017737"><span class="font-bold text-sm text-white">P</span></div>
<div><div class="font-semibold">Pipedrive</div><div class="text-xs text-zinc-500">76 tools</div></div>
</a>
<a href="helpscout.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#1292EE"><span class="font-bold text-sm text-white">H</span></div>
<div><div class="font-semibold">Help Scout</div><div class="text-xs text-zinc-500">54 tools</div></div>
</a>
<a href="basecamp.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#1D2D35"><span class="font-bold text-sm text-white">B</span></div>
<div><div class="font-semibold">Basecamp</div><div class="text-xs text-zinc-500">62 tools</div></div>
</a>
<a href="housecallpro.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#FF5722"><span class="font-bold text-sm text-white">H</span></div>
<div><div class="font-semibold">Housecall Pro</div><div class="text-xs text-zinc-500">72 tools</div></div>
</a>
<a href="fieldedge.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#0066B2"><span class="font-bold text-sm text-white">F</span></div>
<div><div class="font-semibold">FieldEdge</div><div class="text-xs text-zinc-500">68 tools</div></div>
</a>
<a href="touchbistro.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#F26522"><span class="font-bold text-sm text-white">T</span></div>
<div><div class="font-semibold">TouchBistro</div><div class="text-xs text-zinc-500">58 tools</div></div>
</a>
</div>
<footer class="mt-20 text-center text-zinc-600 text-sm">
© 2026 MCP Engine. Open source AI integrations for every SaaS platform.
</footer>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink