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>