Skip to main content
Glama

MCP Complete Implementation Guide

by saksham0712
test-interface.html10.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>

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/saksham0712/MCP'

If you have feedback or need assistance with the MCP directory API, please join our Discord server