<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced MCP Server - Documentation</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #333;
background: #f5f5f5;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 40px 20px;
margin-bottom: 30px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
.subtitle {
font-size: 1.2em;
opacity: 0.9;
}
.nav {
background: white;
padding: 20px;
border-radius: 10px;
margin-bottom: 30px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.nav ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.nav a {
color: #667eea;
text-decoration: none;
padding: 10px 20px;
border-radius: 5px;
transition: all 0.3s;
background: #f0f0f0;
}
.nav a:hover {
background: #667eea;
color: white;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.card {
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.card h2 {
color: #667eea;
margin-bottom: 15px;
font-size: 1.5em;
}
.card p {
margin-bottom: 10px;
color: #666;
}
.card ul {
margin-left: 20px;
color: #666;
}
.badge {
display: inline-block;
padding: 5px 10px;
background: #667eea;
color: white;
border-radius: 5px;
font-size: 0.8em;
margin-right: 5px;
margin-bottom: 5px;
}
.status {
display: inline-block;
padding: 5px 10px;
border-radius: 5px;
font-size: 0.9em;
font-weight: bold;
}
.status.ready {
background: #10b981;
color: white;
}
.status.in-progress {
background: #f59e0b;
color: white;
}
.feature-list {
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
.feature-list h2 {
color: #667eea;
margin-bottom: 20px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
}
.feature-item {
padding: 15px;
background: #f9fafb;
border-left: 4px solid #667eea;
border-radius: 5px;
}
.feature-item h3 {
color: #333;
margin-bottom: 10px;
font-size: 1.1em;
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background: white;
padding: 20px;
border-radius: 10px;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.stat-number {
font-size: 2.5em;
font-weight: bold;
color: #667eea;
margin-bottom: 10px;
}
.stat-label {
color: #666;
font-size: 0.9em;
}
footer {
background: white;
padding: 20px;
text-align: center;
border-radius: 10px;
margin-top: 30px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
color: #666;
}
.code-block {
background: #1e1e1e;
color: #d4d4d4;
padding: 20px;
border-radius: 5px;
overflow-x: auto;
font-family: 'Courier New', monospace;
margin: 15px 0;
}
@media (max-width: 768px) {
h1 {
font-size: 2em;
}
.grid {
grid-template-columns: 1fr;
}
.nav ul {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>🚀 Enhanced MCP Server</h1>
<p class="subtitle">Production-Grade Google Services Integration with LLM Fallback System</p>
<p style="margin-top: 15px;">
<span class="status ready">Production Ready</span>
<span class="status in-progress">Comprehensive Documentation</span>
</p>
</header>
<nav class="nav">
<ul>
<li><a href="#overview">Overview</a></li>
<li><a href="architecture.html">Architecture</a></li>
<li><a href="llm_fallback.html">LLM Fallback</a></li>
<li><a href="workflows.html">Workflows</a></li>
<li><a href="api_reference.html">API Reference</a></li>
<li><a href="deployment.html">Deployment</a></li>
<li><a href="diagrams/">Diagrams</a></li>
</ul>
</nav>
<div class="stats">
<div class="stat-card">
<div class="stat-number">30+</div>
<div class="stat-label">MCP Tools</div>
</div>
<div class="stat-card">
<div class="stat-number">6</div>
<div class="stat-label">Google APIs</div>
</div>
<div class="stat-card">
<div class="stat-number">4</div>
<div class="stat-label">LLM Providers</div>
</div>
<div class="stat-card">
<div class="stat-number">5+</div>
<div class="stat-label">Workflows</div>
</div>
</div>
<div id="overview" class="feature-list">
<h2>📚 System Overview</h2>
<p>A production-grade MCP (Model Context Protocol) server that integrates Google services (Gmail, Calendar, Drive, Sheets, Keep) with an intelligent LLM fallback system supporting multiple providers (Euri, Deepseek, Gemini, Claude).</p>
<h3 style="margin-top: 20px; margin-bottom: 15px;">Key Highlights</h3>
<div class="feature-grid">
<div class="feature-item">
<h3>🔄 LLM Fallback System</h3>
<p>Automatic provider switching: Euri → Deepseek → Gemini → Claude</p>
<ul style="margin-top: 10px; margin-left: 20px;">
<li>Circuit breaker pattern</li>
<li>Rate limiting</li>
<li>Health monitoring</li>
<li>Cost tracking</li>
</ul>
</div>
<div class="feature-item">
<h3>📧 Email Intelligence</h3>
<p>Advanced email processing with AI</p>
<ul style="margin-top: 10px; margin-left: 20px;">
<li>Auto-categorization</li>
<li>Smart summaries every 4 hours</li>
<li>Calendar invite extraction</li>
<li>Follow-up reminders</li>
</ul>
</div>
<div class="feature-item">
<h3>📅 Calendar Management</h3>
<p>Intelligent calendar operations</p>
<ul style="margin-top: 10px; margin-left: 20px;">
<li>Conflict detection</li>
<li>Smart reminders</li>
<li>Focus time blocking</li>
<li>Daily/weekly summaries</li>
</ul>
</div>
<div class="feature-item">
<h3>💼 Job Application Tracking</h3>
<p>Comprehensive application management</p>
<ul style="margin-top: 10px; margin-left: 20px;">
<li>Auto-detection from emails</li>
<li>Status tracking</li>
<li>Follow-up reminders</li>
<li>Weekly summaries</li>
</ul>
</div>
<div class="feature-item">
<h3>🔔 Intelligent Notifications</h3>
<p>Context-aware notification system</p>
<ul style="margin-top: 10px; margin-left: 20px;">
<li>Meeting reminders (15m, 1h, 1d)</li>
<li>Email follow-ups</li>
<li>Daily digest</li>
<li>Weekly review</li>
</ul>
</div>
<div class="feature-item">
<h3>📁 Google Drive Integration</h3>
<p>Document search and management</p>
<ul style="margin-top: 10px; margin-left: 20px;">
<li>Search across Drive</li>
<li>Document summarization</li>
<li>Email attachments</li>
<li>Multiple format support</li>
</ul>
</div>
</div>
</div>
<div class="grid">
<div class="card">
<h2>🏗️ Architecture</h2>
<p>Production-grade architecture with:</p>
<ul>
<li>Modular adapter pattern</li>
<li>LangGraph workflows</li>
<li>Async/await throughout</li>
<li>Type-safe with Pydantic</li>
<li>Comprehensive error handling</li>
<li>Structured logging</li>
</ul>
<p style="margin-top: 15px;">
<span class="badge">Python 3.8+</span>
<span class="badge">MCP 0.9.0+</span>
<span class="badge">LangChain</span>
<span class="badge">LangGraph</span>
</p>
</div>
<div class="card">
<h2>🔐 Security</h2>
<p>Enterprise-grade security features:</p>
<ul>
<li>OAuth 2.0 authentication</li>
<li>Token encryption</li>
<li>API key management</li>
<li>Rate limiting per tool</li>
<li>Audit logging</li>
<li>Environment-based config</li>
</ul>
</div>
<div class="card">
<h2>📊 Monitoring</h2>
<p>Comprehensive observability:</p>
<ul>
<li>Structured JSON logging</li>
<li>LLM usage tracking</li>
<li>Cost monitoring</li>
<li>Health checks</li>
<li>Performance metrics</li>
<li>Error rate tracking</li>
</ul>
</div>
<div class="card">
<h2>⚡ Performance</h2>
<p>Optimized for speed and reliability:</p>
<ul>
<li>Connection pooling</li>
<li>Result caching</li>
<li>Batch operations</li>
<li>Async processing</li>
<li>Circuit breakers</li>
<li>Smart retry logic</li>
</ul>
</div>
</div>
<div class="feature-list">
<h2>🚀 Quick Start</h2>
<div class="code-block">
# 1. Clone and install
cd enhanced-mcp-server
pip install -r requirements.txt
# 2. Setup environment
cp .env.example .env
# Edit .env with your API keys
# 3. Run setup (Google OAuth)
python src/setup.py
# 4. Configure Claude Desktop
# Edit: %APPDATA%\Claude\claude_desktop_config.json
# 5. Restart Claude Desktop
# Your tools will appear automatically!
</div>
</div>
<div class="feature-list">
<h2>📖 Documentation Sections</h2>
<div class="grid">
<div class="card">
<h2><a href="architecture.html" style="color: #667eea; text-decoration: none;">System Architecture</a></h2>
<p>Complete system architecture with Mermaid diagrams showing component interactions, data flow, and system boundaries.</p>
</div>
<div class="card">
<h2><a href="llm_fallback.html" style="color: #667eea; text-decoration: none;">LLM Fallback System</a></h2>
<p>Detailed documentation of the multi-provider LLM fallback system with circuit breaker patterns and health monitoring.</p>
</div>
<div class="card">
<h2><a href="workflows.html" style="color: #667eea; text-decoration: none;">Workflows</a></h2>
<p>LangGraph workflow documentation with visual diagrams for email processing, calendar management, and job tracking.</p>
</div>
<div class="card">
<h2><a href="api_reference.html" style="color: #667eea; text-decoration: none;">API Reference</a></h2>
<p>Complete API documentation for all 30+ MCP tools, including parameters, return types, and usage examples.</p>
</div>
<div class="card">
<h2><a href="deployment.html" style="color: #667eea; text-decoration: none;">Deployment Guide</a></h2>
<p>Step-by-step deployment instructions including Google Cloud setup, API configuration, and Claude Desktop integration.</p>
</div>
<div class="card">
<h2><a href="diagrams/" style="color: #667eea; text-decoration: none;">Visual Diagrams</a></h2>
<p>Collection of Mermaid diagrams showing system flows, state machines, sequence diagrams, and architecture.</p>
</div>
</div>
</div>
<div class="feature-list">
<h2>🎯 Use Cases</h2>
<div class="feature-grid">
<div class="feature-item">
<h3>Email Management</h3>
<p>"Summarize my unread work emails from the last 24 hours"</p>
<p>"Find all emails about job applications this week"</p>
</div>
<div class="feature-item">
<h3>Calendar Optimization</h3>
<p>"Find a 2-hour slot for focus time this week"</p>
<p>"Check my calendar for conflicts tomorrow"</p>
</div>
<div class="feature-item">
<h3>Job Tracking</h3>
<p>"Show me all job applications I haven't heard back from"</p>
<p>"Add follow-up reminder for X company in 3 days"</p>
</div>
<div class="feature-item">
<h3>Document Search</h3>
<p>"Find my resume in Google Drive"</p>
<p>"Summarize the Q4 report document"</p>
</div>
</div>
</div>
<footer>
<p><strong>Enhanced MCP Server</strong> - Production-Grade Google Services Integration</p>
<p style="margin-top: 10px;">Built with MCP, LangChain, LangGraph, and ❤️</p>
<p style="margin-top: 10px; font-size: 0.9em;">© 2024 | Version 1.0.0</p>
</footer>
</div>
</body>
</html>