<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DigitalOcean MCP Server - AI-Powered Cloud Management</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #0a0a0f 0%, #0d1421 25%, #1a1a2e 50%, #16213e 75%, #0f0f23 100%);
background-attachment: fixed;
color: #e2e8f0;
line-height: 1.6;
overflow-x: hidden;
}
.matrix-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
opacity: 0.08;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 255, 255, 0.1) 2px,
rgba(0, 255, 255, 0.1) 4px
);
animation: matrix-scroll 25s linear infinite;
}
@keyframes matrix-scroll {
0% { transform: translateY(0); }
100% { transform: translateY(120px); }
}
.cyber-grid {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.03;
background-image:
linear-gradient(rgba(0, 255, 255, 0.2) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 0, 150, 0.2) 1px, transparent 1px);
background-size: 60px 60px;
animation: grid-pulse 6s ease-in-out infinite alternate;
}
@keyframes grid-pulse {
0% { opacity: 0.03; }
100% { opacity: 0.12; }
}
header {
position: fixed;
top: 0;
width: 100%;
background: rgba(10, 15, 35, 0.9);
backdrop-filter: blur(15px);
border-bottom: 1px solid rgba(0, 255, 255, 0.2);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
z-index: 1000;
transition: all 0.3s ease;
}
nav {
max-width: 1200px;
margin: 0 auto;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: bold;
background: linear-gradient(45deg, #00ffff, #ff0080, #00ff88);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
filter: drop-shadow(0 0 10px rgba(255, 0, 128, 0.3));
}
.nav-links {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-links a {
color: #e2e8f0;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
}
.nav-links a:hover {
color: #00ffff;
text-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
}
.nav-links a:after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(45deg, #00ffff, #ff0080);
transition: width 0.3s ease;
}
.nav-links a:hover:after {
width: 100%;
}
main {
margin-top: 80px;
}
.hero {
min-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
padding: 2rem;
}
.hero-content {
max-width: 800px;
animation: fadeInUp 1s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero h1 {
font-size: 4rem;
margin-bottom: 1rem;
background: linear-gradient(45deg, #00ffff, #ff0080, #00ff88, #ffffff);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400% 400%;
animation: gradient-shift 4s ease-in-out infinite;
filter: drop-shadow(0 0 30px rgba(0, 255, 255, 0.4)) drop-shadow(0 0 60px rgba(255, 0, 128, 0.2));
}
@keyframes gradient-shift {
0%, 100% { background-position: 0% 50%; }
25% { background-position: 100% 0%; }
50% { background-position: 100% 100%; }
75% { background-position: 0% 100%; }
}
.hero p {
font-size: 1.3rem;
margin-bottom: 2rem;
color: #cbd5e1;
opacity: 0;
animation: fadeIn 1s ease-out 0.5s forwards;
}
@keyframes fadeIn {
to { opacity: 1; }
}
.cta-button {
display: inline-block;
padding: 1rem 2.5rem;
background: linear-gradient(45deg, #001122, #003344, #002233);
color: #00ffff;
text-decoration: none;
border-radius: 8px;
font-weight: bold;
transition: all 0.3s ease;
border: 2px solid #00ffff;
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.3), inset 0 0 20px rgba(0, 255, 255, 0.1);
}
.cta-button:before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.3), transparent);
transition: left 0.5s;
}
.cta-button:hover:before {
left: 100%;
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 255, 255, 0.5), inset 0 0 30px rgba(0, 255, 255, 0.2);
border-color: #ff0080;
color: #ffffff;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.cta-button-secondary {
display: inline-block;
padding: 1rem 2.5rem;
background: rgba(255, 0, 128, 0.1);
color: #ff0080;
text-decoration: none;
border-radius: 8px;
font-weight: bold;
transition: all 0.3s ease;
border: 2px solid #ff0080;
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 0 20px rgba(255, 0, 128, 0.3), inset 0 0 20px rgba(255, 0, 128, 0.1);
}
.cta-button-secondary:before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 0, 128, 0.3), transparent);
transition: left 0.5s;
}
.cta-button-secondary:hover:before {
left: 100%;
}
.cta-button-secondary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(255, 0, 128, 0.5), inset 0 0 30px rgba(255, 0, 128, 0.2);
border-color: #00ffff;
color: #ffffff;
background: rgba(255, 0, 128, 0.2);
}
.section {
padding: 5rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
.section h2 {
font-size: 2.5rem;
text-align: center;
margin-bottom: 3rem;
background: linear-gradient(45deg, #00ffff, #ff0080);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.3));
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.feature-card {
background: rgba(10, 20, 40, 0.4);
padding: 2rem;
border-radius: 8px;
border: 1px solid rgba(0, 255, 255, 0.2);
backdrop-filter: blur(15px);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.feature-card:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #00ffff, #ff0080, #00ff88);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.feature-card:hover:before {
transform: scaleX(1);
}
.feature-card:hover {
transform: translateY(-10px);
border-color: rgba(0, 255, 255, 0.6);
box-shadow: 0 20px 40px rgba(0, 255, 255, 0.2), 0 0 30px rgba(255, 0, 128, 0.1);
}
.feature-icon {
font-size: 3rem;
margin-bottom: 1rem;
color: #00ffff;
filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.6)) drop-shadow(0 0 30px rgba(255, 0, 128, 0.3));
text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}
.feature-card h3 {
color: #e2e8f0;
margin-bottom: 1rem;
font-size: 1.3rem;
}
.feature-card p {
color: #cbd5e1;
line-height: 1.7;
}
.tools-section {
background: rgba(5, 15, 30, 0.5);
margin: 3rem 0;
border-radius: 12px;
border: 1px solid rgba(0, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.tool-item {
background: rgba(0, 255, 255, 0.05);
padding: 1.5rem;
border-radius: 6px;
border-left: 4px solid #00ffff;
transition: all 0.3s ease;
border: 1px solid rgba(0, 255, 255, 0.1);
overflow: hidden;
min-width: 0;
}
.tool-item:hover {
background: rgba(0, 255, 255, 0.1);
transform: translateX(10px);
border-left-color: #ff0080;
box-shadow: 0 4px 20px rgba(0, 255, 255, 0.2);
}
.tool-item h4 {
color: #00ffff;
margin-bottom: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
line-height: 1.3;
}
.tool-item p {
color: #e2e8f0;
font-size: 0.9rem;
}
.code-snippet {
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(0, 255, 255, 0.3);
border-radius: 8px;
padding: 2rem;
margin: 2rem 0;
position: relative;
overflow-x: auto;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(0, 255, 255, 0.1);
}
.code-snippet:before {
content: 'TERMINAL';
position: absolute;
top: 10px;
left: 15px;
color: #00ffff;
font-size: 0.7rem;
font-weight: bold;
letter-spacing: 1px;
opacity: 0.8;
}
.code-snippet pre {
color: #e2e8f0;
font-family: 'Courier New', monospace;
margin-top: 1rem;
line-height: 1.5;
}
.code-snippet .comment {
color: #64748b;
}
.code-snippet .command {
color: #00ffff;
font-weight: bold;
}
.code-snippet .env-var {
color: #00ff88;
}
footer {
background: rgba(5, 10, 25, 0.8);
text-align: center;
padding: 3rem 2rem;
border-top: 1px solid rgba(0, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
}
.footer-links {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.footer-links a {
color: #cbd5e1;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: #00ffff;
text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}
.mobile-menu {
display: none;
background: none;
border: none;
color: #e2e8f0;
font-size: 1.5rem;
cursor: pointer;
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
.mobile-menu {
display: block;
}
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1.1rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.section {
padding: 3rem 1rem;
}
.features-grid {
grid-template-columns: 1fr;
}
.tools-grid {
grid-template-columns: 1fr;
}
.footer-links {
flex-direction: column;
gap: 1rem;
}
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.7);
}
70% {
box-shadow: 0 0 0 15px rgba(0, 255, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 255, 255, 0);
}
}
.glow {
text-shadow: 0 0 30px rgba(0, 255, 255, 0.6), 0 0 60px rgba(255, 0, 128, 0.3);
}
.typing {
border-right: 2px solid #00ffff;
animation: blink-caret 0.75s step-end infinite;
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: #00ffff; }
}
/* Additional cyberpunk elements */
.cyber-border {
position: relative;
}
.cyber-border:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, #00ffff, #ff0080, #00ff88, #00ffff);
z-index: -1;
border-radius: 8px;
padding: 2px;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
}
.glitch {
position: relative;
animation: glitch 2s infinite;
}
@keyframes glitch {
0%, 100% { transform: translate(0); }
20% { transform: translate(-1px, 1px); }
40% { transform: translate(-1px, -1px); }
60% { transform: translate(1px, 1px); }
80% { transform: translate(1px, -1px); }
}
.scan-line {
position: relative;
overflow: hidden;
}
.scan-line:after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.3), transparent);
animation: scan 3s infinite;
}
@keyframes scan {
0% { left: -100%; }
100% { left: 100%; }
}
</style>
</head>
<body>
<div class="matrix-bg"></div>
<div class="cyber-grid"></div>
<header>
<nav>
<div class="logo">🤖 DigitalOcean MCP</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#tools">Tools</a></li>
<li><a href="#setup">Setup</a></li>
<li><a href="#docs">Docs</a></li>
</ul>
<button class="mobile-menu">☰</button>
</nav>
</header>
<main>
<section id="home" class="hero">
<div class="hero-content">
<h1 class="glow">DigitalOcean MCP Server</h1>
<p>Comprehensive AI-powered Model Context Protocol server with 48 tools across 7 service categories. Complete DigitalOcean infrastructure management through intelligent automation.</p>
<div class="cta-buttons">
<a href="#setup" class="cta-button pulse">Get Started</a>
<a href="https://github.com/rohit-kaundal/digitalocean-mcp-server" class="cta-button-secondary" target="_blank" rel="noopener noreferrer">View on GitHub</a>
</div>
</div>
</section>
<section id="features" class="section">
<h2>🚀 Comprehensive Cloud Management (48 Tools)</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🖥️</div>
<h3>Droplet Management (7 tools)</h3>
<p>Complete lifecycle management including create, list, resize, delete, and snapshot operations. Full CRUD with intelligent error handling and status monitoring.</p>
</div>
<div class="feature-card">
<div class="feature-icon">💾</div>
<h3>Volume Management (8 tools)</h3>
<p>Block storage operations including attach/detach, resize, and snapshot functionality. Complete volume lifecycle management with automated backup capabilities.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📸</div>
<h3>Snapshot Operations (6 tools)</h3>
<p>Backup and restore functionality for both droplets and volumes. Automated snapshot management with filtering and cleanup operations.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🖼️</div>
<h3>Image Management (6 tools)</h3>
<p>Custom image operations including transfers, conversions, and metadata updates. Seamless image lifecycle management across regions.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🌐</div>
<h3>Floating IP Management (6 tools)</h3>
<p>Static IP allocation, assignment, and management. Dynamic IP assignment with automated failover and load balancing capabilities.</p>
</div>
<div class="feature-card">
<div class="feature-icon">⚖️</div>
<h3>Load Balancer Operations (9 tools)</h3>
<p>Traffic distribution with full CRUD operations. Advanced forwarding rules, droplet pool management, and health monitoring.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔥</div>
<h3>Firewall Management (11 tools)</h3>
<p>Complete network security with rule and policy management. Inbound/outbound rule configuration, droplet assignment, and tag-based organization.</p>
</div>
<div class="feature-card">
<div class="feature-icon">☸️</div>
<h3>Kubernetes Integration (4 tools)</h3>
<p>Comprehensive cluster and node pool management. Deploy, scale, and monitor containerized applications with AI-driven insights.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📦</div>
<h3>Container Registry (2 tools)</h3>
<p>Access and manage DigitalOcean container registries. Pull images, manage repositories, and integrate with CI/CD pipelines.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔐</div>
<h3>Secure Authentication</h3>
<p>OAuth2-based authentication with DigitalOcean API. Secure token management and encrypted communication channels for all operations.</p>
</div>
</div>
</section>
<section id="tools" class="section">
<div class="tools-section">
<h2>🛠️ All 48 MCP Tools</h2>
<div class="tools-grid">
<!-- Connection & Testing -->
<div class="tool-item">
<h4>test_connection</h4>
<p>Verify connectivity to DigitalOcean API</p>
</div>
<!-- Droplet Management (7 tools) -->
<div class="tool-item">
<h4>list_droplets</h4>
<p>Retrieve all droplets with pagination</p>
</div>
<div class="tool-item">
<h4>get_droplet</h4>
<p>Get detailed droplet information</p>
</div>
<div class="tool-item">
<h4>create_droplet</h4>
<p>Create new droplets with custom specs</p>
</div>
<div class="tool-item">
<h4>delete_droplet</h4>
<p>Safely remove droplets</p>
</div>
<div class="tool-item">
<h4>resize_droplet</h4>
<p>Scale droplet resources up/down</p>
</div>
<div class="tool-item">
<h4>create_droplet_snapshot</h4>
<p>Create backup snapshots of droplets</p>
</div>
<!-- Volume Management (8 tools) -->
<div class="tool-item">
<h4>list_volumes</h4>
<p>List all block storage volumes</p>
</div>
<div class="tool-item">
<h4>get_volume</h4>
<p>Get detailed volume information</p>
</div>
<div class="tool-item">
<h4>create_volume</h4>
<p>Create new block storage volumes</p>
</div>
<div class="tool-item">
<h4>delete_volume</h4>
<p>Remove unused volumes</p>
</div>
<div class="tool-item">
<h4>attach_volume</h4>
<p>Attach volumes to droplets</p>
</div>
<div class="tool-item">
<h4>detach_volume</h4>
<p>Detach volumes from droplets</p>
</div>
<div class="tool-item">
<h4>resize_volume</h4>
<p>Expand volume storage capacity</p>
</div>
<div class="tool-item">
<h4>create_volume_snapshot</h4>
<p>Create volume backup snapshots</p>
</div>
<!-- Snapshot Operations (6 tools) -->
<div class="tool-item">
<h4>list_snapshots</h4>
<p>List all snapshots with filtering</p>
</div>
<div class="tool-item">
<h4>list_volume_snapshots</h4>
<p>List volume-specific snapshots</p>
</div>
<div class="tool-item">
<h4>list_droplet_snapshots</h4>
<p>List droplet-specific snapshots</p>
</div>
<div class="tool-item">
<h4>get_snapshot</h4>
<p>Get detailed snapshot information</p>
</div>
<div class="tool-item">
<h4>delete_snapshot</h4>
<p>Remove old snapshots</p>
</div>
<!-- Image Management (6 tools) -->
<div class="tool-item">
<h4>list_images</h4>
<p>List all available images</p>
</div>
<div class="tool-item">
<h4>get_image</h4>
<p>Get image details by ID or slug</p>
</div>
<div class="tool-item">
<h4>update_image</h4>
<p>Update image metadata</p>
</div>
<div class="tool-item">
<h4>delete_image</h4>
<p>Remove custom images</p>
</div>
<div class="tool-item">
<h4>transfer_image</h4>
<p>Transfer images between regions</p>
</div>
<div class="tool-item">
<h4>convert_image_to_snapshot</h4>
<p>Convert images to snapshots</p>
</div>
<!-- Floating IP Management (6 tools) -->
<div class="tool-item">
<h4>list_floating_ips</h4>
<p>List all floating IP addresses</p>
</div>
<div class="tool-item">
<h4>get_floating_ip</h4>
<p>Get floating IP details</p>
</div>
<div class="tool-item">
<h4>create_floating_ip</h4>
<p>Create new floating IPs</p>
</div>
<div class="tool-item">
<h4>delete_floating_ip</h4>
<p>Release floating IPs</p>
</div>
<div class="tool-item">
<h4>assign_floating_ip</h4>
<p>Assign IPs to droplets</p>
</div>
<div class="tool-item">
<h4>unassign_floating_ip</h4>
<p>Unassign IPs from droplets</p>
</div>
<!-- Load Balancer Operations (9 tools) -->
<div class="tool-item">
<h4>list_load_balancers</h4>
<p>List all load balancers</p>
</div>
<div class="tool-item">
<h4>get_load_balancer</h4>
<p>Get load balancer configuration</p>
</div>
<div class="tool-item">
<h4>create_load_balancer</h4>
<p>Create new load balancers</p>
</div>
<div class="tool-item">
<h4>update_load_balancer</h4>
<p>Update load balancer settings</p>
</div>
<div class="tool-item">
<h4>delete_load_balancer</h4>
<p>Remove load balancers</p>
</div>
<div class="tool-item">
<h4>add_droplets_to_load_balancer</h4>
<p>Add droplets to load balancer pool</p>
</div>
<div class="tool-item">
<h4>remove_droplets_from_load_balancer</h4>
<p>Remove droplets from pool</p>
</div>
<div class="tool-item">
<h4>add_forwarding_rules_to_load_balancer</h4>
<p>Add traffic forwarding rules</p>
</div>
<div class="tool-item">
<h4>remove_forwarding_rules_from_load_balancer</h4>
<p>Remove forwarding rules</p>
</div>
<!-- Firewall Management (11 tools) -->
<div class="tool-item">
<h4>list_firewalls</h4>
<p>List all firewalls in account</p>
</div>
<div class="tool-item">
<h4>get_firewall</h4>
<p>Get firewall configuration and rules</p>
</div>
<div class="tool-item">
<h4>create_firewall</h4>
<p>Create new firewall with rules</p>
</div>
<div class="tool-item">
<h4>update_firewall</h4>
<p>Update firewall configuration</p>
</div>
<div class="tool-item">
<h4>delete_firewall</h4>
<p>Remove firewall from account</p>
</div>
<div class="tool-item">
<h4>add_droplets_to_firewall</h4>
<p>Assign droplets to firewall</p>
</div>
<div class="tool-item">
<h4>remove_droplets_from_firewall</h4>
<p>Remove droplets from firewall</p>
</div>
<div class="tool-item">
<h4>add_tags_to_firewall</h4>
<p>Add organizational tags</p>
</div>
<div class="tool-item">
<h4>remove_tags_from_firewall</h4>
<p>Remove tags from firewall</p>
</div>
<div class="tool-item">
<h4>add_rules_to_firewall</h4>
<p>Add new security rules</p>
</div>
<div class="tool-item">
<h4>remove_rules_from_firewall</h4>
<p>Remove existing security rules</p>
</div>
<!-- Kubernetes Integration (4 tools) -->
<div class="tool-item">
<h4>list_k8s_clusters</h4>
<p>List all Kubernetes clusters</p>
</div>
<div class="tool-item">
<h4>get_k8s_cluster</h4>
<p>Get detailed cluster information</p>
</div>
<div class="tool-item">
<h4>create_k8s_cluster</h4>
<p>Deploy new Kubernetes clusters</p>
</div>
<div class="tool-item">
<h4>delete_k8s_cluster</h4>
<p>Remove Kubernetes clusters</p>
</div>
<!-- Container Registry (2 tools) -->
<div class="tool-item">
<h4>list_registries</h4>
<p>List container registries</p>
</div>
<div class="tool-item">
<h4>get_registry</h4>
<p>Get registry details and configs</p>
</div>
</div>
</div>
</section>
<section id="setup" class="section">
<h2>⚡ Quick Setup</h2>
<div class="code-snippet">
<pre><span class="comment"># Set your DigitalOcean API token</span>
<span class="command">export</span> <span class="env-var">DIGITALOCEAN_ACCESS_TOKEN</span>="your_digitalocean_api_token"
<span class="comment"># Build the MCP server</span>
<span class="command">go build</span> -o digitalocean-mcp-server
<span class="comment"># Run the server</span>
<span class="command">./digitalocean-mcp-server</span>
<span class="comment"># Or run directly with Go</span>
<span class="command">go run</span> main.go</pre>
</div>
<h3 style="color: #c084fc; margin-top: 2rem; margin-bottom: 1rem;">🔧 Dependencies</h3>
<div class="code-snippet">
<pre><span class="command">go get</span> github.com/digitalocean/godo
<span class="command">go get</span> github.com/metoro-io/mcp-golang
<span class="command">go get</span> golang.org/x/oauth2</pre>
</div>
</section>
<section id="docs" class="section">
<h2>📚 Architecture Overview</h2>
<div class="features-grid">
<div class="feature-card">
<h3>🎯 main.go</h3>
<p>Entry point that initializes and starts the MCP server via server.Start() using stdio transport protocol.</p>
</div>
<div class="feature-card">
<h3>🖥️ server/</h3>
<p>MCP server configuration and tool registration. Contains server.go for initialization and tools.go for registering all 37 API tools across 6 service categories.</p>
</div>
<div class="feature-card">
<h3>🔌 client/</h3>
<p>DigitalOcean API client wrapper using OAuth2 authentication. Handles secure communication with DO API endpoints.</p>
</div>
<div class="feature-card">
<h3>⚡ handlers/</h3>
<p>Modular business logic with 9 specialized handler files: droplets, volumes, snapshots, images, floating IPs, load balancers, firewalls, Kubernetes, and registry operations.</p>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-content">
<div class="footer-links">
<a href="https://github.com/rohit-kaundal/digitalocean-mcp-server" target="_blank" rel="noopener noreferrer">GitHub</a>
<a href="https://www.digitalocean.com/docs/api/">DigitalOcean API</a>
<a href="https://modelcontextprotocol.io/">MCP Protocol</a>
<a href="#docs">Documentation</a>
</div>
<p style="color: #9ca3af;">© 2024 DigitalOcean MCP Server. Built with 🤖 AI and ❤️ for the cloud.</p>
</div>
</footer>
<script>
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Header background opacity on scroll
window.addEventListener('scroll', () => {
const header = document.querySelector('header');
const scrolled = window.scrollY > 50;
header.style.background = scrolled ?
'rgba(5, 10, 25, 0.95)' :
'rgba(10, 15, 35, 0.9)';
});
// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Observe all feature cards and tool items
document.querySelectorAll('.feature-card, .tool-item').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(el);
});
// Mobile menu functionality
const mobileMenu = document.querySelector('.mobile-menu');
const navLinks = document.querySelector('.nav-links');
mobileMenu.addEventListener('click', () => {
navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
navLinks.style.flexDirection = 'column';
navLinks.style.position = 'absolute';
navLinks.style.top = '100%';
navLinks.style.left = '0';
navLinks.style.right = '0';
navLinks.style.background = 'rgba(5, 10, 25, 0.98)';
navLinks.style.padding = '1rem';
navLinks.style.borderTop = '1px solid rgba(0, 255, 255, 0.3)';
});
// Close mobile menu when clicking outside
document.addEventListener('click', (e) => {
if (!e.target.closest('nav')) {
if (window.innerWidth <= 768) {
navLinks.style.display = 'none';
}
}
});
// Typing effect for hero subtitle
const heroText = document.querySelector('.hero p');
if (heroText) {
const originalText = heroText.textContent;
heroText.textContent = '';
heroText.classList.add('typing');
let i = 0;
const typeWriter = () => {
if (i < originalText.length) {
heroText.textContent += originalText.charAt(i);
i++;
setTimeout(typeWriter, 30);
} else {
setTimeout(() => {
heroText.classList.remove('typing');
heroText.style.borderRight = 'none';
}, 1000);
}
};
// Start typing effect after a delay
setTimeout(() => {
if (heroText) {
typeWriter();
}
}, 1500);
}
// Parallax effect for hero section
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
const hero = document.querySelector('.hero');
const rate = scrolled * -0.5;
hero.style.transform = `translateY(${rate}px)`;
});
// Add pulse effect to CTA button periodically
setInterval(() => {
const ctaButton = document.querySelector('.cta-button');
ctaButton.classList.add('pulse');
setTimeout(() => {
ctaButton.classList.remove('pulse');
}, 2000);
}, 5000);
</script>
</body>
</html>