what-devtools-mcp 0.6.3 → 0.6.5

package/client.d.ts

@@ -0,0 +1,14 @@
+export interface DevToolsMCPConnection {
+  disconnect(): void;
+  readonly isConnected: boolean;
+  readonly eventCount: number;
+}
+
+export interface ConnectDevToolsMCPOptions {
+  port?: number;
+  token?: string;
+  /** Hostname used by the browser client for token discovery and the bridge WebSocket. Defaults to 127.0.0.1. */
+  host?: string;
+}
+
+export function connectDevToolsMCP(options?: ConnectDevToolsMCPOptions): DevToolsMCPConnection;

package/index.d.ts

@@ -0,0 +1,3 @@
+// CLI entrypoint package. Import browser/client helpers from `what-devtools-mcp/client`
+// and Vite integration from `what-devtools-mcp/vite-plugin`.
+export {};

package/package.json

@@ -1,18 +1,30 @@
 {
   "name": "what-devtools-mcp",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "description": "MCP server bridging AI agents to live What Framework app state via WebSocket",
   "type": "module",
   "bin": {
     "what-devtools-mcp": "src/index.js"
   },
   "exports": {
-    ".": "./src/index.js",
-    "./client": "./src/client.js",
-    "./vite-plugin": "./src/vite-plugin.js"
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./src/index.js"
+    },
+    "./client": {
+      "types": "./client.d.ts",
+      "import": "./src/client.js"
+    },
+    "./vite-plugin": {
+      "types": "./vite-plugin.d.ts",
+      "import": "./src/vite-plugin.js"
+    }
   },
   "files": [
-    "src"
+    "src",
+    "index.d.ts",
+    "client.d.ts",
+    "vite-plugin.d.ts"
   ],
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.0.0",
@@ -20,7 +32,7 @@
     "zod": "^3.25.0"
   },
   "peerDependencies": {
-    "what-devtools": "^0.6.3"
+    "what-devtools": "^0.6.5"
   },
   "keywords": [
     "what-framework",
@@ -29,5 +41,6 @@
     "model-context-protocol",
     "ai-debugging"
   ],
-  "license": "MIT"
+  "license": "MIT",
+  "types": "index.d.ts"
 }

package/src/bridge.js

@@ -7,12 +7,34 @@
 import { WebSocketServer } from 'ws';
 import { randomBytes } from 'crypto';
 import { createServer } from 'http';
-import { writeFileSync, mkdirSync } from 'fs';
+import { writeFileSync, mkdirSync, chmodSync } from 'fs';
 import { join } from 'path';
 
 const MAX_EVENT_LOG = 1000;
 const MAX_ERROR_LOG = 100;
 
+function isLoopbackHostname(hostname) {
+  const normalized = hostname.toLowerCase();
+  return normalized === 'localhost'
+    || normalized.endsWith('.localhost')
+    || normalized === '127.0.0.1'
+    || normalized.startsWith('127.')
+    || normalized === '[::1]'
+    || normalized === '::1';
+}
+
+function isAllowedDiscoveryOrigin(origin) {
+  if (!origin) return true;
+
+  try {
+    const url = new URL(origin);
+    return (url.protocol === 'http:' || url.protocol === 'https:')
+      && isLoopbackHostname(url.hostname);
+  } catch {
+    return false;
+  }
+}
+
 export function createBridge({ port = 9229, host = '127.0.0.1' } = {}) {
   let latestSnapshot = null;
   const eventLog = [];
@@ -44,21 +66,43 @@ export function createBridge({ port = 9229, host = '127.0.0.1' } = {}) {
   }});
 
   // --- Token Discovery ---
-  // Two mechanisms so the browser client can find the token automatically:
-  //
-  // 1. HTTP endpoint: GET http://localhost:{port+1}/__what_mcp_token returns the token
-  //    The client fetches this on startup before connecting the WebSocket.
-  //
-  // 2. File: writes token to node_modules/.cache/what-devtools-mcp/token
-  //    The Vite plugin reads this at transform time.
-
+  // Primary mechanism: write a process-local cache file that the Vite plugin
+  // reads at transform time. HTTP token discovery exposes bearer credentials
+  // to any loopback page, so it is disabled unless explicitly opted in.
+  const httpTokenDiscovery = /^(1|true|yes)$/i.test(process.env.WHAT_MCP_HTTP_TOKEN_DISCOVERY || '');
   const discoveryPort = port + 1;
-  const httpServer = createServer((req, res) => {
-    // CORS headers so the browser can fetch from any origin
-    res.setHeader('Access-Control-Allow-Origin', '*');
+  let httpServer = null;
+
+  if (httpTokenDiscovery) {
+    httpServer = createServer((req, res) => {
+    const origin = req.headers.origin;
+    const allowedOrigin = isAllowedDiscoveryOrigin(origin);
+
+    res.setHeader('Vary', 'Origin');
+    if (origin && allowedOrigin) {
+      res.setHeader('Access-Control-Allow-Origin', origin);
+    }
     res.setHeader('Access-Control-Allow-Methods', 'GET');
     res.setHeader('Cache-Control', 'no-store');
 
+    if (!allowedOrigin) {
+      res.writeHead(403);
+      res.end('Forbidden');
+      return;
+    }
+
+    if (req.method === 'OPTIONS') {
+      res.writeHead(204);
+      res.end();
+      return;
+    }
+
+    if (req.method !== 'GET') {
+      res.writeHead(405);
+      res.end('Method not allowed');
+      return;
+    }
+
     if (req.url === '/__what_mcp_token') {
       res.writeHead(200, { 'Content-Type': 'application/json' });
       res.end(JSON.stringify({ token: authToken, wsPort: port }));
@@ -68,25 +112,32 @@ export function createBridge({ port = 9229, host = '127.0.0.1' } = {}) {
     }
   });
 
-  httpServer.listen(discoveryPort, host, () => {
-    console.error(`[what-devtools-mcp] Token discovery on http://${host}:${discoveryPort}/__what_mcp_token`);
-  });
-  httpServer.on('error', () => {
-    // Discovery port unavailable — not critical, file-based fallback still works
-    console.error(`[what-devtools-mcp] Token discovery port ${discoveryPort} unavailable (non-fatal)`);
-  });
+    httpServer.listen(discoveryPort, host, () => {
+      console.error(`[what-devtools-mcp] HTTP token discovery enabled on http://${host}:${discoveryPort}/__what_mcp_token`);
+    });
+    httpServer.on('error', () => {
+      // Discovery port unavailable — not critical, file-based fallback still works
+      console.error(`[what-devtools-mcp] Token discovery port ${discoveryPort} unavailable (non-fatal)`);
+    });
+  }
 
   // Write token to a well-known file path for Vite plugin to read
   try {
     const cacheDir = join(process.cwd(), 'node_modules', '.cache', 'what-devtools-mcp');
     mkdirSync(cacheDir, { recursive: true });
-    writeFileSync(join(cacheDir, 'token'), JSON.stringify({ token: authToken, port, discoveryPort }));
+    const tokenFile = join(cacheDir, 'token');
+    writeFileSync(tokenFile, JSON.stringify({ token: authToken, port, discoveryPort: httpTokenDiscovery ? discoveryPort : null }), { mode: 0o600 });
+    chmodSync(tokenFile, 0o600);
   } catch {
-    // Non-fatal — HTTP discovery is the primary mechanism
+    // Non-fatal — explicit tokens or HTTP discovery can still be used
   }
 
   console.error(`[what-devtools-mcp] Bridge listening on ws://${host}:${port}`);
-  console.error(`[what-devtools-mcp] Auth token: ${authToken}`);
+  if (process.env.WHAT_MCP_LOG_TOKEN === '1') {
+    console.error(`[what-devtools-mcp] Auth token: ${authToken}`);
+  } else {
+    console.error('[what-devtools-mcp] Auth token generated; raw token logging disabled.');
+  }
 
   wss.on('connection', (ws) => {
     browserSocket = ws;
@@ -215,7 +266,7 @@ export function createBridge({ port = 9229, host = '127.0.0.1' } = {}) {
       pendingCommands.delete(id);
     }
     wss.close();
-    httpServer.close();
+    httpServer?.close();
   }
 
   return {

package/src/client.js

@@ -21,7 +21,7 @@ function logGrouped(badge, badgeStyle, title, data) {
   console.groupEnd();
 }
 
-export function connectDevToolsMCP({ port = 9229, token = '' } = {}) {
+export function connectDevToolsMCP({ port = 9229, token = '', host = '127.0.0.1' } = {}) {
   // Never connect in production
   if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'production') {
     return { disconnect() {}, isConnected: false, eventCount: 0 };
@@ -61,7 +61,7 @@ export function connectDevToolsMCP({ port = 9229, token = '' } = {}) {
 
     const discoveryPort = port + 1;
     try {
-      const res = await fetch(`http://localhost:${discoveryPort}/__what_mcp_token`);
+      const res = await fetch(`http://${host}:${discoveryPort}/__what_mcp_token`);
       if (res.ok) {
         const data = await res.json();
         discoveredToken = data.token;
@@ -75,13 +75,13 @@ export function connectDevToolsMCP({ port = 9229, token = '' } = {}) {
     return false;
   }
 
-  log('MCP', BADGE, `Connecting to bridge on ws://localhost:${port}`);
+  log('MCP', BADGE, `Connecting to bridge on ws://${host}:${port}`);
 
   function connect() {
     reconnectAttempts++;
     try {
       const tokenParam = discoveredToken ? `?token=${encodeURIComponent(discoveredToken)}` : '';
-      ws = new WebSocket(`ws://localhost:${discoveredPort}${tokenParam}`);
+      ws = new WebSocket(`ws://${host}:${discoveredPort}${tokenParam}`);
     } catch {
       if (reconnectAttempts <= 1) {
         log('MCP', BADGE_WARN, 'Bridge not available — retrying silently in background');

package/src/vite-plugin.js

@@ -32,7 +32,7 @@ function resolveToken(explicitToken) {
   return '';
 }
 
-export default function whatDevToolsMCP({ port = 9229, token = '' } = {}) {
+export default function whatDevToolsMCP({ port = 9229, token = '', host = '127.0.0.1' } = {}) {
   return {
     name: 'what-devtools-mcp',
     apply: 'serve',
@@ -47,7 +47,7 @@ Promise.all([
   import('what-devtools-mcp/client'),
 ]).then(([core, devtools, mcp]) => {
   devtools.installDevTools(core);
-  mcp.connectDevToolsMCP({ port: ${port}, token: ${JSON.stringify(tokenValue)} });
+  mcp.connectDevToolsMCP({ port: ${port}, token: ${JSON.stringify(tokenValue)}, host: ${JSON.stringify(host)} });
 }).catch((error) => {
   console.warn(
     '[what-devtools-mcp] DevTools injection failed. Install what-core, what-devtools, and what-devtools-mcp, then verify Vite aliases/package exports.',

package/vite-plugin.d.ts

@@ -0,0 +1,8 @@
+export interface WhatDevToolsMCPOptions {
+  port?: number;
+  token?: string;
+  /** Hostname injected into connectDevToolsMCP(). Defaults to 127.0.0.1. */
+  host?: string;
+}
+
+export default function whatDevToolsMCP(options?: WhatDevToolsMCPOptions): any;