ilia 4b9ffb5ddf docs: Update architecture and add new documentation for LLM and MCP
- 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.
2026-01-05 23:44:16 -05:00

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>