<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP Server</title>
<link href="https://cdn.replit.com/agent/bootstrap-agent-dark-theme.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<header class="py-4 mb-4 border-bottom">
<div class="d-flex align-items-center">
<i class="fas fa-server me-3 fs-3"></i>
<h1 class="mb-0">Model Context Protocol Server</h1>
</div>
</header>
<div class="row">
<div class="col-md-8">
<div class="card mb-4">
<div class="card-header">
<h2 class="card-title mb-0">
<i class="fas fa-info-circle me-2"></i>
Server Information
</h2>
</div>
<div class="card-body">
<p class="card-text">
This is a Python Flask implementation of a Model Context Protocol (MCP) server
with JSON-RPC 2.0 support, resource management, tool execution, and LLM integration.
</p>
<div class="row">
<div class="col-md-6">
<h5><i class="fas fa-cogs me-2"></i>Capabilities</h5>
<ul class="list-unstyled">
<li><i class="fas fa-check text-success me-2"></i>Resources (File system access)</li>
<li><i class="fas fa-check text-success me-2"></i>Tools (sum_values, calculate)</li>
<li><i class="fas fa-check text-success me-2"></i>LLM Sampling (GPT-4o-mini)</li>
<li><i class="fas fa-check text-success me-2"></i>Server-Sent Events</li>
</ul>
</div>
<div class="col-md-6">
<h5><i class="fas fa-network-wired me-2"></i>Endpoints</h5>
<ul class="list-unstyled">
<li><code>POST /rpc</code> - JSON-RPC requests</li>
<li><code>GET /events</code> - SSE streaming</li>
<li><code>GET /metrics</code> - Prometheus metrics</li>
<li><code>GET /health</code> - Health check</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-header">
<h3 class="card-title mb-0">
<i class="fas fa-terminal me-2"></i>
API Testing
</h3>
</div>
<div class="card-body">
<div class="mb-3">
<label for="authToken" class="form-label">Authorization Token:</label>
<input type="text" class="form-control" id="authToken" value="devtoken" placeholder="Bearer token">
</div>
<div class="mb-3">
<label for="requestPayload" class="form-label">JSON-RPC Request:</label>
<textarea class="form-control" id="requestPayload" rows="8" style="font-family: monospace;">
[
{
"jsonrpc": "2.0",
"id": "1",
"method": "initialize",
"params": {
"protocolVersion": "2024-11-05",
"capabilities": {},
"clientInfo": {"name": "Test Client", "version": "1.0.0"}
}
}
]</textarea>
</div>
<button class="btn btn-primary me-2" onclick="sendRequest()">
<i class="fas fa-paper-plane me-1"></i>Send Request
</button>
<button class="btn btn-secondary me-2" onclick="loadExample('resources')">
<i class="fas fa-folder me-1"></i>Resources Example
</button>
<button class="btn btn-secondary me-2" onclick="loadExample('tools')">
<i class="fas fa-tools me-1"></i>Tools Example
</button>
<button class="btn btn-secondary" onclick="testSSE()">
<i class="fas fa-stream me-1"></i>Test SSE
</button>
<div id="response" class="mt-3"></div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-header">
<h3 class="card-title mb-0">
<i class="fas fa-book me-2"></i>
Quick Examples
</h3>
</div>
<div class="card-body">
<div class="accordion" id="examplesAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#curl-examples">
<i class="fas fa-code me-2"></i>cURL Examples
</button>
</h2>
<div id="curl-examples" class="accordion-collapse collapse" data-bs-parent="#examplesAccordion">
<div class="accordion-body">
<h6>Initialize:</h6>
<pre class="bg-dark p-2 rounded"><code>curl -X POST http://localhost:8000/rpc \
-H "Authorization: Bearer devtoken" \
-H "Content-Type: application/json" \
-d '[{"jsonrpc":"2.0","id":"1","method":"initialize","params":{"protocolVersion":"2024-11-05"}}]'</code></pre>
<h6 class="mt-3">List Resources:</h6>
<pre class="bg-dark p-2 rounded"><code>curl -X POST http://localhost:8000/rpc \
-H "Authorization: Bearer devtoken" \
-H "Content-Type: application/json" \
-d '[{"jsonrpc":"2.0","id":"1","method":"resources/list","params":{"base":"."}}]'</code></pre>
<h6 class="mt-3">Call Tool:</h6>
<pre class="bg-dark p-2 rounded"><code>curl -X POST http://localhost:8000/rpc \
-H "Authorization: Bearer devtoken" \
-H "Content-Type: application/json" \
-d '[{"jsonrpc":"2.0","id":"1","method":"tools/call","params":{"name":"sum_values","arguments":{"a":5,"b":3}}}]'</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title mb-0">
<i class="fas fa-chart-line me-2"></i>
SSE Stream
</h3>
</div>
<div class="card-body">
<div class="mb-3">
<label for="ssePrompt" class="form-label">Prompt:</label>
<input type="text" class="form-control" id="ssePrompt" value="Write a short poem about coding" placeholder="Enter your prompt">
</div>
<button class="btn btn-success mb-2" onclick="startSSE()">
<i class="fas fa-play me-1"></i>Start AI Stream
</button>
<button class="btn btn-info mb-2" onclick="testSSE()">
<i class="fas fa-vial me-1"></i>Test Stream (No AI)
</button>
<button class="btn btn-danger mb-2" onclick="stopSSE()" disabled id="stopBtn">
<i class="fas fa-stop me-1"></i>Stop Stream
</button>
<small class="text-muted d-block mb-3">Use "Test Stream" to verify SSE functionality without OpenAI API</small>
<div id="sseOutput" class="border rounded p-2 bg-dark" style="height: 300px; overflow-y: auto; font-family: monospace; font-size: 0.9em;"></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/static/app.js"></script>
</body>
</html>