chatgpt-interface.html•15.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>