fix

2025-07-22 22:11:18 +05:00
parent e503b3c670
commit 82d922e8bf
11 changed files with 2061 additions and 11 deletions
--- a/web-client-example.html
+++ b/web-client-example.html
@@ -0,0 +1,112 @@
+<!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>