Skip to main content
Glama

MCP Complete Implementation Guide

by saksham0712
index.html3.93 kB
<!-- index.html --> <!DOCTYPE html> <html> <head> <title>ChatGPT with MCP Tools</title> <style> body { font-family: Arial, sans-serif; margin: 20px; background: #f5f5f5; } .container { max-width: 800px; margin: 0 auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } #chat { height: 400px; border: 1px solid #ddd; overflow-y: auto; padding: 15px; margin-bottom: 15px; background: #fafafa; border-radius: 5px; } #input { width: 70%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; } #send { padding: 12px 20px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; margin-left: 10px; } #send:hover { background: #0056b3; } .message { margin: 15px 0; padding: 8px; border-radius: 5px; } .user { background: #e3f2fd; color: #1565c0; border-left: 4px solid #2196f3; } .assistant { background: #e8f5e9; color: #2e7d32; border-left: 4px solid #4caf50; } .error { background: #ffebee; color: #c62828; border-left: 4px solid #f44336; } .status { padding: 10px; background: #e8f5e9; border: 1px solid #4caf50; border-radius: 5px; margin-bottom: 15px; } .status.error { background: #ffebee; border-color: #f44336; color: #c62828; } .status.connecting { background: #fff3e0; border-color: #ff9800; color: #e65100; } </style> </head> <body> <div class="container"> <h1>🤖 ChatGPT with MCP Tools (DEMO)</h1> <div id="status" class="status connecting">🔄 Checking connection to ChatGPT proxy...</div> <div style="background: #f0f8ff; padding: 15px; margin-bottom: 15px; border-radius: 5px; border: 1px solid #2196f3;"> <strong>💡 Demo Mode:</strong> This works without OpenAI API calls! Try: <ul> <li>"Hello" - Get welcome message</li> <li>"List files in my MCP directory" - Browse files</li> <li>"Get system information" - System details</li> <li>"Create a test file" - Write new file</li> </ul> </div> <div id="chat"></div> <div> <input type="text" id="input" placeholder="Try: 'Hello' or 'List files in my MCP directory'"> <button id="send">Send</button> </div> </div> <script> const chat = document.getElementById('chat'); const input = document.getElementById('input'); const send = document.getElementById('send'); const messages = []; function addMessage(role, content) { const div = document.createElement('div'); div.className = `message ${role}`; div.innerHTML = `<strong>${role}:</strong> ${content}`; chat.appendChild(div); chat.scrollTop = chat.scrollHeight; } async function sendMessage() { const message = input.value.trim(); if (!message) return; addMessage('user', message); messages.push({ role: 'user', content: message }); input.value = ''; try { const response = await fetch('http://localhost:3001/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages }), }); const result = await response.json(); addMessage('assistant', result.content); messages.push({ role: 'assistant', content: result.content }); } catch (error) { addMessage('error', 'Error: ' + error.message); } } send.addEventListener('click', sendMessage); input.addEventListener('keypress', (e) => { if (e.key === 'Enter') sendMessage(); }); </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