Skip to content

Commit 92cbd5f

Browse files
ricardoraposoricardoraposo
authored
Merge pull request #16 from arvoreeducacao/feat/mcp-proxy-dashboard
feat(mcp-proxy): add web dashboard for monitoring connected MCPs
2 parents fe844be + 7046ef5 commit 92cbd5f

5 files changed

Lines changed: 219 additions & 4 deletions

File tree

‎packages/mcp-proxy/src/connector.ts‎

Lines changed: 68 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,44 @@
1+
import { Readable } from "node:stream";
12
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
23
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
34
import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
45
import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
5-
import { UpstreamServerConfig, ProxyError } from "./types.js";
6+
import { UpstreamServerConfig, UpstreamStatus, ProxyError } from "./types.js";
67
import { ToolRegistry } from "./registry.js";
78

89
interface ConnectedUpstream {
910
config: UpstreamServerConfig;
1011
client: Client;
1112
}
1213

14+
const MAX_LOGS = 100;
15+
1316
export class McpConnectorManager {
1417
private readonly upstreams = new Map<string, ConnectedUpstream>();
18+
private readonly statuses = new Map<string, UpstreamStatus>();
1519

1620
constructor(private readonly registry: ToolRegistry) {}
1721

22+
private addLog(name: string, msg: string): void {
23+
const s = this.statuses.get(name);
24+
if (!s) return;
25+
s.logs.push(`[${new Date().toISOString()}] ${msg}`);
26+
if (s.logs.length > MAX_LOGS) s.logs = s.logs.slice(-MAX_LOGS);
27+
}
28+
29+
getStatuses(): UpstreamStatus[] {
30+
return Array.from(this.statuses.values());
31+
}
32+
1833
async connect(config: UpstreamServerConfig): Promise<void> {
19-
console.error(`[connector] Connecting to ${config.name} via ${config.transport}...`);
34+
this.statuses.set(config.name, {
35+
name: config.name,
36+
transport: config.transport,
37+
status: "connecting",
38+
toolCount: 0,
39+
logs: [],
40+
});
41+
this.addLog(config.name, `Connecting via ${config.transport}...`);
2042

2143
try {
2244
if (config.transport === "http") {
@@ -26,9 +48,25 @@ export class McpConnectorManager {
2648
}
2749

2850
await this.ingestTools(config.name, this.upstreams.get(config.name)!.client);
29-
console.error(`[connector] ${config.name} — ${this.registry.getByProvider(config.name).length} tools`);
51+
const toolCount = this.registry.getByProvider(config.name).length;
52+
const s = this.statuses.get(config.name)!;
53+
s.status = "connected";
54+
s.toolCount = toolCount;
55+
this.addLog(config.name, `Connected — ${toolCount} tools`);
56+
console.error(`[connector] ${config.name} — ${toolCount} tools`);
3057
} catch (error) {
31-
console.error(`[connector] Failed ${config.name}:`, error instanceof Error ? error.message : error);
58+
const s = this.statuses.get(config.name)!;
59+
s.status = "error";
60+
const exMsg = error instanceof Error ? error.message : String(error);
61+
this.addLog(config.name, `ERROR: ${exMsg}`);
62+
if (error instanceof Error && error.stack) {
63+
this.addLog(config.name, error.stack);
64+
}
65+
const stderrLines = s.logs
66+
.map((l) => l.replace(/^\[.*?\]\s*/, ""))
67+
.filter((l) => l !== `Connecting via ${config.transport}...`);
68+
s.error = stderrLines.length > 0 ? stderrLines.join("\n") : exMsg;
69+
console.error(`[connector] Failed ${config.name}:`, exMsg);
3270
throw new ProxyError(`Failed to connect: ${config.name}`, "UPSTREAM_CONNECTION_FAILED");
3371
}
3472
}
@@ -40,11 +78,37 @@ export class McpConnectorManager {
4078
command: config.command,
4179
args: config.args,
4280
env: { ...process.env, ...config.env } as Record<string, string>,
81+
stderr: "pipe",
4382
});
83+
this.pipeStderr(config.name, transport);
4484
await client.connect(transport);
4585
this.upstreams.set(config.name, { config, client });
4686
}
4787

88+
private pipeStderr(name: string, transport: StdioClientTransport): void {
89+
const stream = transport.stderr as unknown as Readable | null;
90+
if (!stream || typeof stream.on !== "function") return;
91+
let buf = "";
92+
stream.on("data", (chunk: Buffer | string) => {
93+
buf += chunk.toString();
94+
let nl: number;
95+
while ((nl = buf.indexOf("\n")) !== -1) {
96+
const line = buf.slice(0, nl).trimEnd();
97+
buf = buf.slice(nl + 1);
98+
if (line) {
99+
this.addLog(name, line);
100+
console.error(`[${name}] ${line}`);
101+
}
102+
}
103+
});
104+
stream.on("end", () => {
105+
if (buf.trim()) {
106+
this.addLog(name, buf.trim());
107+
console.error(`[${name}] ${buf.trim()}`);
108+
}
109+
});
110+
}
111+
48112
private async connectHttp(config: UpstreamServerConfig): Promise<void> {
49113
if (!config.url) throw new ProxyError(`${config.name}: http needs "url"`, "INVALID_CONFIG");
50114
const baseUrl = new URL(config.url);

‎packages/mcp-proxy/src/dashboard.ts‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import { createServer, type Server } from "node:http";
2+
import type { McpConnectorManager } from "./connector.js";
3+
import type { ToolRegistry } from "./registry.js";
4+
import type { AuditLogger } from "./logger.js";
5+
6+
export class Dashboard {
7+
private server: Server | null = null;
8+
9+
constructor(
10+
private readonly connector: McpConnectorManager,
11+
private readonly registry: ToolRegistry,
12+
private readonly logger: AuditLogger,
13+
private port: number = 9100
14+
) {}
15+
16+
start(): void {
17+
this.server = createServer((req, res) => {
18+
if (req.url === "/api/status") {
19+
res.writeHead(200, { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" });
20+
res.end(JSON.stringify(this.getData()));
21+
return;
22+
}
23+
res.writeHead(200, { "Content-Type": "text/html" });
24+
res.end(this.getHtml());
25+
});
26+
this.server.on("error", (err: Error & { code?: string }) => {
27+
if (err.code === "EADDRINUSE") {
28+
this.port++;
29+
console.error(`[dashboard] Port taken, trying ${this.port}...`);
30+
this.server!.listen(this.port, "127.0.0.1");
31+
}
32+
});
33+
this.server.listen(this.port, "127.0.0.1", () => {
34+
console.error(`[dashboard] http://localhost:${this.port}`);
35+
});
36+
}
37+
38+
stop(): void {
39+
this.server?.close();
40+
}
41+
42+
private getData() {
43+
const statuses = this.connector.getStatuses();
44+
return {
45+
upstreams: statuses.map((s) => ({
46+
...s,
47+
tools: this.registry.getByProvider(s.name).map((t) => ({
48+
ref: t.ref,
49+
name: t.originalName,
50+
title: t.title,
51+
description: t.description,
52+
})),
53+
})),
54+
recentLogs: this.logger.getEntries(30),
55+
};
56+
}
57+
58+
private getHtml(): string {
59+
return `<!DOCTYPE html>
60+
<html lang="en">
61+
<head>
62+
<meta charset="utf-8">
63+
<meta name="viewport" content="width=device-width,initial-scale=1">
64+
<title>MCP Proxy Dashboard</title>
65+
<style>
66+
*{box-sizing:border-box;margin:0;padding:0}
67+
body{font-family:system-ui,-apple-system,sans-serif;background:#0f1117;color:#e1e4e8;padding:24px}
68+
h1{font-size:1.4rem;margin-bottom:20px;color:#58a6ff}
69+
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}
70+
.card{background:#161b22;border:1px solid #30363d;border-radius:8px;padding:16px;overflow:hidden}
71+
.card h2{font-size:1rem;margin-bottom:8px;display:flex;align-items:center;gap:8px}
72+
.badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:.75rem;font-weight:600}
73+
.connected{background:#238636;color:#fff}
74+
.error{background:#da3633;color:#fff}
75+
.connecting{background:#d29922;color:#000}
76+
.tools{margin-top:12px}
77+
.tool{background:#0d1117;border:1px solid #21262d;border-radius:4px;padding:8px 10px;margin-top:6px;font-size:.85rem}
78+
.tool .name{color:#79c0ff;font-weight:600}
79+
.tool .desc{color:#8b949e;margin-top:2px;font-size:.8rem}
80+
.logs{margin-top:12px;max-height:200px;overflow-y:auto;background:#0d1117;border:1px solid #21262d;border-radius:4px;padding:8px;font-family:monospace;font-size:.75rem;line-height:1.5;white-space:pre-wrap;word-break:break-all;color:#8b949e}
81+
.error-msg{color:#f85149;margin-top:6px;font-size:.85rem;font-family:monospace;white-space:pre-wrap;word-break:break-all;background:#1c0c0c;border:1px solid #da3633;border-radius:4px;padding:8px;max-height:300px;overflow-y:auto}
82+
.meta{color:#8b949e;font-size:.8rem;margin-top:4px}
83+
h3{font-size:.85rem;color:#8b949e;margin-top:12px;margin-bottom:4px}
84+
.audit{margin-top:20px}
85+
.audit table{width:100%;border-collapse:collapse;font-size:.8rem}
86+
.audit th,.audit td{text-align:left;padding:6px 8px;border-bottom:1px solid #21262d}
87+
.audit th{color:#8b949e;font-weight:600}
88+
.audit .err{color:#f85149}
89+
.refresh{background:#21262d;color:#c9d1d9;border:1px solid #30363d;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:.85rem;margin-bottom:16px}
90+
.refresh:hover{background:#30363d}
91+
</style>
92+
</head>
93+
<body>
94+
<h1>MCP Proxy Dashboard</h1>
95+
<button class="refresh" onclick="load()">Refresh</button>
96+
<div class="grid" id="grid"></div>
97+
<div class="audit" id="audit"></div>
98+
<script>
99+
async function load(){
100+
const r=await fetch('/api/status');
101+
const d=await r.json();
102+
const grid=document.getElementById('grid');
103+
grid.innerHTML=d.upstreams.map(u=>\`
104+
<div class="card">
105+
<h2>\${esc(u.name)} <span class="badge \${u.status}">\${u.status}</span></h2>
106+
<div class="meta">Transport: \${u.transport} | Tools: \${u.toolCount}</div>
107+
\${u.tools.length?\`<h3>Tools</h3><div class="tools">\${u.tools.map(t=>\`
108+
<div class="tool"><span class="name">\${esc(t.name)}</span><div class="desc">\${esc(t.description)}</div></div>
109+
\`).join('')}</div>\`:''}
110+
\${u.logs.length?\`<h3>Logs</h3><div class="logs">\${esc(u.logs.join('\\n'))}</div>\`:''}
111+
</div>
112+
\`).join('');
113+
const audit=document.getElementById('audit');
114+
if(d.recentLogs.length){
115+
audit.innerHTML=\`<h3>Recent Audit Log</h3><table>
116+
<tr><th>Time</th><th>Tool</th><th>Provider</th><th>Ms</th><th>Size</th><th>Error</th></tr>
117+
\${d.recentLogs.map(e=>\`<tr>
118+
<td>\${e.timestamp.slice(11,19)}</td><td>\${esc(e.tool)}</td><td>\${esc(e.provider)}</td>
119+
<td>\${e.executionTimeMs}</td><td>\${e.outputSize}</td>
120+
<td class="\${e.error?'err':''}">\${e.error?esc(e.error):'-'}</td>
121+
</tr>\`).join('')}
122+
</table>\`;
123+
}
124+
}
125+
function esc(s){const d=document.createElement('div');d.textContent=s;return d.innerHTML}
126+
load();setInterval(load,5000);
127+
</script>
128+
</body>
129+
</html>`;
130+
}
131+
}

‎packages/mcp-proxy/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,5 @@ export { EmbeddingEngine } from "./embeddings.js";
2222
export { OutputShaper } from "./output-shaper.js";
2323
export { PaginationManager } from "./pagination.js";
2424
export { AuditLogger } from "./logger.js";
25+
export { Dashboard } from "./dashboard.js";
2526
export * from "./types.js";

‎packages/mcp-proxy/src/server.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { EmbeddingEngine } from "./embeddings.js";
1919
import { OutputShaper } from "./output-shaper.js";
2020
import { PaginationManager } from "./pagination.js";
2121
import { AuditLogger } from "./logger.js";
22+
import { Dashboard } from "./dashboard.js";
2223

2324
export class McpProxyServer {
2425
private readonly server: McpServer;
@@ -29,6 +30,7 @@ export class McpProxyServer {
2930
private readonly shaper: OutputShaper;
3031
private readonly pagination: PaginationManager;
3132
private readonly logger: AuditLogger;
33+
private readonly dashboard: Dashboard;
3234
private readonly config: ProxyConfig;
3335
private upstreamsReady: Promise<void> = Promise.resolve();
3436

@@ -46,6 +48,12 @@ export class McpProxyServer {
4648
this.shaper = new OutputShaper(config.callItemLimit, config.maxTextLength);
4749
this.pagination = new PaginationManager();
4850
this.logger = new AuditLogger();
51+
this.dashboard = new Dashboard(
52+
this.connector,
53+
this.registry,
54+
this.logger,
55+
parseInt(process.env.MCP_PROXY_DASHBOARD_PORT || "9100", 10)
56+
);
4957

5058
this.setupTools();
5159
}
@@ -386,6 +394,7 @@ export class McpProxyServer {
386394
const transport = new StdioServerTransport();
387395
await this.server.connect(transport);
388396
console.error("[proxy] MCP transport connected, loading upstreams in background...");
397+
this.dashboard.start();
389398

390399
this.upstreamsReady = (async () => {
391400
await this.embeddings.init();
@@ -414,6 +423,7 @@ export class McpProxyServer {
414423

415424
async cleanup(): Promise<void> {
416425
try {
426+
this.dashboard.stop();
417427
await this.connector.disconnectAll();
418428
} catch (error) {
419429
console.error(

‎packages/mcp-proxy/src/types.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,15 @@ export interface McpToolResult {
121121
}>;
122122
}
123123

124+
export interface UpstreamStatus {
125+
name: string;
126+
transport: "stdio" | "http";
127+
status: "connecting" | "connected" | "error";
128+
toolCount: number;
129+
error?: string;
130+
logs: string[];
131+
}
132+
124133
export class ProxyError extends Error {
125134
constructor(
126135
message: string,

0 commit comments

Comments
 (0)