test-interface.html•10.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MCP Server Test Interface</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
        }
        .status {
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
            text-align: center;
            font-weight: bold;
        }
        .status.healthy {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status.unhealthy {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .tools-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        .tool-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            background: #fafafa;
        }
        .tool-card h3 {
            margin-top: 0;
            color: #2c3e50;
        }
        .tool-card button {
            background: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
            margin-top: 10px;
        }
        .tool-card button:hover {
            background: #2980b9;
        }
        .tool-card input, .tool-card textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin: 5px 0;
            box-sizing: border-box;
        }
        .tool-card textarea {
            height: 80px;
            resize: vertical;
        }
        .result {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            margin-top: 15px;
            font-family: monospace;
            white-space: pre-wrap;
            max-height: 300px;
            overflow-y: auto;
        }
        .integration-section {
            margin-top: 40px;
            padding: 20px;
            border: 2px solid #3498db;
            border-radius: 10px;
            background: #ebf3fd;
        }
        .integration-section h2 {
            color: #2980b9;
            margin-top: 0;
        }
        .integration-links {
            display: flex;
            gap: 15px;
            margin-top: 15px;
        }
        .integration-links a {
            background: #3498db;
            color: white;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-weight: bold;
        }
        .integration-links a:hover {
            background: #2980b9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚀 MCP Server Test Interface</h1>
        
        <div id="server-status" class="status">
            Checking server status...
        </div>
        <div class="integration-section">
            <h2>🤖 AI Integration Options</h2>
            <p><strong>Your MCP server is now ready for AI integration!</strong></p>
            <p>Choose your preferred integration method:</p>
            <div class="integration-links">
                <a href="javascript:void(0)" onclick="showClaudeInstructions()">Claude Desktop</a>
                <a href="javascript:void(0)" onclick="showChatGPTInstructions()">ChatGPT (Web)</a>
                <a href="javascript:void(0)" onclick="startChatGPTProxy()">ChatGPT Proxy</a>
            </div>
        </div>
        
        <div class="tools-grid">
            <div class="tool-card">
                <h3>📁 List Directory</h3>
                <input type="text" id="list-path" placeholder="Directory path (e.g., C:\)" value="C:\Users\Saksham Verma\MCP">
                <button onclick="listDirectory()">List Directory</button>
                <div id="list-result" class="result" style="display:none;"></div>
            </div>
            <div class="tool-card">
                <h3>📄 Read File</h3>
                <input type="text" id="read-path" placeholder="File path" value="C:\Users\Saksham Verma\MCP\README.md">
                <button onclick="readFile()">Read File</button>
                <div id="read-result" class="result" style="display:none;"></div>
            </div>
            <div class="tool-card">
                <h3>✏️ Write File</h3>
                <input type="text" id="write-path" placeholder="File path" value="C:\Users\Saksham Verma\MCP\test-file.txt">
                <textarea id="write-content" placeholder="File content">Hello from MCP Server!</textarea>
                <button onclick="writeFile()">Write File</button>
                <div id="write-result" class="result" style="display:none;"></div>
            </div>
            <div class="tool-card">
                <h3>💻 System Info</h3>
                <button onclick="getSystemInfo()">Get System Information</button>
                <div id="system-result" class="result" style="display:none;"></div>
            </div>
            <div class="tool-card">
                <h3>🌐 Fetch URL</h3>
                <input type="text" id="fetch-url" placeholder="URL to fetch" value="https://api.github.com/repos/microsoft/vscode">
                <button onclick="fetchUrl()">Fetch URL</button>
                <div id="fetch-result" class="result" style="display:none;"></div>
            </div>
            <div class="tool-card">
                <h3>⚡ Execute Command</h3>
                <input type="text" id="exec-command" placeholder="Command to execute" value="echo Hello World">
                <button onclick="executeCommand()">Execute Command</button>
                <div id="exec-result" class="result" style="display:none;"></div>
            </div>
        </div>
    </div>
    <script>
        async function checkServerHealth() {
            try {
                const response = await fetch('http://localhost:3000/health');
                const data = await response.json();
                
                document.getElementById('server-status').className = 'status healthy';
                document.getElementById('server-status').textContent = 
                    `✅ MCP Server is healthy (${data.timestamp})`;
            } catch (error) {
                document.getElementById('server-status').className = 'status unhealthy';
                document.getElementById('server-status').textContent = 
                    `❌ MCP Server is not responding: ${error.message}`;
            }
        }
        // Note: These functions call the MCP server directly
        // In a real implementation, you would need to implement the HTTP MCP transport
        async function listDirectory() {
            const path = document.getElementById('list-path').value;
            try {
                // For now, just show that the server is running
                // In a full implementation, you'd call the MCP tools
                showResult('list-result', `Would list directory: ${path}\n\nNote: HTTP MCP transport not fully implemented yet.\nServer is running and ready for stdio transport with Claude Desktop.`);
            } catch (error) {
                showResult('list-result', `Error: ${error.message}`);
            }
        }
        async function readFile() {
            const path = document.getElementById('read-path').value;
            showResult('read-result', `Would read file: ${path}\n\nNote: Use Claude Desktop or the stdio transport for full MCP functionality.`);
        }
        async function writeFile() {
            const path = document.getElementById('write-path').value;
            const content = document.getElementById('write-content').value;
            showResult('write-result', `Would write to file: ${path}\nContent: ${content}\n\nNote: Use Claude Desktop for full MCP functionality.`);
        }
        async function getSystemInfo() {
            showResult('system-result', `System info available via MCP tools.\n\nConnect with Claude Desktop to use all MCP tools.`);
        }
        async function fetchUrl() {
            const url = document.getElementById('fetch-url').value;
            showResult('fetch-result', `Would fetch URL: ${url}\n\nConnect via Claude Desktop for full functionality.`);
        }
        async function executeCommand() {
            const command = document.getElementById('exec-command').value;
            showResult('exec-result', `Would execute command: ${command}\n\nNote: Command execution disabled by default for security.`);
        }
        function showResult(elementId, text) {
            const element = document.getElementById(elementId);
            element.textContent = text;
            element.style.display = 'block';
        }
        function showClaudeInstructions() {
            alert(`Claude Desktop Integration:
1. Install Claude Desktop from Anthropic
2. Configure claude_desktop_config.json with:
   {
     "mcpServers": {
       "custom-mcp-server": {
         "command": "node",
         "args": ["C:\\\\Users\\\\Saksham Verma\\\\MCP\\\\server.js"]
       }
     }
   }
3. Restart Claude Desktop
4. Start using MCP tools in conversations!`);
        }
        function showChatGPTInstructions() {
            alert(`ChatGPT Web Integration:
1. Use the provided chatgpt-proxy.js server
2. Start it with: node chatgpt-proxy.js
3. Access via http://localhost:3001
4. Or integrate with ChatGPT plugins/custom GPTs
The proxy translates between OpenAI's function calling and MCP.`);
        }
        function startChatGPTProxy() {
            alert(`To start ChatGPT Proxy:
Run in terminal:
node chatgpt-proxy.js
Then access http://localhost:3001 for ChatGPT integration.
Make sure your OpenAI API key is set in the .env file.`);
        }
        // Check server health on page load
        checkServerHealth();
        
        // Refresh health status every 30 seconds
        setInterval(checkServerHealth, 30000);
    </script>
</body>
</html>