<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Claude MCP Server Gateway - Works with Claude Desktop, Claude Code, and Cline</title>
<meta name="description" content="Claude MCP Server Gateway works with Claude Desktop, Claude Code, and Cline. Reduces token usage by 95% through intelligent MCP server management.">
<meta name="keywords" content="claude mcp server, mcp server gateway, claude desktop, claude code, cline, model context protocol, python mcp server, token optimization">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://bzsasson.github.io/claude-mcp-server-gateway/">
<meta property="og:title" content="Claude MCP Server Gateway">
<meta property="og:description" content="Gateway for Claude Desktop, Claude Code, and Cline MCP servers. Reduce token usage by 95%.">
<meta property="og:image" content="https://opengraph.githubassets.com/1/bzsasson/claude-mcp-server-gateway">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://bzsasson.github.io/claude-mcp-server-gateway/">
<meta property="twitter:title" content="Claude MCP Server Gateway">
<meta property="twitter:description" content="Gateway for Claude Desktop, Claude Code, and Cline MCP servers. Reduce token usage by 95%.">
<meta property="twitter:image" content="https://opengraph.githubassets.com/1/bzsasson/claude-mcp-server-gateway">
<!-- Canonical URL -->
<link rel="canonical" href="https://bzsasson.github.io/claude-mcp-server-gateway/">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
line-height: 1.6;
color: #333;
background: #f5f5f5;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
}
header {
background: linear-gradient(135deg, #6B46C1 0%, #4F46E5 100%);
color: white;
padding: 60px 20px;
text-align: center;
}
h1 {
font-size: 2.5em;
margin-bottom: 15px;
font-weight: 700;
}
.subtitle {
font-size: 1.3em;
margin-bottom: 30px;
opacity: 1.0;
color: white;
font-weight: 500;
}
.cta-button {
display: inline-block;
background: white;
color: #4F46E5;
padding: 15px 35px;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
font-size: 1.1em;
margin: 10px;
transition: transform 0.2s, box-shadow 0.2s;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.cta-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin: 60px auto;
padding: 0 20px;
}
.stat-card {
background: white;
padding: 40px 30px;
border-radius: 12px;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.2s;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.stat-number {
font-size: 3em;
font-weight: bold;
color: #6B46C1;
margin-bottom: 10px;
}
.stat-label {
font-size: 1.1em;
color: #666;
}
.content-section {
background: white;
margin: 40px auto;
padding: 50px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
h2 {
color: #6B46C1;
font-size: 2em;
margin-bottom: 20px;
}
h3 {
color: #4F46E5;
font-size: 1.5em;
margin: 30px 0 15px 0;
}
p {
margin-bottom: 15px;
line-height: 1.8;
color: #555;
}
ul {
margin: 20px 0 20px 30px;
}
li {
margin-bottom: 12px;
line-height: 1.6;
color: #555;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin: 30px 0;
}
.feature-box {
padding: 25px;
background: #f9f9f9;
border-radius: 8px;
border-left: 4px solid #6B46C1;
}
.feature-box h4 {
color: #4F46E5;
margin-bottom: 10px;
}
code {
background: #f4f4f4;
padding: 2px 8px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
}
pre {
background: #1e1e1e;
color: #d4d4d4;
padding: 20px;
border-radius: 8px;
overflow-x: auto;
margin: 20px 0;
}
pre code {
background: none;
padding: 0;
color: #d4d4d4;
}
footer {
background: #2d2d2d;
color: white;
text-align: center;
padding: 40px 20px;
margin-top: 60px;
}
footer a {
color: #4F46E5;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
h1 {
font-size: 2em;
}
.subtitle {
font-size: 1.1em;
}
.content-section {
padding: 30px 20px;
}
.stat-number {
font-size: 2.5em;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>Claude MCP Server Gateway</h1>
<p class="subtitle">Load MCP tools only when needed, not all at once</p>
<p style="font-size: 1.2em; margin-bottom: 30px; color: white; opacity: 1.0;">Works with Claude Desktop, Claude Code, and Cline (VSCode)</p>
<div>
<a href="https://github.com/bzsasson/claude-mcp-server-gateway" class="cta-button">View on GitHub</a>
<a href="#installation" class="cta-button cta-secondary">Quick Start Guide</a>
</div>
</div>
</header>
<div class="container">
<div class="content-section" style="background: #fff3cd; border-left: 4px solid #ffc107; margin-top: 60px;">
<h2 style="color: #856404;">The Problem: Context Window Bloat</h2>
<p>When you install multiple MCP servers in Claude Desktop, Claude Code, or Cline, each one loads ALL its tools immediately.</p>
<ul>
<li><strong>GitHub MCP:</strong> 25+ tools loaded at startup</li>
<li><strong>Google Workspace:</strong> 35+ tools for Gmail, Drive, Calendar, Sheets</li>
<li><strong>DataForSEO:</strong> 30+ tools for keyword research and SEO</li>
<li><strong>Context7:</strong> 15+ tools for code documentation</li>
</ul>
<p><strong>Result:</strong> 100+ tool definitions consuming 15,000+ tokens (85% of your context window) before your conversation even starts.</p>
<p><strong>This causes:</strong> Higher API costs, slower responses, reduced reasoning capacity, and potential token limit errors.</p>
</div>
<div class="stats">
<div class="stat-card">
<div class="stat-number">~300</div>
<div class="stat-label">Tokens at Startup</div>
</div>
<div class="stat-card">
<div class="stat-number">vs 15,000+</div>
<div class="stat-label">Without Gateway</div>
</div>
<div class="stat-card">
<div class="stat-number">3 Platforms</div>
<div class="stat-label">Desktop, Code, Cline</div>
</div>
</div>
<div class="content-section">
<h2>Compatibility</h2>
<p><strong>Works with any Model Context Protocol server</strong></p>
<p>Python, Node.js, TypeScript, or custom implementations. If it follows the MCP specification, the gateway can manage it. No modifications needed to your existing MCP servers.</p>
</div>
<div class="content-section">
<h2>Platform Support</h2>
<p>The Claude MCP Server Gateway works seamlessly with all major Claude platforms:</p>
<div class="feature-grid">
<div class="feature-box">
<h4>Claude Desktop</h4>
<p>Native desktop application with full MCP support. Configure via <code>claude_desktop_config.json</code></p>
</div>
<div class="feature-box">
<h4>Claude Code</h4>
<p>Terminal-based Claude with project and user scopes. Configure via <code>.claude.json</code> or CLI</p>
</div>
<div class="feature-box">
<h4>Cline (VSCode)</h4>
<p>VSCode extension for Claude. Configure via <code>cline_mcp_settings.json</code></p>
</div>
</div>
</div>
<div class="content-section">
<h2>The Solution: 3-Level Dynamic Loading</h2>
<p>A Python-based gateway that acts as a master MCP server, intelligently routing requests to other Model Context Protocol servers only when their tools are needed.</p>
<p>Instead of loading all tools at once, the gateway uses a three-tier loading strategy:</p>
<h3>Level 1: Server Discovery (~100 tokens)</h3>
<p>Claude sees a lightweight list of available MCP servers with brief descriptions.</p>
<p style="background: #f0f0f0; padding: 15px; border-radius: 6px; font-style: italic;">Example: "GitHub MCP available - Provides repository and code management tools"</p>
<h3>Level 2: Tool Summaries (~200 tokens when needed)</h3>
<p>When you mention a specific server, the gateway loads brief descriptions of its available tools.</p>
<p style="background: #f0f0f0; padding: 15px; border-radius: 6px; font-style: italic;">Example: You ask about GitHub, Gateway loads: "create_issue, search_repos, get_file_contents..."</p>
<h3>Level 3: Active Tools (only what you use)</h3>
<p>Finally, only the specific tools you need are loaded with their full definitions.</p>
<p style="background: #f0f0f0; padding: 15px; border-radius: 6px; font-style: italic;">Example: You say "search my repos", Gateway loads only search_repositories</p>
<div style="background: #e8f5e9; padding: 20px; border-radius: 8px; margin: 20px 0;">
<p style="margin: 0;"><strong>Key Insight:</strong> The gateway loads tools on a need-to-know basis. Each MCP server can contain 20-50 tools, but you typically only use 2-3 per conversation.</p>
</div>
<div style="background: #f9f9f9; padding: 20px; border-radius: 8px; margin: 20px 0;">
<p style="margin: 0;"><strong>Traditional Approach:</strong> Claude loads ALL 100+ tools (15,000 tokens), Context saturated</p>
<p style="margin: 10px 0 0 0;"><strong>Gateway Approach:</strong> Claude loads 3 gateway tools (300 tokens), Load as needed, 95% token savings</p>
</div>
</div>
<div class="content-section">
<h2>Why Use a Gateway?</h2>
<div class="feature-grid">
<div class="feature-box">
<h4>Token Optimization</h4>
<p>Load tools on-demand instead of all at once. Reduce initial token usage from 10,000+ to just 300 tokens.</p>
</div>
<div class="feature-box">
<h4>Better Performance</h4>
<p>Claude processes 3 tools faster than 100+. Faster response times and more accurate tool selection.</p>
</div>
<div class="feature-box">
<h4>Error Isolation</h4>
<p>MCP server failures don't affect others. Each server operates independently.</p>
</div>
<div class="feature-box">
<h4>Central Management</h4>
<p>Configure all MCP servers in one place. Single point of control for your entire MCP ecosystem.</p>
</div>
</div>
</div>
<div class="content-section" id="installation">
<h2>Quick Installation</h2>
<pre><code># Clone the gateway
git clone https://github.com/bzsasson/claude-mcp-server-gateway.git
cd claude-mcp-server-gateway
# Install dependencies
pip install -r requirements.txt
# Configure your MCP servers
cp .env.example .env
# Edit .env with your API keys
# Add to Claude Desktop, Claude Code, or Cline config
# See README for detailed instructions</code></pre>
</div>
<div class="content-section">
<h2>How to Configure for Each Platform</h2>
<h3>Claude Desktop MCP Server Configuration</h3>
<p>Add to <code>claude_desktop_config.json</code>:</p>
<pre><code>{
"mcpServers": {
"gateway": {
"command": "/path/to/.venv/bin/python",
"args": ["/path/to/claude-mcp-server-gateway/dcl_wrapper.py"]
}
}
}</code></pre>
<h3>How to Add MCP Server to Claude Code</h3>
<p>For Claude Code, add to <code>~/.claude.json</code>:</p>
<pre><code>{
"mcpServers": {
"gateway": {
"type": "stdio",
"command": "/path/to/.venv/bin/python",
"args": ["/path/to/claude-mcp-server-gateway/dcl_wrapper.py"]
}
}
}</code></pre>
<h3>Cline MCP Server Setup</h3>
<p>For Cline, add to <code>cline_mcp_settings.json</code>:</p>
<pre><code>{
"mcpServers": {
"gateway": {
"command": "/path/to/.venv/bin/python",
"args": ["/path/to/claude-mcp-server-gateway/dcl_wrapper.py"],
"disabled": false
}
}
}</code></pre>
</div>
<div class="content-section">
<h2>Performance Benchmarks</h2>
<p><strong>Understanding the token impact:</strong> Each tool definition that Claude loads includes the tool name, description, parameter schema, and examples, averaging ~150 tokens per tool.</p>
<p>Here's a real-world comparison with 5 common MCP servers:</p>
<div style="background: #f9f9f9; padding: 20px; border-radius: 8px; margin: 20px 0;">
<h4 style="margin-top: 0; color: #d32f2f;">Without Gateway (Traditional Setup)</h4>
<ul style="margin-left: 20px;">
<li>GitHub MCP: 25 tools × 150 tokens = 3,750 tokens</li>
<li>Google Workspace: 35 tools × 150 tokens = 5,250 tokens</li>
<li>DataForSEO MCP: 30 tools × 150 tokens = 4,500 tokens</li>
<li>Context7: 15 tools × 150 tokens = 2,250 tokens</li>
<li>Filesystem: 10 tools × 150 tokens = 1,500 tokens</li>
<li><strong>Total: 115 tools = ~17,250 tokens consumed at startup</strong></li>
<li style="color: #d32f2f;"><strong>That's 86% of Claude's context window gone before you even start!</strong></li>
</ul>
<h4 style="color: #2e7d32;">With Claude MCP Server Gateway</h4>
<ul style="margin-left: 20px;">
<li>Gateway tools: 3 tools × 100 tokens = 300 tokens at startup</li>
<li>Tools loaded on-demand: Only what you actually use (typically 1-3 tools per conversation)</li>
<li><strong>Average conversation: ~600-800 tokens total (300 + 2-3 tools)</strong></li>
<li style="color: #2e7d32;"><strong>Savings: 96% reduction in token usage!</strong></li>
</ul>
</div>
<p><strong>What this means for you:</strong></p>
<ul>
<li><strong>Lower costs:</strong> Pay only for the tokens you actually need</li>
<li><strong>Faster responses:</strong> Claude processes requests faster with less context</li>
<li><strong>Better reasoning:</strong> More context window available for your actual conversation</li>
<li><strong>No token limits:</strong> Room to add more MCP servers without hitting limits</li>
</ul>
</div>
<div class="content-section">
<h2>Getting Started</h2>
<p>Ready to optimize your Claude Desktop, Claude Code, or Cline setup?</p>
<div style="text-align: center; margin: 30px 0;">
<a href="https://github.com/bzsasson/claude-mcp-server-gateway#installation" class="cta-button">View Installation Guide</a>
<a href="https://github.com/bzsasson/claude-mcp-server-gateway/blob/main/CONTRIBUTING.md" class="cta-button cta-secondary" style="color: #4F46E5; border-color: #4F46E5;">Contribute</a>
</div>
</div>
</div>
<footer>
<div class="container">
<p style="margin-bottom: 15px;">Built with the <a href="https://modelcontextprotocol.io">Model Context Protocol</a></p>
<p style="margin-bottom: 15px;">For <a href="https://claude.ai">Claude Desktop</a>, <a href="https://docs.claude.com/en/docs/claude-code">Claude Code</a>, and <a href="https://cline.bot">Cline</a> | <a href="https://github.com/bzsasson/claude-mcp-server-gateway">GitHub Repository</a></p>
<p style="font-size: 0.9em; opacity: 0.8;">© 2025 Claude MCP Server Gateway | MIT License</p>
</div>
</footer>
</body>
</html>