113 lines
4.2 KiB
HTML
113 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Laravel Healthcare MCP Web Client</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
|
.container { max-width: 800px; margin: 0 auto; }
|
|
.response { background: #f5f5f5; padding: 10px; margin: 10px 0; border-radius: 5px; }
|
|
button { padding: 10px 20px; margin: 5px; background: #007cba; color: white; border: none; border-radius: 5px; cursor: pointer; }
|
|
button:hover { background: #005a87; }
|
|
input, textarea { width: 100%; padding: 8px; margin: 5px 0; border: 1px solid #ddd; border-radius: 4px; }
|
|
.tool-list { max-height: 300px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🏥 Laravel Healthcare MCP Web Client</h1>
|
|
|
|
<div>
|
|
<h3>Server Connection</h3>
|
|
<input type="text" id="serverUrl" value="http://localhost:3000/mcp" placeholder="MCP Server URL">
|
|
<button onclick="testConnection()">Test Connection</button>
|
|
<button onclick="listTools()">List Tools</button>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>Tool Execution</h3>
|
|
<input type="text" id="toolName" placeholder="Tool Name (e.g., public_manage_login)" value="public_manage_login">
|
|
<textarea id="toolArgs" placeholder="Tool Arguments (JSON)" rows="4">{"email": "test@example.com", "password": "password"}</textarea>
|
|
<button onclick="executeTool()">Execute Tool</button>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>Response</h3>
|
|
<div id="response" class="response">Ready to connect...</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>Available Tools</h3>
|
|
<div id="toolList" class="tool-list">Click "List Tools" to load...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let requestId = 1;
|
|
|
|
async function mcpRequest(method, params = {}) {
|
|
const serverUrl = document.getElementById('serverUrl').value;
|
|
const request = {
|
|
jsonrpc: "2.0",
|
|
method: method,
|
|
params: params,
|
|
id: requestId++
|
|
};
|
|
|
|
try {
|
|
const response = await fetch(serverUrl, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(request)
|
|
});
|
|
|
|
const result = await response.json();
|
|
document.getElementById('response').innerHTML = `<pre>${JSON.stringify(result, null, 2)}</pre>`;
|
|
return result;
|
|
} catch (error) {
|
|
document.getElementById('response').innerHTML = `<div style="color: red;">Error: ${error.message}</div>`;
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
async function testConnection() {
|
|
await mcpRequest('initialize', {
|
|
protocolVersion: "2024-11-05",
|
|
clientInfo: {
|
|
name: "web-client",
|
|
version: "1.0.0"
|
|
}
|
|
});
|
|
}
|
|
|
|
async function listTools() {
|
|
const result = await mcpRequest('tools/list');
|
|
if (result.result && result.result.tools) {
|
|
const toolsHtml = result.result.tools.map(tool =>
|
|
`<div><strong>${tool.name}</strong>: ${tool.description}</div>`
|
|
).join('');
|
|
document.getElementById('toolList').innerHTML = toolsHtml;
|
|
}
|
|
}
|
|
|
|
async function executeTool() {
|
|
const toolName = document.getElementById('toolName').value;
|
|
const toolArgs = document.getElementById('toolArgs').value;
|
|
|
|
try {
|
|
const args = JSON.parse(toolArgs);
|
|
await mcpRequest('tools/call', {
|
|
name: toolName,
|
|
arguments: args
|
|
});
|
|
} catch (error) {
|
|
document.getElementById('response').innerHTML = `<div style="color: red;">Invalid JSON arguments: ${error.message}</div>`;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|