Skip to main content
Glama

MCP Complete Implementation Guide

by saksham0712
chatgpt-interface.html15.9 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ChatGPT + MCP Integration</title> <style> body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; margin: 0; padding: 20px; background-color: #f7f7f8; color: #333; } .container { max-width: 900px; margin: 0 auto; background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden; } .header { background: linear-gradient(135deg, #10a37f, #16a085); color: white; padding: 20px 30px; text-align: center; } .header h1 { margin: 0; font-size: 24px; } .header p { margin: 10px 0 0; opacity: 0.9; } .status { padding: 15px 30px; background: #f8f9fa; border-bottom: 1px solid #e9ecef; display: flex; justify-content: space-between; align-items: center; } .status-indicator { display: flex; align-items: center; gap: 8px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #10a37f; } .chat-container { height: 500px; overflow-y: auto; padding: 20px; background: #fafafa; } .message { margin-bottom: 20px; display: flex; gap: 12px; } .message.user { flex-direction: row-reverse; } .message.user .message-content { background: #10a37f; color: white; margin-left: 50px; } .message.assistant .message-content { background: white; border: 1px solid #e9ecef; margin-right: 50px; } .message-content { padding: 12px 16px; border-radius: 12px; max-width: 80%; word-wrap: break-word; } .message-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; flex-shrink: 0; } .message.user .message-avatar { background: #10a37f; color: white; } .message.assistant .message-avatar { background: #f1f3f4; color: #333; } .input-section { padding: 20px; border-top: 1px solid #e9ecef; } .input-container { display: flex; gap: 12px; align-items: flex-end; } .message-input { flex: 1; border: 1px solid #e9ecef; border-radius: 8px; padding: 12px; font-size: 16px; resize: none; min-height: 20px; max-height: 120px; } .send-button { background: #10a37f; color: white; border: none; border-radius: 8px; padding: 12px 24px; font-size: 16px; cursor: pointer; transition: background-color 0.2s; } .send-button:hover { background: #0d8f6f; } .send-button:disabled { background: #ccc; cursor: not-allowed; } .tools-section { padding: 20px; background: #f8f9fa; border-top: 1px solid #e9ecef; } .tools-title { font-weight: bold; margin-bottom: 10px; color: #10a37f; } .tools-list { display: flex; flex-wrap: wrap; gap: 8px; } .tool-tag { background: #e8f5e8; color: #10a37f; padding: 4px 8px; border-radius: 12px; font-size: 12px; border: 1px solid #10a37f20; } .loading { display: flex; align-items: center; gap: 8px; color: #666; } .loading-dots { display: inline-flex; gap: 2px; } .loading-dot { width: 4px; height: 4px; background: #666; border-radius: 50%; animation: loading-pulse 1.4s infinite ease-in-out; } .loading-dot:nth-child(1) { animation-delay: -0.32s; } .loading-dot:nth-child(2) { animation-delay: -0.16s; } @keyframes loading-pulse { 0%, 80%, 100% { transform: scale(0); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } .examples { padding: 20px; background: #f0f8ff; border-top: 1px solid #e9ecef; } .examples h3 { margin-top: 0; color: #2c5282; } .example-buttons { display: flex; flex-wrap: wrap; gap: 8px; } .example-button { background: #e2e8f0; border: 1px solid #cbd5e0; border-radius: 6px; padding: 8px 12px; font-size: 12px; cursor: pointer; transition: background-color 0.2s; } .example-button:hover { background: #cbd5e0; } </style> </head> <body> <div class="container"> <div class="header"> <h1>🤖 ChatGPT + MCP Integration (DEMO)</h1> <p>Demo ChatGPT with MCP tools - File system operations, system info, and more!</p> </div> <div class="status"> <div class="status-indicator"> <div class="status-dot" id="status-dot"></div> <span id="status-text">Connecting to ChatGPT Proxy...</span> </div> <div id="proxy-info"> <small>Proxy: localhost:3001</small> </div> </div> <div class="chat-container" id="chat-container"> <div class="message assistant"> <div class="message-avatar">GPT</div> <div class="message-content"> Hello! I'm an **ENHANCED DEMO** version of ChatGPT with MCP tools and advanced AI capabilities! <br><br> 🤖 **AI Capabilities:** <br> • 🔢 **Math & Calculations** - Complex calculations, unit conversions <br> • 🔧 **Troubleshooting** - System, network, performance issues <br> • 🐧 **Linux Help** - Commands, permissions, process management <br> • 🪟 **Windows Help** - CMD, PowerShell, registry, system admin <br> • 👨‍💻 **Programming** - JavaScript, Python, debugging, best practices <br> • 🌐 **Networking** - Connectivity, firewalls, port management <br><br> 🛠️ **MCP Tools:** <br> • 📁 File operations • 💻 System info • ⚡ Command execution <br><br> This works <strong>without OpenAI API calls</strong> and provides intelligent responses! <br><br> Try asking me anything - calculations, troubleshooting, coding help, or file operations! </div> </div> </div> <div class="input-section"> <div class="input-container"> <textarea class="message-input" id="message-input" placeholder="Ask me anything! I can use MCP tools to help you..." rows="1"></textarea> <button class="send-button" id="send-button" onclick="sendMessage()">Send</button> </div> </div> <div class="examples"> <h3>💡 Example Prompts</h3> <div class="example-buttons"> <button class="example-button" onclick="useExample('Calculate 25 * 3 + 15')">💡 Math: Calculate 25 * 3 + 15</button> <button class="example-button" onclick="useExample('How to troubleshoot slow performance?')">🔧 Troubleshoot performance</button> <button class="example-button" onclick="useExample('How to change file permissions in Linux?')">🐧 Linux permissions</button> <button class="example-button" onclick="useExample('PowerShell commands to list files')">🪟 PowerShell help</button> <button class="example-button" onclick="useExample('How to debug JavaScript errors?')">👨‍💻 JavaScript debugging</button> <button class="example-button" onclick="useExample('Network connectivity troubleshooting')">🌐 Network issues</button> <button class="example-button" onclick="useExample('List files in my MCP directory')">📁 List MCP files</button> <button class="example-button" onclick="useExample('Get system information')">💻 System info</button> </div> </div> <div class="tools-section"> <div class="tools-title">🛠️ Available MCP Tools</div> <div class="tools-list"> <span class="tool-tag">📁 read_file</span> <span class="tool-tag">✏️ write_file</span> <span class="tool-tag">📋 list_directory</span> <span class="tool-tag">💻 get_system_info</span> <span class="tool-tag">🌐 fetch_url</span> <span class="tool-tag">⚡ execute_command</span> </div> </div> </div> <script> let conversationHistory = []; async function checkProxyStatus() { try { const response = await fetch('http://localhost:3001/health'); if (response.ok) { document.getElementById('status-dot').style.background = '#10a37f'; document.getElementById('status-text').textContent = 'ChatGPT Proxy Connected'; return true; } else { throw new Error('Proxy not responding'); } } catch (error) { document.getElementById('status-dot').style.background = '#dc3545'; document.getElementById('status-text').textContent = 'ChatGPT Proxy Disconnected'; return false; } } async function sendMessage() { const input = document.getElementById('message-input'); const message = input.value.trim(); if (!message) return; const sendButton = document.getElementById('send-button'); sendButton.disabled = true; sendButton.textContent = 'Sending...'; // Add user message to chat addMessage(message, 'user'); input.value = ''; // Add to conversation history conversationHistory.push({ role: 'user', content: message }); // Show loading indicator const loadingId = addLoadingMessage(); try { const response = await fetch('http://localhost:3001/chat', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ messages: conversationHistory }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); // Remove loading indicator removeMessage(loadingId); // Add assistant response addMessage(data.content, 'assistant'); // Add to conversation history conversationHistory.push({ role: 'assistant', content: data.content }); } catch (error) { removeMessage(loadingId); addMessage(`Sorry, I encountered an error: ${error.message}\n\nMake sure the ChatGPT proxy server is running on port 3001.`, 'assistant'); } sendButton.disabled = false; sendButton.textContent = 'Send'; } function addMessage(content, role) { const chatContainer = document.getElementById('chat-container'); const messageDiv = document.createElement('div'); messageDiv.className = `message ${role}`; messageDiv.innerHTML = ` <div class="message-avatar">${role === 'user' ? 'You' : 'GPT'}</div> <div class="message-content">${formatMessage(content)}</div> `; chatContainer.appendChild(messageDiv); chatContainer.scrollTop = chatContainer.scrollHeight; return messageDiv; } function addLoadingMessage() { const chatContainer = document.getElementById('chat-container'); const messageDiv = document.createElement('div'); messageDiv.className = 'message assistant loading-message'; messageDiv.innerHTML = ` <div class="message-avatar">GPT</div> <div class="message-content"> <div class="loading"> <span>Thinking</span> <div class="loading-dots"> <div class="loading-dot"></div> <div class="loading-dot"></div> <div class="loading-dot"></div> </div> </div> </div> `; chatContainer.appendChild(messageDiv); chatContainer.scrollTop = chatContainer.scrollHeight; return messageDiv; } function removeMessage(messageElement) { if (messageElement && messageElement.parentNode) { messageElement.parentNode.removeChild(messageElement); } } function formatMessage(content) { // Simple formatting - convert newlines to <br> return content.replace(/\n/g, '<br>'); } function useExample(exampleText) { document.getElementById('message-input').value = exampleText; document.getElementById('message-input').focus(); } // Handle Enter key in textarea document.getElementById('message-input').addEventListener('keydown', function(e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } }); // Auto-resize textarea document.getElementById('message-input').addEventListener('input', function() { this.style.height = 'auto'; this.style.height = this.scrollHeight + 'px'; }); // Check proxy status on load and periodically checkProxyStatus(); setInterval(checkProxyStatus, 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