- Enhanced `ARCHITECTURE.md` with details on LLM models for work (Llama 3.1 70B Q4) and family agents (Phi-3 Mini 3.8B Q4). - Introduced new documents: - `ASR_EVALUATION.md` for ASR engine evaluation and selection. - `HARDWARE.md` outlining hardware requirements and purchase plans. - `IMPLEMENTATION_GUIDE.md` for Milestone 2 implementation steps. - `LLM_CAPACITY.md` assessing VRAM and context window limits. - `LLM_MODEL_SURVEY.md` surveying open-weight LLM models. - `LLM_USAGE_AND_COSTS.md` detailing LLM usage and operational costs. - `MCP_ARCHITECTURE.md` describing the Model Context Protocol architecture. - `MCP_IMPLEMENTATION_SUMMARY.md` summarizing MCP implementation status. These updates provide comprehensive guidance for the next phases of development and ensure clarity in project documentation.
214 lines
7.0 KiB
HTML
214 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MCP Server - Atlas Voice Agent</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background: #1a1a1a;
|
|
color: #e0e0e0;
|
|
}
|
|
h1 {
|
|
color: #4a9eff;
|
|
border-bottom: 2px solid #4a9eff;
|
|
padding-bottom: 10px;
|
|
}
|
|
.status {
|
|
background: #2a2a2a;
|
|
border: 1px solid #3a3a3a;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
.status-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #3a3a3a;
|
|
}
|
|
.status-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.status-label {
|
|
color: #888;
|
|
}
|
|
.status-value {
|
|
color: #4a9eff;
|
|
font-weight: bold;
|
|
}
|
|
.tools-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
.tool-card {
|
|
background: #2a2a2a;
|
|
border: 1px solid #3a3a3a;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
}
|
|
.tool-name {
|
|
color: #4a9eff;
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
margin-bottom: 8px;
|
|
}
|
|
.tool-desc {
|
|
color: #aaa;
|
|
font-size: 0.9em;
|
|
}
|
|
.endpoints {
|
|
background: #2a2a2a;
|
|
border: 1px solid #3a3a3a;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
.endpoint {
|
|
margin: 10px 0;
|
|
padding: 10px;
|
|
background: #1a1a1a;
|
|
border-radius: 4px;
|
|
}
|
|
.endpoint-method {
|
|
display: inline-block;
|
|
background: #4a9eff;
|
|
color: #1a1a1a;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-weight: bold;
|
|
margin-right: 10px;
|
|
font-size: 0.85em;
|
|
}
|
|
.endpoint-url {
|
|
color: #4a9eff;
|
|
font-family: monospace;
|
|
}
|
|
code {
|
|
background: #1a1a1a;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-family: 'Courier New', monospace;
|
|
color: #4a9eff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🚀 MCP Server - Atlas Voice Agent</h1>
|
|
|
|
<div class="status">
|
|
<h2>Server Status</h2>
|
|
<div class="status-item">
|
|
<span class="status-label">Status:</span>
|
|
<span class="status-value" id="status">Loading...</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Version:</span>
|
|
<span class="status-value" id="version">-</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Protocol:</span>
|
|
<span class="status-value" id="protocol">-</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Tools Registered:</span>
|
|
<span class="status-value" id="tool-count">-</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status">
|
|
<h2>Available Tools</h2>
|
|
<div class="tools-grid" id="tools-grid">
|
|
<p>Loading tools...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="endpoints">
|
|
<h2>API Endpoints</h2>
|
|
<div class="endpoint">
|
|
<span class="endpoint-method">GET</span>
|
|
<span class="endpoint-url">/health</span>
|
|
<p style="margin: 5px 0 0 0; color: #aaa;">Health check endpoint</p>
|
|
</div>
|
|
<div class="endpoint">
|
|
<span class="endpoint-method">POST</span>
|
|
<span class="endpoint-url">/mcp</span>
|
|
<p style="margin: 5px 0 0 0; color: #aaa;">JSON-RPC 2.0 endpoint</p>
|
|
<p style="margin: 5px 0 0 0; color: #888; font-size: 0.9em;">
|
|
Methods: <code>tools/list</code>, <code>tools/call</code>
|
|
</p>
|
|
</div>
|
|
<div class="endpoint">
|
|
<span class="endpoint-method">GET</span>
|
|
<span class="endpoint-url">/docs</span>
|
|
<p style="margin: 5px 0 0 0; color: #aaa;">FastAPI interactive documentation</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Load server info
|
|
fetch('/')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
document.getElementById('status').textContent = data.status || 'running';
|
|
document.getElementById('version').textContent = data.version || '-';
|
|
document.getElementById('protocol').textContent = data.protocol || '-';
|
|
document.getElementById('tool-count').textContent = data.tools_registered || 0;
|
|
|
|
// Load tools
|
|
if (data.tools && data.tools.length > 0) {
|
|
const grid = document.getElementById('tools-grid');
|
|
grid.innerHTML = '';
|
|
data.tools.forEach(tool => {
|
|
const card = document.createElement('div');
|
|
card.className = 'tool-card';
|
|
card.innerHTML = `
|
|
<div class="tool-name">${tool}</div>
|
|
<div class="tool-desc">Use <code>tools/call</code> to execute</div>
|
|
`;
|
|
grid.appendChild(card);
|
|
});
|
|
}
|
|
})
|
|
.catch(e => {
|
|
console.error('Error loading server info:', e);
|
|
document.getElementById('status').textContent = 'Error';
|
|
});
|
|
|
|
// Load detailed tool info
|
|
fetch('/mcp', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
jsonrpc: '2.0',
|
|
method: 'tools/list',
|
|
id: 1
|
|
})
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.result && data.result.tools) {
|
|
const grid = document.getElementById('tools-grid');
|
|
grid.innerHTML = '';
|
|
data.result.tools.forEach(tool => {
|
|
const card = document.createElement('div');
|
|
card.className = 'tool-card';
|
|
card.innerHTML = `
|
|
<div class="tool-name">${tool.name}</div>
|
|
<div class="tool-desc">${tool.description}</div>
|
|
`;
|
|
grid.appendChild(card);
|
|
});
|
|
}
|
|
})
|
|
.catch(e => console.error('Error loading tools:', e));
|
|
</script>
|
|
</body>
|
|
</html>
|