mcp-test-frontend-clean.html•3.72 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MCP Test Frontend</title>
<!-- External CSS -->
<link rel="stylesheet" href="mcp-test-frontend.css" />
</head>
<body>
<div class="app-container">
<!-- Header -->
<header class="header">
<h1>MCP Test Frontend</h1>
<p>A web-based interface for testing Model Context Protocol (MCP) servers</p>
</header>
<!-- Sidebar - Connection Panel -->
<aside class="sidebar">
<div class="panel">
<h2>Connection</h2>
<form class="connection-form">
<div class="form-group">
<label for="server-url" class="form-label">Server URL</label>
<input
type="url"
id="server-url"
class="form-input"
placeholder="http://localhost:8080"
required
/>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary w-full">Connect</button>
<button type="button" id="disconnect-btn" class="btn btn-error w-full hidden">Disconnect</button>
</div>
</form>
<div class="server-info hidden">
<h3>Server Info</h3>
<div class="server-details">
<p><strong>Name:</strong> <span id="server-name">-</span></p>
<p><strong>Version:</strong> <span id="server-version">-</span></p>
<p><strong>Protocol:</strong> <span id="server-protocol">-</span></p>
</div>
</div>
<div class="mt-lg">
<h3>Status</h3>
<div class="status-indicator status-disconnected">Disconnected</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="main-content">
<!-- Tools Panel -->
<section class="panel">
<div class="flex justify-between items-center mb-md">
<h2>Available Tools</h2>
<button id="refresh-tools" class="btn btn-secondary" disabled>Refresh</button>
</div>
<div class="tools-list">
<p class="text-muted text-center">Connect to a server to view available tools</p>
</div>
</section>
<!-- Tool Execution Panel -->
<section class="panel">
<h2>Tool Execution</h2>
<div id="tool-execution">
<p class="text-muted text-center">Select a tool to view and configure its parameters</p>
</div>
</section>
</main>
<!-- History Panel -->
<aside class="history-panel">
<h2>History</h2>
<div class="history-controls mb-md">
<button id="clear-history" class="btn btn-sm btn-secondary">Clear</button>
<button id="export-history" class="btn btn-sm btn-secondary">Export</button>
</div>
<div class="history-list">
<p class="text-muted text-center">No interactions recorded</p>
</div>
</aside>
</div>
<!-- External JavaScript -->
<script src="mcp-test-frontend.js"></script>
</body>
</html>