test-interface.html•10.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>