http-client.html•9.35 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Cloud MCP HTTP Client Example</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.container {
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 200px;
font-family: monospace;
}
button {
background: #4285f4;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
margin: 5px;
}
button:hover {
background: #3367d6;
}
button:disabled {
background: #ccc;
cursor: not-allowed;
}
.status {
padding: 10px;
border-radius: 4px;
margin: 10px 0;
}
.status.connected {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.status.disconnected {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.log {
background: #f8f9fa;
border: 1px solid #dee2e6;
padding: 10px;
height: 300px;
overflow-y: auto;
font-family: monospace;
font-size: 12px;
}
</style>
</head>
<body>
<h1>Google Cloud MCP HTTP Client Example</h1>
<div class="container">
<div id="status" class="status disconnected">Disconnected</div>
<button id="connectBtn" onclick="connect()">Connect</button>
<button id="disconnectBtn" onclick="disconnect()" disabled>Disconnect</button>
</div>
<div class="container">
<h3>Send MCP Message</h3>
<textarea id="messageInput" placeholder="Enter JSON-RPC message here...">
{
"jsonrpc": "2.0",
"id": 1,
"method": "initialize",
"params": {
"protocolVersion": "2024-11-05",
"capabilities": {
"roots": {
"listChanged": true
},
"sampling": {}
},
"clientInfo": {
"name": "test-client",
"version": "1.0.0"
}
}
}
</textarea>
<button id="sendBtn" onclick="sendMessage()" disabled>Send Message</button>
</div>
<div class="container">
<h3>Log</h3>
<div id="log" class="log"></div>
<button onclick="clearLog()">Clear Log</button>
</div>
<script>
let eventSource = null;
let sessionId = null;
const SERVER_URL = 'http://localhost:3001';
function log(message, type = 'info') {
const logElement = document.getElementById('log');
const timestamp = new Date().toISOString();
const entry = `[${timestamp}] [${type.toUpperCase()}] ${message}\n`;
logElement.textContent += entry;
logElement.scrollTop = logElement.scrollHeight;
}
function updateStatus(connected) {
const statusElement = document.getElementById('status');
const connectBtn = document.getElementById('connectBtn');
const disconnectBtn = document.getElementById('disconnectBtn');
const sendBtn = document.getElementById('sendBtn');
if (connected) {
statusElement.textContent = `Connected (Session: ${sessionId})`;
statusElement.className = 'status connected';
connectBtn.disabled = true;
disconnectBtn.disabled = false;
sendBtn.disabled = false;
} else {
statusElement.textContent = 'Disconnected';
statusElement.className = 'status disconnected';
connectBtn.disabled = false;
disconnectBtn.disabled = true;
sendBtn.disabled = true;
}
}
async function connect() {
try {
log('Attempting to connect to MCP server...');
// Establish SSE connection
eventSource = new EventSource(`${SERVER_URL}/mcp`);
eventSource.onopen = function(event) {
// Extract session ID from response headers (if available)
sessionId = event.target.url.includes('session') ? 'auto-generated' : 'server-assigned';
log('SSE connection established');
updateStatus(true);
};
eventSource.onmessage = function(event) {
log(`Received SSE message: ${event.data}`, 'response');
try {
const data = JSON.parse(event.data);
if (data.id) {
log(`Response to request ${data.id}: ${JSON.stringify(data, null, 2)}`, 'response');
}
} catch (e) {
log(`Raw SSE data: ${event.data}`, 'response');
}
};
eventSource.onerror = function(event) {
log('SSE connection error', 'error');
console.error('SSE error:', event);
disconnect();
};
// Get session ID from the initial connection
// In a real implementation, you'd get this from response headers
sessionId = 'session-' + Math.random().toString(36).substr(2, 9);
} catch (error) {
log(`Connection failed: ${error.message}`, 'error');
}
}
function disconnect() {
if (eventSource) {
eventSource.close();
eventSource = null;
}
sessionId = null;
updateStatus(false);
log('Disconnected from server');
}
async function sendMessage() {
if (!sessionId) {
log('Not connected to server', 'error');
return;
}
const messageText = document.getElementById('messageInput').value.trim();
if (!messageText) {
log('No message to send', 'error');
return;
}
try {
const message = JSON.parse(messageText);
log(`Sending message: ${JSON.stringify(message, null, 2)}`, 'request');
const response = await fetch(`${SERVER_URL}/mcp`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-mcp-session-id': sessionId
},
body: JSON.stringify(message)
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const responseData = await response.json();
log(`Response: ${JSON.stringify(responseData, null, 2)}`, 'response');
// Update session ID if returned in headers
const newSessionId = response.headers.get('x-mcp-session-id');
if (newSessionId && newSessionId !== sessionId) {
sessionId = newSessionId;
updateStatus(true);
log(`Session ID updated: ${sessionId}`);
}
} catch (error) {
log(`Send failed: ${error.message}`, 'error');
}
}
function clearLog() {
document.getElementById('log').textContent = '';
}
// Check server health on page load
async function checkHealth() {
try {
const response = await fetch(`${SERVER_URL}/health`);
if (response.ok) {
const health = await response.json();
log(`Server health check: ${JSON.stringify(health)}`);
} else {
log('Server health check failed', 'error');
}
} catch (error) {
log(`Health check error: ${error.message}`, 'error');
}
}
// Load capabilities on page load
async function loadCapabilities() {
try {
const response = await fetch(`${SERVER_URL}/capabilities`);
if (response.ok) {
const capabilities = await response.json();
log(`Server capabilities: ${JSON.stringify(capabilities, null, 2)}`);
} else {
log('Failed to load capabilities', 'error');
}
} catch (error) {
log(`Capabilities error: ${error.message}`, 'error');
}
}
// Initialize
window.onload = function() {
log('Client initialized');
checkHealth();
loadCapabilities();
};
// Handle page close
window.onbeforeunload = function() {
disconnect();
};
</script>
</body>
</html>