<!DOCTYPE html>
<html>
<head>
<title>Dummy MCP Frontend</title>
<style>
body { font-family: Arial; background: #f2f2f2; }
.container { max-width: 500px; margin: 50px auto; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
input, select, textarea { width: 100%; padding: 10px; margin: 8px 0; border-radius: 4px; border: 1px solid #ccc; }
button { padding: 10px 20px; border: none; background: #1b7df0; color: white; border-radius: 4px; cursor: pointer; }
button:hover { opacity: 0.9; }
.dialog { display: none; position: fixed; top: 20%; left: 50%; transform: translateX(-50%); background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.dialog pre { background: #eee; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div class="container">
<h2>Dummy MCP Frontend</h2>
<label>Provider</label>
<select id="provider">
<option value="contabo">Contabo</option>
<option value="hetzner">Hetzner</option>
</select>
<label>Action</label>
<select id="action">
<option value="create_server">Create Server</option>
<option value="delete_server">Delete Server</option>
</select>
<label>Payload (JSON)</label>
<textarea id="payload" rows="5">
{"name": "test-server", "ram": "4GB"}
</textarea>
<button onclick="sendRequest()">Send Request</button>
</div>
<div class="dialog" id="dialog">
<h3>Response</h3>
<pre id="response"></pre>
<button onclick="closeDialog()">Close</button>
</div>
<script>
function closeDialog() {
document.getElementById("dialog").style.display = "none";
}
async function sendRequest() {
const provider = document.getElementById("provider").value;
const action = document.getElementById("action").value;
const payload = JSON.parse(document.getElementById("payload").value);
const res = await fetch("http://localhost:3000/mcp", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ provider, action, payload })
});
const data = await res.json();
document.getElementById("response").innerText = JSON.stringify(data, null, 2);
document.getElementById("dialog").style.display = "block";
}
</script>
</body>
</html>
