modular_integration.html•11.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LocalMCP - Modular Integration Architecture</title>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<style>
body {
background-color: #0F1419;
color: #E2E8F0;
font-family: 'Inter', system-ui, sans-serif;
padding: 40px;
line-height: 1.6;
}
h1 {
text-align: center;
background: linear-gradient(135deg, #B794F4 0%, #F687B3 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 40px;
}
.mermaid {
background-color: #1A202C;
padding: 30px;
border-radius: 12px;
margin: 30px auto;
border: 2px solid #2D3748;
max-width: 1200px;
}
.section {
background-color: #1A202C;
padding: 30px;
border-radius: 12px;
margin: 30px auto;
max-width: 1200px;
border: 1px solid #2D3748;
}
h2 {
color: #90CDF4;
margin-bottom: 20px;
}
.integration-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 20px 0;
}
.integration-card {
background-color: #2D3748;
padding: 20px;
border-radius: 8px;
border: 1px solid #4A5568;
}
.integration-card h3 {
color: #9AE6B4;
margin-bottom: 10px;
}
code {
background-color: #2D3748;
padding: 2px 6px;
border-radius: 4px;
font-family: 'Consolas', monospace;
color: #F687B3;
}
.code-block {
background-color: #1A202C;
border: 1px solid #4A5568;
border-radius: 8px;
padding: 20px;
margin: 15px 0;
overflow-x: auto;
font-family: 'Consolas', monospace;
color: #F7FAFC;
}
</style>
</head>
<body>
<h1>LocalMCP Modular Integration Architecture</h1>
<div class="mermaid">
graph TB
subgraph "External Systems"
WEB[Web Applications]
MOB[Mobile Apps]
CLI[CLI Tools]
IOT[IoT Devices]
ENT[Enterprise Systems]
end
subgraph "Integration Layer"
API[REST API]
WS[WebSocket]
GQL[GraphQL]
GRPC[gRPC]
MQ[Message Queue]
end
subgraph "LocalMCP Core"
ORCH[Orchestrator]
CB[Circuit Breaker]
CACHE[Cache Manager]
AUTH[Auth Manager]
end
subgraph "MCP Ecosystem"
MCP1[File System MCP]
MCP2[Database MCP]
MCP3[Custom Tools MCP]
MCP4[Cloud Services MCP]
end
subgraph "LLM Providers"
OAI[OpenAI]
ANT[Anthropic]
GEM[Google Gemini]
LOC[Local Models]
end
subgraph "Data Layer"
PG[PostgreSQL]
REDIS[Redis]
S3[S3/Blob Storage]
VEC[Vector DB]
end
subgraph "Monitoring"
PROM[Prometheus]
GRAF[Grafana]
LOG[Loki/ELK]
TRACE[Jaeger]
end
WEB --> API
MOB --> API
CLI --> GRPC
IOT --> MQ
ENT --> WS
API --> ORCH
WS --> ORCH
GQL --> ORCH
GRPC --> ORCH
MQ --> ORCH
ORCH --> CB
ORCH --> CACHE
ORCH --> AUTH
CB --> MCP1
CB --> MCP2
CB --> MCP3
CB --> MCP4
ORCH --> OAI
ORCH --> ANT
ORCH --> GEM
ORCH --> LOC
CACHE --> REDIS
ORCH --> PG
MCP1 --> S3
ORCH --> VEC
ORCH --> PROM
CB --> PROM
CACHE --> PROM
PROM --> GRAF
ORCH --> LOG
ORCH --> TRACE
style WEB fill:#FED7E2,stroke:#F687B3
style MOB fill:#FED7E2,stroke:#F687B3
style CLI fill:#FED7E2,stroke:#F687B3
style IOT fill:#FED7E2,stroke:#F687B3
style ENT fill:#FED7E2,stroke:#F687B3
style API fill:#BEE3F8,stroke:#63B3ED
style WS fill:#BEE3F8,stroke:#63B3ED
style GQL fill:#BEE3F8,stroke:#63B3ED
style GRPC fill:#BEE3F8,stroke:#63B3ED
style MQ fill:#BEE3F8,stroke:#63B3ED
style ORCH fill:#E9D8FD,stroke:#B794F4
style CB fill:#E9D8FD,stroke:#B794F4
style CACHE fill:#E9D8FD,stroke:#B794F4
style AUTH fill:#E9D8FD,stroke:#B794F4
style MCP1 fill:#FEFCBF,stroke:#F6E05E
style MCP2 fill:#FEFCBF,stroke:#F6E05E
style MCP3 fill:#FEFCBF,stroke:#F6E05E
style MCP4 fill:#FEFCBF,stroke:#F6E05E
style OAI fill:#FED7AA,stroke:#F6AD55
style ANT fill:#FED7AA,stroke:#F6AD55
style GEM fill:#FED7AA,stroke:#F6AD55
style LOC fill:#FED7AA,stroke:#F6AD55
style PG fill:#C6F6D5,stroke:#68D391
style REDIS fill:#C6F6D5,stroke:#68D391
style S3 fill:#C6F6D5,stroke:#68D391
style VEC fill:#C6F6D5,stroke:#68D391
style PROM fill:#FBBF24,stroke:#F59E0B
style GRAF fill:#FBBF24,stroke:#F59E0B
style LOG fill:#FBBF24,stroke:#F59E0B
style TRACE fill:#FBBF24,stroke:#F59E0B
</div>
<div class="section">
<h2>Integration Methods</h2>
<div class="integration-grid">
<div class="integration-card">
<h3>REST API Integration</h3>
<p>Standard HTTP endpoints for request/response patterns</p>
<div class="code-block">
POST /api/v1/execute
{
"command": "analyze this document",
"context": {"doc_id": "123"}
}</div>
</div>
<div class="integration-card">
<h3>WebSocket Streaming</h3>
<p>Real-time bidirectional communication for live interactions</p>
<div class="code-block">
ws.send({"type": "execute", "command": "..."});
ws.on('message', (data) => {
// Handle streaming results
});</div>
</div>
<div class="integration-card">
<h3>Message Queue</h3>
<p>Async processing via Redis, RabbitMQ, or Kafka</p>
<div class="code-block">
# Publish task
queue.publish('mcp.tasks', {
task: 'process_document',
params: {...}
})</div>
</div>
<div class="integration-card">
<h3>gRPC Service</h3>
<p>High-performance RPC for microservice communication</p>
<div class="code-block">
service MCPService {
rpc Execute(ExecuteRequest)
returns (stream ExecuteResponse);
}</div>
</div>
<div class="integration-card">
<h3>GraphQL API</h3>
<p>Flexible queries for complex data requirements</p>
<div class="code-block">
query ExecuteTool {
execute(command: "...") {
result
toolsUsed { name duration }
}
}</div>
</div>
<div class="integration-card">
<h3>SDK Libraries</h3>
<p>Native libraries for Python, JS, Go, Java</p>
<div class="code-block">
from localmcp import Client
client = Client("http://localhost:8000")
result = await client.execute("...")</div>
</div>
</div>
</div>
<div class="section">
<h2>Plugin Architecture</h2>
<div class="code-block">
class CustomPlugin(MCPPlugin):
"""Example plugin for custom integration"""
async def on_tool_discovery(self, tools):
# Filter or enhance available tools
return [t for t in tools if t.security_level <= self.max_level]
async def on_pre_execution(self, tool_call):
# Add authentication headers
tool_call.headers['X-Custom-Auth'] = self.get_auth_token()
async def on_post_execution(self, result):
# Send to analytics system
await self.analytics.track('tool_executed', {
'tool': result.tool_name,
'duration': result.duration,
'success': result.success
})
</div>
</div>
<div class="section">
<h2>Deployment Patterns</h2>
<div class="integration-grid">
<div class="integration-card">
<h3>Sidecar Pattern</h3>
<p>Deploy LocalMCP alongside your main application</p>
<ul>
<li>Low latency communication</li>
<li>Shared resources</li>
<li>Simple service discovery</li>
</ul>
</div>
<div class="integration-card">
<h3>Gateway Pattern</h3>
<p>LocalMCP as API gateway for AI capabilities</p>
<ul>
<li>Centralized AI services</li>
<li>Load balancing</li>
<li>Rate limiting</li>
</ul>
</div>
<div class="integration-card">
<h3>Microservice Pattern</h3>
<p>LocalMCP as independent microservice</p>
<ul>
<li>Independent scaling</li>
<li>Technology agnostic</li>
<li>Clear boundaries</li>
</ul>
</div>
</div>
</div>
<script>
mermaid.initialize({
startOnLoad: true,
theme: 'dark',
themeVariables: {
primaryColor: '#2D3748',
primaryTextColor: '#F7FAFC',
primaryBorderColor: '#B794F4',
lineColor: '#FBB6CE',
secondaryColor: '#90CDF4',
tertiaryColor: '#9AE6B4',
background: '#1A202C',
mainBkg: '#2D3748',
secondBkg: '#4A5568',
fontSize: '14px'
}
});
</script>
</body>
</html>