feat: integrate MCP discovery mechanism and enhance logging capabilities across applications

Author: regenrek

example/next-app/app/api/client-logs/route.ts

@@ -1 +1,3 @@
-export { POST, runtime, dynamic } from '@browser-echo/next/route';
+import { POST as originalPOST, runtime, dynamic } from '@browser-echo/next/route';
+
+export { originalPOST as POST, runtime, dynamic };

example/next-app/package.json

@@ -14,6 +14,7 @@
     "react-dom": "19.1.1"
   },
   "devDependencies": {
+    "@browser-echo/mcp": "workspace:*",
     "@browser-echo/next": "workspace:*",
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4.1.12",

example/react-vite-app/vite.config.ts

@@ -6,8 +6,8 @@ import browserEcho from '@browser-echo/vite'
 export default defineConfig({
   plugins: [react(), browserEcho({ 
     stackMode: 'condensed',
-    // mcp: {
-    //   url: 'http://localhost:5179'
-    // }
+    mcp: {
+      url: 'http://localhost:5179'
+    }
   })],
 })

example/tanstack-app/postcss.config.mjs

@@ -14,6 +14,6 @@ export default defineConfig({
     }),
     tanstackStart({ customViteReactPlugin: true }),
     viteReact(),
-    browserEcho({ injectHtml: false, stackMode: 'condensed' }),
+    browserEcho({ injectHtml: false, stackMode: 'condensed', mcp: { url: 'http://localhost:5179' } }),
   ],
 })

example/tanstack-app/vite.config.ts

@@ -4,5 +4,12 @@ import browserEcho from '@browser-echo/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue(), browserEcho()],
+  plugins: [vue(), browserEcho(
+    {
+      stackMode: 'condensed',
+      mcp: {
+        url: 'http://localhost:5179'
+      }
+    },
+  )],
 })

example/vue-vite-app/vite.config.ts

@@ -0,0 +1 @@
+{"url":"http://127.0.0.1:5179","routeLogs":"/__client-logs","timestamp":1755720549464,"pid":47674}

packages/mcp/.browser-echo-mcp.json

@@ -171,12 +171,43 @@ async function startHttpServer(mcp: McpServer, store: LogStore, opts: {
   } catch {}
 
   await new Promise<void>((resolve) => nodeServer.listen(opts.port, opts.host, () => resolve()));
+
+  // Advertise discovery so providers can auto-detect this server locally
+  await advertiseDiscovery(opts.host, opts.port, opts.logsRoute);
+
   // eslint-disable-next-line no-console
   console.log(`MCP (Streamable HTTP) listening → http://${opts.host}:${opts.port}${opts.endpoint}`);
   // eslint-disable-next-line no-console
   console.log(`Log ingest endpoint        → http://${opts.host}:${opts.port}${opts.logsRoute}`);
 }
 
+async function advertiseDiscovery(host: string, port: number, logsRoute: `/${string}`) {
+  try {
+    const { writeFileSync } = await import('node:fs');
+    const { join } = await import('node:path');
+    const { tmpdir } = await import('node:os');
+
+    const baseUrl = `http://${host}:${port}`;
+    const payload = JSON.stringify({
+      url: baseUrl,
+      routeLogs: logsRoute,
+      timestamp: Date.now(),
+      pid: typeof process !== 'undefined' ? process.pid : undefined
+    });
+
+    const files = [
+      join(process.cwd(), '.browser-echo-mcp.json'),
+      join(tmpdir(), 'browser-echo-mcp.json')
+    ];
+
+    for (const f of files) {
+      try { writeFileSync(f, payload); } catch {}
+    }
+  } catch {
+    // best-effort only
+  }
+}
+
 /** Create log ingest routes that can be attached to any H3 app */
 function createLogIngestRoutes(store: LogStore, logsRoute: `/${string}`) {
   const router = createRouter();

packages/mcp/bin/cli.mjs

@@ -18,11 +18,13 @@ export async function POST(req: NextRequest) {
   catch { return new NextResponse('invalid JSON', { status: 400 }); }
   if (!payload || !Array.isArray(payload.entries)) return new NextResponse('invalid payload', { status: 400 });
 
-  // Forward to MCP server if configured (fire-and-forget)
-  if (MCP_URL) {
+  // Resolve MCP URL: env var has priority, otherwise discover in development
+  const mcpUrl = MCP_URL || (process.env.NODE_ENV === 'development' ? await __resolveMcpUrl() : '');
+
+  // Forward to MCP server if available (fire-and-forget)
+  if (mcpUrl) {
     try {
-      // keepalive helps with page unloads
-      fetch(`${MCP_URL}${MCP_LOGS_ROUTE}`, {
+      fetch(`${mcpUrl}${MCP_LOGS_ROUTE}`, {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
         body: JSON.stringify(payload),
@@ -32,7 +34,8 @@ export async function POST(req: NextRequest) {
     } catch {}
   }
 
-  const shouldPrint = !SUPPRESS_TERMINAL;
+  // Dynamically decide whether to print to terminal
+  const shouldPrint = !(mcpUrl && process.env.BROWSER_ECHO_SUPPRESS_TERMINAL !== '0');
 
   const sid = (payload.sessionId ?? 'anon').slice(0, 8);
   for (const entry of payload.entries) {
@@ -71,3 +74,74 @@ function color(level: BrowserLogLevel, msg: string) {
   }
 }
 function dim(s: string) { return c.dim + s + c.reset; }
+
+let __mcpDiscoveryCache: { url: string; ts: number } | null = null;
+
+async function __resolveMcpUrl(): Promise<string> {
+  // 1) Env var already handled by caller; only discover in dev here.
+  const now = Date.now();
+  const CACHE_TTL_MS = 30_000;
+
+  // Use fresh cache if present
+  if (__mcpDiscoveryCache && (now - __mcpDiscoveryCache.ts) < CACHE_TTL_MS) {
+    return __mcpDiscoveryCache.url;
+  }
+
+  // 2) Discovery file (project root or OS tmp)
+  const fromFile = await __readDiscoveryUrlFromFile();
+  if (fromFile) {
+    __mcpDiscoveryCache = { url: fromFile, ts: now };
+    return fromFile;
+  }
+
+  // 3) Port scan common local ports
+  const ports = [5179, 5178, 3001, 4000, 5173];
+  for (const port of ports) {
+    const bases = [`http://127.0.0.1:${port}`, `http://localhost:${port}`];
+    for (const base of bases) {
+      if (await __pingHealth(`${base}/health`, 400)) {
+        __mcpDiscoveryCache = { url: base, ts: now };
+        return base;
+      }
+    }
+  }
+
+  __mcpDiscoveryCache = { url: '', ts: now };
+  return '';
+}
+
+async function __readDiscoveryUrlFromFile(): Promise<string> {
+  try {
+    const { readFileSync, existsSync } = await import('node:fs');
+    const { join } = await import('node:path');
+    const { tmpdir } = await import('node:os');
+    const candidates = [
+      join(process.cwd(), '.browser-echo-mcp.json'),
+      join(tmpdir(), 'browser-echo-mcp.json')
+    ];
+    for (const p of candidates) {
+      try {
+        if (!existsSync(p)) continue;
+        const raw = readFileSync(p, 'utf-8');
+        const data = JSON.parse(raw);
+        const url = (data?.url ? String(data.url) : '').replace(/\/$/, '');
+        const ts = typeof data?.timestamp === 'number' ? data.timestamp : 0;
+        // Treat as fresh if updated within the last 60s
+        if (url && (Date.now() - ts) < 60_000) return url;
+      } catch {}
+    }
+  } catch {}
+  return '';
+}
+
+async function __pingHealth(url: string, timeoutMs: number): Promise<boolean> {
+  try {
+    const ctrl = new AbortController();
+    const t = setTimeout(() => ctrl.abort(), timeoutMs);
+    const res = await fetch(url, { signal: ctrl.signal, cache: 'no-store' as any });
+    clearTimeout(t);
+    return res.ok;
+  } catch {
+    return false;
+  }
+}