<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>SQLite Vector MCP Server</title>
<style>
body { font-family: sans-serif; padding: 20px; }
.status { color: green; font-weight: bold; }
.section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 4px; }
.section h3 { margin-top: 0; }
code { background: #f5f5f5; padding: 2px 6px; border-radius: 3px; font-family: monospace; }
table { width: 100%; border-collapse: collapse; }
table td { padding: 8px; border-bottom: 1px solid #eee; }
table td:first-child { font-weight: bold; width: 150px; }
</style>
</head>
<body>
<h1>SQLite Vector MCP Server</h1>
<p>Status: <span id="status" class="status">Loading...</span></p>
<div class="section">
<h3>Test Command</h3>
<input id="name-input" type="text" placeholder="Enter a name..." />
<button id="greet-btn">Greet from Rust</button>
<p id="greet-msg"></p>
</div>
<div class="section">
<h3>MCP Configuration</h3>
<div id="mcp-info">Loading MCP configuration...</div>
</div>
<script type="module">
const { invoke } = window.__TAURI__.core;
// Greet functionality
const greetBtn = document.getElementById('greet-btn');
const nameInput = document.getElementById('name-input');
const greetMsg = document.getElementById('greet-msg');
greetBtn.addEventListener('click', async () => {
const name = nameInput.value || 'Anonymous';
const response = await invoke('greet', { name });
greetMsg.textContent = response;
});
// Load MCP info
async function loadMcpInfo() {
try {
const mcpData = await invoke('get_mcp_info');
displayMcpInfo(mcpData);
document.getElementById('status').textContent = 'Running ✓';
} catch (error) {
console.error('Failed to load MCP info:', error);
document.getElementById('mcp-info').innerHTML = `<p style="color: red;">Error: ${error}</p>`;
document.getElementById('status').textContent = 'Error loading MCP info';
}
}
function displayMcpInfo(mcpData) {
const mcpInfoDiv = document.getElementById('mcp-info');
if (!mcpData.mcpServers) {
mcpInfoDiv.innerHTML = '<p>No MCP servers configured.</p>';
return;
}
let html = '<table>';
html += '<tr><th>Server Name</th><th>Configuration</th></tr>';
for (const [name, config] of Object.entries(mcpData.mcpServers)) {
const url = config.url || 'N/A';
html += `<tr><td><code>${name}</code></td><td><code>${url}</code></td></tr>`;
}
html += '</table>';
mcpInfoDiv.innerHTML = html;
}
// Load on page load
window.addEventListener('load', loadMcpInfo);
</script>
</body>
</html>
