<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Onchain Mantle MPC</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: "Space Grotesk", sans-serif;
background: linear-gradient(to bottom right, #0a0a0a, #1a1a1a);
}
.glass {
background: rgba(26, 26, 26, 0.4);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.protocol-card {
background: rgba(26, 26, 26, 0.4);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.protocol-card:hover {
transform: translateY(-2px);
background: rgba(38, 38, 38, 0.6);
border-color: rgba(255, 255, 255, 0.2);
}
.gradient-border {
position: relative;
border-radius: 1rem;
background: linear-gradient(
45deg,
rgba(59, 130, 246, 0.5),
rgba(147, 51, 234, 0.5)
);
padding: 1px;
}
.gradient-border::before {
content: "";
position: absolute;
inset: 0;
border-radius: 1rem;
padding: 1px;
background: linear-gradient(
45deg,
rgba(59, 130, 246, 0.3),
rgba(147, 51, 234, 0.3)
);
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
</style>
</head>
<body
class="min-h-screen bg-[#0A0A0A] text-white flex items-center justify-center p-8"
>
<div class="max-w-6xl w-full mx-auto relative">
<!-- Decorative elements -->
<div
class="absolute -top-40 -left-40 w-80 h-80 bg-blue-500/20 rounded-full blur-3xl"
></div>
<div
class="absolute -bottom-40 -right-40 w-80 h-80 bg-purple-500/20 rounded-full blur-3xl"
></div>
<div class="text-center mb-16 relative">
<div
class="inline-flex items-center gap-2 mb-4 glass px-4 py-2 rounded-full"
>
<div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
<span class="text-sm font-medium text-gray-300"
>Live on Mantle Network</span
>
</div>
<h1 class="text-7xl font-bold mb-6 tracking-tight">
Onchain
<span
class="bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent"
>MANTLE</span
>
MCP SERVER
</h1>
<p
class="text-xl text-gray-300 max-w-2xl mx-auto font-light leading-relaxed"
>
Connect this mpc server to cursor, claude, t3chat or your preferred ai
workspace to discuss your DeFi strategies with real-time data from
Mantle's leading protocols.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
<div class="glass rounded-3xl p-8 relative overflow-hidden">
<div
class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-500/10"
></div>
<h2 class="text-2xl font-semibold mb-8 relative">
Supported Protocols
</h2>
<div class="space-y-6 relative">
<div class="gradient-border">
<a
href="https://defillama.com/protocol/treehouse-protocol"
target="_blank"
rel="noopener"
class="protocol-card block p-6 rounded-2xl group relative overflow-hidden"
>
<div class="flex items-center gap-4">
<div
class="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-500/20 to-blue-500/20 flex items-center justify-center"
>
<svg
class="w-6 h-6 text-emerald-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M4 20h16M4 20v-4m0 4l5-5m-5 5v-4m0 4l5-5M4 12V8m0 4l5-5m-5 5V8m0 4l5-5m11 13v-4m0 4l-5-5m5 5v-4m0 4l-5-5m5-3V8m0 4l-5-5m5 5V8m0 4l-5-5M8 20h8"
/>
</svg>
</div>
<div>
<h3
class="text-lg font-semibold text-white group-hover:text-emerald-400 transition-colors"
>
Treehouse Protocol
</h3>
<p class="text-gray-400 mt-1">
Leading lending protocol on Mantle
</p>
</div>
</div>
</a>
</div>
<div class="gradient-border">
<a
href="https://defillama.com/protocol/merchant-moe"
target="_blank"
rel="noopener"
class="protocol-card block p-6 rounded-2xl group relative overflow-hidden"
>
<div class="flex items-center gap-4">
<div
class="w-12 h-12 rounded-xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center"
>
<svg
class="w-6 h-6 text-purple-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"
/>
</svg>
</div>
<div>
<h3
class="text-lg font-semibold text-white group-hover:text-purple-400 transition-colors"
>
Merchant Moe
</h3>
<p class="text-gray-400 mt-1">Innovative DEX on Mantle</p>
</div>
</div>
</a>
</div>
</div>
</div>
<div
class="bg-[#1A1A1A] rounded-2xl p-8 border border-[#2A2A2A] backdrop-blur-sm"
>
<h2 class="text-2xl font-semibold mb-6">Live Data Features</h2>
<div class="space-y-4">
<div class="flex items-start gap-4 bg-[#252525] p-6 rounded-xl">
<div
class="w-8 h-8 rounded-lg bg-blue-500/10 flex items-center justify-center flex-shrink-0"
>
<svg
class="w-5 h-5 text-blue-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
/>
</svg>
</div>
<div>
<h3 class="font-medium mb-1">Real-time Token Prices</h3>
<p class="text-sm text-gray-400">
Live price updates from Mantle Network
</p>
</div>
</div>
<div class="flex items-start gap-4 bg-[#252525] p-6 rounded-xl">
<div
class="w-8 h-8 rounded-lg bg-purple-500/10 flex items-center justify-center flex-shrink-0"
>
<svg
class="w-5 h-5 text-purple-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
/>
</svg>
</div>
<div>
<h3 class="font-medium mb-1">Protocol Statistics</h3>
<p class="text-sm text-gray-400">
Comprehensive TVL and protocol metrics
</p>
</div>
</div>
<div class="flex items-start gap-4 bg-[#252525] p-6 rounded-xl">
<div
class="w-8 h-8 rounded-lg bg-green-500/10 flex items-center justify-center flex-shrink-0"
>
<svg
class="w-5 h-5 text-green-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div>
<h3 class="font-medium mb-1">Stablecoin Analytics</h3>
<p class="text-sm text-gray-400">
Deep insights into stablecoin metrics
</p>
</div>
</div>
</div>
</div>
</div>
<div class="glass rounded-3xl p-8 relative overflow-hidden">
<div
class="absolute inset-0 bg-gradient-to-br from-gray-800/20 to-gray-900/20"
></div>
<div class="flex items-center justify-between mb-6 relative">
<div class="flex items-center gap-3">
<div class="w-3 h-3 rounded-full bg-[#FF5F57]"></div>
<div class="w-3 h-3 rounded-full bg-[#FFBD2E]"></div>
<div class="w-3 h-3 rounded-full bg-[#28C840]"></div>
</div>
<div class="text-sm text-gray-500 font-mono">mcp-config.json</div>
</div>
<pre
class="text-sm bg-[#0A0A0A] rounded-2xl p-6 overflow-x-auto font-mono relative"
>
<code class="text-gray-300">{
"mcpServers": {
"onchain-context": {
"type": "remote",
"url": "https://onchain-beryl.vercel.app/sse",
"supportsStreaming": true
}
}
}</code></pre>
</div>
</div>
</body>
</html>
