CompanyIQ MCP Server
by josuekongolo
- companyiq-mcp
- src
- public
dashboard.html•6.37 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - CompanyIQ</title>
<link rel="stylesheet" href="/public/css/styles.css">
</head>
<body>
<header class="header">
<div class="logo">CompanyIQ</div>
<nav class="nav-links">
<a href="/dashboard">Dashboard</a>
<a href="/docs">Documentation</a>
<button id="logout-btn" class="btn btn-secondary">Logout</button>
</nav>
</header>
<div class="container">
<div class="dashboard-header">
<h1>Dashboard</h1>
<p class="welcome-text">Welcome, <span id="username">User</span></p>
</div>
<div class="card">
<h2>Your API Keys</h2>
<p style="color: #a1a1aa; margin-bottom: 1rem;">
Use these keys to authenticate API requests. Include the key in the <code>x-api-key</code> header.
</p>
<ul id="api-keys-list" class="api-keys-list">
<li class="api-key-item">Loading...</li>
</ul>
<button id="create-key-btn" class="btn btn-primary" style="margin-top: 1rem;">Create New API Key</button>
</div>
<div class="card">
<h2>Quick Start</h2>
<p style="color: #a1a1aa; margin-bottom: 1rem;">Test your API key with this curl command:</p>
<div class="code-block">
<code id="curl-example">curl -X POST https://companyiq-mcp-production.up.railway.app/api/tools/get_company \
-H "Content-Type: application/json" \
-H "x-api-key: YOUR_API_KEY" \
-d '{"org_nr": "923609016"}'</code>
</div>
</div>
</div>
<script>
let currentUser = null;
async function loadUser() {
try {
const response = await fetch('/api/auth/me');
if (!response.ok) {
window.location.href = '/login';
return;
}
currentUser = await response.json();
document.getElementById('username').textContent = currentUser.username;
} catch (error) {
window.location.href = '/login';
}
}
async function loadApiKeys() {
try {
const response = await fetch('/api/auth/keys');
const data = await response.json();
const list = document.getElementById('api-keys-list');
if (data.keys.length === 0) {
list.innerHTML = '<li class="api-key-item">No API keys yet. Create one to get started.</li>';
return;
}
list.innerHTML = data.keys.map(key => `
<li class="api-key-item" data-id="${key.id}">
<div class="api-key-info">
<div class="api-key-name">${escapeHtml(key.name)}</div>
<div class="api-key-display">
<span class="api-key-text" id="key-${key.id}">${key.api_key_masked}</span>
</div>
<div class="api-key-meta">
Created: ${new Date(key.created_at).toLocaleDateString()}
${key.last_used ? ` | Last used: ${new Date(key.last_used).toLocaleDateString()}` : ''}
</div>
</div>
<div class="api-key-actions">
<button class="btn btn-secondary reveal-btn" data-id="${key.id}">Reveal</button>
<button class="btn btn-secondary copy-btn" data-id="${key.id}">Copy</button>
<button class="btn btn-danger revoke-btn" data-id="${key.id}">Revoke</button>
</div>
</li>
`).join('');
// Add event listeners
document.querySelectorAll('.reveal-btn').forEach(btn => {
btn.addEventListener('click', () => revealKey(btn.dataset.id));
});
document.querySelectorAll('.copy-btn').forEach(btn => {
btn.addEventListener('click', () => copyKey(btn.dataset.id));
});
document.querySelectorAll('.revoke-btn').forEach(btn => {
btn.addEventListener('click', () => revokeKey(btn.dataset.id));
});
} catch (error) {
console.error('Failed to load API keys:', error);
}
}
async function revealKey(id) {
try {
const response = await fetch(`/api/auth/keys/${id}/reveal`);
const data = await response.json();
if (data.api_key) {
document.getElementById(`key-${id}`).textContent = data.api_key;
}
} catch (error) {
alert('Failed to reveal key');
}
}
async function copyKey(id) {
try {
const response = await fetch(`/api/auth/keys/${id}/reveal`);
const data = await response.json();
if (data.api_key) {
await navigator.clipboard.writeText(data.api_key);
alert('API key copied to clipboard!');
}
} catch (error) {
alert('Failed to copy key');
}
}
async function revokeKey(id) {
if (!confirm('Are you sure you want to revoke this API key? This cannot be undone.')) {
return;
}
try {
const response = await fetch(`/api/auth/keys/${id}`, { method: 'DELETE' });
if (response.ok) {
loadApiKeys();
} else {
alert('Failed to revoke key');
}
} catch (error) {
alert('Failed to revoke key');
}
}
document.getElementById('create-key-btn').addEventListener('click', async () => {
const name = prompt('Enter a name for this API key:', 'New Key');
if (!name) return;
try {
const response = await fetch('/api/auth/keys', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name })
});
const data = await response.json();
if (data.api_key) {
alert(`New API Key created!\n\n${data.api_key}\n\nSave this key - it will only be shown once!`);
loadApiKeys();
}
} catch (error) {
alert('Failed to create key');
}
});
document.getElementById('logout-btn').addEventListener('click', async () => {
try {
await fetch('/api/auth/logout', { method: 'POST' });
window.location.href = '/login';
} catch (error) {
window.location.href = '/login';
}
});
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// Initialize
loadUser();
loadApiKeys();
</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/josuekongolo/companyiq-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server