MCP-Server
by thedcfix
- MCP-Server
- templates
index.html•12.8 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 - {{ server_info.name }}</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
margin-bottom: 30px;
}
.header h1 {
color: #333;
margin-bottom: 10px;
}
.header .version {
color: #667eea;
font-weight: bold;
}
.header .description {
color: #666;
margin-top: 10px;
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 20px;
}
.stat-card {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
border-left: 4px solid #667eea;
}
.stat-label {
color: #666;
font-size: 14px;
margin-bottom: 5px;
}
.stat-value {
color: #333;
font-size: 24px;
font-weight: bold;
}
.tools-section {
margin-top: 30px;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 20px;
}
.tool-card {
background: white;
border-radius: 10px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.2s, box-shadow 0.2s;
}
.tool-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.tool-name {
color: #667eea;
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.tool-description {
color: #666;
line-height: 1.6;
margin-bottom: 15px;
}
.tool-params {
background: #f8f9fa;
border-radius: 6px;
padding: 15px;
margin-top: 15px;
}
.params-title {
color: #333;
font-weight: bold;
margin-bottom: 10px;
font-size: 14px;
}
.param-item {
margin: 10px 0;
padding: 8px;
background: white;
border-radius: 4px;
font-size: 13px;
}
.param-name {
color: #667eea;
font-weight: bold;
}
.param-type {
color: #999;
font-style: italic;
}
.param-desc {
color: #666;
margin-top: 3px;
}
.required-badge {
background: #dc3545;
color: white;
padding: 2px 6px;
border-radius: 3px;
font-size: 11px;
margin-left: 5px;
}
.test-section {
background: white;
border-radius: 10px;
padding: 25px;
margin-top: 30px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.test-section h2 {
color: #333;
margin-bottom: 20px;
}
.tool-selector {
margin-bottom: 20px;
}
.tool-selector select {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 6px;
font-size: 16px;
background: white;
}
.params-input {
margin-bottom: 20px;
}
.params-input textarea {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 6px;
font-family: 'Courier New', monospace;
font-size: 14px;
min-height: 120px;
}
.execute-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 12px 30px;
border-radius: 6px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: opacity 0.2s;
}
.execute-btn:hover {
opacity: 0.9;
}
.execute-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.result-section {
margin-top: 20px;
padding: 15px;
border-radius: 6px;
display: none;
}
.result-section.success {
background: #d4edda;
border: 1px solid #c3e6cb;
display: block;
}
.result-section.error {
background: #f8d7da;
border: 1px solid #f5c6cb;
display: block;
}
.result-title {
font-weight: bold;
margin-bottom: 10px;
}
.result-content {
background: white;
padding: 15px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 13px;
white-space: pre-wrap;
overflow-x: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>{{ server_info.name }}</h1>
<span class="version">Version {{ server_info.version }}</span>
<p class="description">{{ server_info.description }}</p>
<div class="stats">
<div class="stat-card">
<div class="stat-label">Available Tools</div>
<div class="stat-value">{{ server_info.tool_count }}</div>
</div>
<div class="stat-card">
<div class="stat-label">Server Status</div>
<div class="stat-value">🟢 Online</div>
</div>
</div>
</div>
<div class="tools-section">
<h2 style="color: white; margin-bottom: 20px; font-size: 28px;">Available Tools</h2>
<div class="tools-grid">
{% for tool in tools %}
<div class="tool-card">
<div class="tool-name">{{ tool.name }}</div>
<div class="tool-description">{{ tool.description }}</div>
{% if tool.parameters.properties %}
<div class="tool-params">
<div class="params-title">Parameters:</div>
{% for param_name, param_info in tool.parameters.properties.items() %}
<div class="param-item">
<span class="param-name">{{ param_name }}</span>
<span class="param-type">({{ param_info.type }})</span>
{% if param_name in tool.parameters.required %}
<span class="required-badge">required</span>
{% endif %}
<div class="param-desc">{{ param_info.description }}</div>
{% if param_info.enum %}
<div class="param-desc">Options: {{ param_info.enum|join(', ') }}</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
<div class="test-section">
<h2>Test Tools</h2>
<div class="tool-selector">
<label for="tool-select" style="display: block; margin-bottom: 8px; font-weight: bold;">Select Tool:</label>
<select id="tool-select">
<option value="">-- Select a tool --</option>
{% for tool in tools %}
<option value="{{ tool.name }}">{{ tool.name }}</option>
{% endfor %}
</select>
</div>
<div class="params-input">
<label for="params-input" style="display: block; margin-bottom: 8px; font-weight: bold;">Parameters (JSON):</label>
<textarea id="params-input" placeholder='{"param1": "value1", "param2": "value2"}'></textarea>
</div>
<button class="execute-btn" id="execute-btn">Execute Tool</button>
<div class="result-section" id="result-section">
<div class="result-title" id="result-title">Result:</div>
<div class="result-content" id="result-content"></div>
</div>
</div>
</div>
<script>
const toolSelect = document.getElementById('tool-select');
const paramsInput = document.getElementById('params-input');
const executeBtn = document.getElementById('execute-btn');
const resultSection = document.getElementById('result-section');
const resultTitle = document.getElementById('result-title');
const resultContent = document.getElementById('result-content');
// Tool parameter templates
const toolTemplates = {
'calculate': '{\n "operation": "add",\n "a": 10,\n "b": 5\n}',
'text_analyzer': '{\n "text": "Hello world! This is a test."\n}',
'timestamp': '{\n "format": "iso"\n}',
'string_transform': '{\n "text": "Hello World",\n "transformation": "uppercase"\n}',
'fibonacci': '{\n "n": 10\n}'
};
toolSelect.addEventListener('change', (e) => {
const toolName = e.target.value;
if (toolName && toolTemplates[toolName]) {
paramsInput.value = toolTemplates[toolName];
} else {
paramsInput.value = '{}';
}
});
executeBtn.addEventListener('click', async () => {
const toolName = toolSelect.value;
if (!toolName) {
alert('Please select a tool');
return;
}
let parameters;
try {
parameters = JSON.parse(paramsInput.value || '{}');
} catch (e) {
alert('Invalid JSON in parameters field');
return;
}
executeBtn.disabled = true;
executeBtn.textContent = 'Executing...';
try {
const response = await fetch('/api/execute', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
tool_name: toolName,
parameters: parameters
})
});
const result = await response.json();
resultContent.textContent = JSON.stringify(result, null, 2);
if (result.error) {
resultSection.className = 'result-section error';
resultTitle.textContent = 'Error:';
} else {
resultSection.className = 'result-section success';
resultTitle.textContent = 'Success:';
}
} catch (error) {
resultContent.textContent = 'Error: ' + error.message;
resultSection.className = 'result-section error';
resultTitle.textContent = 'Error:';
} finally {
executeBtn.disabled = false;
executeBtn.textContent = 'Execute Tool';
}
});
</script>
</body>
</html>
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
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/thedcfix/MCP-Server'
If you have feedback or need assistance with the MCP directory API, please join our Discord server