test-frontend.html•5.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP Trader - Test Frontend</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
h1 {
color: #333;
text-align: center;
}
.status {
padding: 10px;
border-radius: 4px;
margin-bottom: 15px;
}
.connected {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.disconnected {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.tool {
padding: 10px;
margin: 10px 0;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
background: #007bff;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
}
button:hover {
background: #0056b3;
}
#results {
background: #f8f9fa;
padding: 15px;
border-radius: 4px;
font-family: monospace;
white-space: pre-wrap;
}
</style>
</head>
<body>
<h1>🤖 MCP Trader - Test Frontend</h1>
<div class="container">
<h2>System Status</h2>
<div id="status" class="status">Checking connections...</div>
</div>
<div class="container">
<h2>MCP Tools</h2>
<div class="tool">
<button onclick="callTool('get_market_data')">📊 Get Market Data</button>
<button onclick="callTool('get_mlp_signal')">🤖 Get MLP Signal</button>
<button onclick="callTool('get_trade_history')">📈 Get Trade History</button>
<button onclick="callTool('get_performance')">📊 Get Performance</button>
</div>
<div class="tool">
<button onclick="callTool('get_portfolio')">💼 Get Portfolio</button>
<button onclick="callTool('get_bot_status')">⚙️ Get Bot Status</button>
<button onclick="clearResults()">🧹 Clear Results</button>
</div>
</div>
<div class="container">
<h2>Results</h2>
<pre id="results"></pre>
</div>
<script>
async function checkStatus() {
try {
const response = await fetch('/health');
const data = await response.json();
document.getElementById('status').className = 'status connected';
document.getElementById('status').textContent = `✅ MCP Server Connected - ${new Date(data.timestamp).toLocaleTimeString()}`;
} catch (error) {
document.getElementById('status').className = 'status disconnected';
document.getElementById('status').textContent = '❌ MCP Server Disconnected';
}
}
async function callTool(toolName) {
try {
const response = await fetch('/tools/call', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
tool: toolName,
parameters: toolName === 'get_trade_history' ? { limit: 3 } : {}
})
});
const data = await response.json();
const resultDiv = document.getElementById('results');
const timestamp = new Date().toLocaleTimeString();
const toolResult = data.content && data.content[0] ? data.content[0].text : JSON.stringify(data, null, 2);
resultDiv.innerHTML += `[${timestamp}] ${toolName.toUpperCase()}:\n${toolResult}\n\n`;
resultDiv.scrollTop = resultDiv.scrollHeight;
} catch (error) {
const resultDiv = document.getElementById('results');
resultDiv.innerHTML += `[ERROR] ${toolName}: ${error.message}\n\n`;
}
}
function clearResults() {
document.getElementById('results').innerHTML = '';
}
// Check status initially and every 10 seconds
checkStatus();
setInterval(checkStatus, 10000);
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('results').innerHTML = '[INFO] MCP Trader Test Frontend Loaded\n[INFO] Click buttons to test MCP tools\n\n';
});
</script>
</body>
</html>