@mcp-use/inspector 0.4.2 → 0.4.3-canary.1

package/dist/cli.js

@@ -0,0 +1,892 @@
+#!/usr/bin/env node
+
+// src/server/cli.ts
+import { serve } from "@hono/node-server";
+import { Hono } from "hono";
+import { cors } from "hono/cors";
+import { logger } from "hono/logger";
+import open from "open";
+
+// src/server/shared-utils-browser.ts
+function toBase64(str) {
+  if (typeof window !== "undefined" && typeof window.btoa === "function") {
+    return window.btoa(str);
+  }
+  if (typeof Buffer !== "undefined") {
+    return Buffer.from(str).toString("base64");
+  }
+  throw new Error("No base64 encoding method available");
+}
+async function* handleChatRequestStream(requestBody) {
+  const { mcpServerUrl, llmConfig, authConfig, messages } = requestBody;
+  if (!mcpServerUrl || !llmConfig || !messages) {
+    throw new Error("Missing required fields: mcpServerUrl, llmConfig, messages");
+  }
+  const { MCPAgent, MCPClient } = await import("mcp-use");
+  let llm;
+  if (llmConfig.provider === "openai") {
+    const { ChatOpenAI } = await import("@langchain/openai");
+    llm = new ChatOpenAI({
+      model: llmConfig.model,
+      apiKey: llmConfig.apiKey
+    });
+  } else if (llmConfig.provider === "anthropic") {
+    const { ChatAnthropic } = await import("@langchain/anthropic");
+    llm = new ChatAnthropic({
+      model: llmConfig.model,
+      apiKey: llmConfig.apiKey
+    });
+  } else if (llmConfig.provider === "google") {
+    const { ChatGoogleGenerativeAI } = await import("@langchain/google-genai");
+    llm = new ChatGoogleGenerativeAI({
+      model: llmConfig.model,
+      apiKey: llmConfig.apiKey
+    });
+  } else {
+    throw new Error(`Unsupported LLM provider: ${llmConfig.provider}`);
+  }
+  const client = new MCPClient();
+  const serverName = `inspector-${Date.now()}`;
+  const serverConfig = { url: mcpServerUrl };
+  if (authConfig && authConfig.type !== "none") {
+    serverConfig.headers = {};
+    if (authConfig.type === "basic" && authConfig.username && authConfig.password) {
+      const auth = toBase64(`${authConfig.username}:${authConfig.password}`);
+      serverConfig.headers.Authorization = `Basic ${auth}`;
+    } else if (authConfig.type === "bearer" && authConfig.token) {
+      serverConfig.headers.Authorization = `Bearer ${authConfig.token}`;
+    } else if (authConfig.type === "oauth") {
+      if (authConfig.oauthTokens?.access_token) {
+        const tokenType = authConfig.oauthTokens.token_type ? authConfig.oauthTokens.token_type.charAt(0).toUpperCase() + authConfig.oauthTokens.token_type.slice(1) : "Bearer";
+        serverConfig.headers.Authorization = `${tokenType} ${authConfig.oauthTokens.access_token}`;
+      }
+    }
+  }
+  try {
+    const url = new URL(mcpServerUrl);
+    if (url.username && url.password && (!authConfig || authConfig.type === "none")) {
+      const auth = toBase64(`${url.username}:${url.password}`);
+      serverConfig.headers = serverConfig.headers || {};
+      serverConfig.headers.Authorization = `Basic ${auth}`;
+      serverConfig.url = `${url.protocol}//${url.host}${url.pathname}${url.search}`;
+    }
+  } catch (error) {
+    console.warn("Failed to parse MCP server URL for auth:", error);
+  }
+  client.addServer(serverName, serverConfig);
+  const agent = new MCPAgent({
+    llm,
+    client,
+    maxSteps: 10,
+    memoryEnabled: true,
+    systemPrompt: "You are a helpful assistant with access to MCP tools, prompts, and resources. Help users interact with the MCP server."
+  });
+  const lastUserMessage = messages.filter((msg) => msg.role === "user").pop();
+  if (!lastUserMessage) {
+    throw new Error("No user message found");
+  }
+  try {
+    const messageId = `msg-${Date.now()}`;
+    yield `data: ${JSON.stringify({ type: "message", id: messageId, role: "assistant" })}
+
+`;
+    for await (const event of agent.streamEvents(lastUserMessage.content)) {
+      if (event.event === "on_chat_model_stream" && event.data?.chunk?.text) {
+        const text = event.data.chunk.text;
+        if (typeof text === "string" && text.length > 0) {
+          yield `data: ${JSON.stringify({ type: "text", id: messageId, content: text })}
+
+`;
+        }
+      } else if (event.event === "on_tool_start") {
+        const toolCallId = `tool-${event.name}-${Date.now()}`;
+        yield `data: ${JSON.stringify({
+          type: "tool-call",
+          id: messageId,
+          toolCallId,
+          toolName: event.name,
+          args: event.data?.input || {}
+        })}
+
+`;
+      } else if (event.event === "on_tool_end") {
+        const toolCallId = `tool-${event.name}-${Date.now()}`;
+        yield `data: ${JSON.stringify({
+          type: "tool-result",
+          id: messageId,
+          toolCallId,
+          toolName: event.name,
+          result: event.data?.output
+        })}
+
+`;
+      }
+    }
+    yield `data: ${JSON.stringify({ type: "done", id: messageId })}
+
+`;
+  } finally {
+    await client.closeAllSessions();
+  }
+}
+async function handleChatRequest(requestBody) {
+  const { mcpServerUrl, llmConfig, authConfig, messages } = requestBody;
+  if (!mcpServerUrl || !llmConfig || !messages) {
+    throw new Error("Missing required fields: mcpServerUrl, llmConfig, messages");
+  }
+  const { MCPAgent, MCPClient } = await import("mcp-use");
+  let llm;
+  if (llmConfig.provider === "openai") {
+    const { ChatOpenAI } = await import("@langchain/openai");
+    llm = new ChatOpenAI({
+      model: llmConfig.model,
+      apiKey: llmConfig.apiKey
+    });
+  } else if (llmConfig.provider === "anthropic") {
+    const { ChatAnthropic } = await import("@langchain/anthropic");
+    llm = new ChatAnthropic({
+      model: llmConfig.model,
+      apiKey: llmConfig.apiKey
+    });
+  } else if (llmConfig.provider === "google") {
+    const { ChatGoogleGenerativeAI } = await import("@langchain/google-genai");
+    llm = new ChatGoogleGenerativeAI({
+      model: llmConfig.model,
+      apiKey: llmConfig.apiKey
+    });
+  } else {
+    throw new Error(`Unsupported LLM provider: ${llmConfig.provider}`);
+  }
+  const client = new MCPClient();
+  const serverName = `inspector-${Date.now()}`;
+  const serverConfig = { url: mcpServerUrl };
+  if (authConfig && authConfig.type !== "none") {
+    serverConfig.headers = {};
+    if (authConfig.type === "basic" && authConfig.username && authConfig.password) {
+      const auth = toBase64(`${authConfig.username}:${authConfig.password}`);
+      serverConfig.headers.Authorization = `Basic ${auth}`;
+    } else if (authConfig.type === "bearer" && authConfig.token) {
+      serverConfig.headers.Authorization = `Bearer ${authConfig.token}`;
+    } else if (authConfig.type === "oauth") {
+      if (authConfig.oauthTokens?.access_token) {
+        const tokenType = authConfig.oauthTokens.token_type ? authConfig.oauthTokens.token_type.charAt(0).toUpperCase() + authConfig.oauthTokens.token_type.slice(1) : "Bearer";
+        serverConfig.headers.Authorization = `${tokenType} ${authConfig.oauthTokens.access_token}`;
+        console.log("Using OAuth access token for MCP server authentication");
+        console.log("Authorization header:", `${tokenType} ${authConfig.oauthTokens.access_token.substring(0, 20)}...`);
+      } else {
+        console.warn("OAuth selected but no access token provided");
+      }
+    }
+  }
+  try {
+    const url = new URL(mcpServerUrl);
+    if (url.username && url.password && (!authConfig || authConfig.type === "none")) {
+      const auth = toBase64(`${url.username}:${url.password}`);
+      serverConfig.headers = serverConfig.headers || {};
+      serverConfig.headers.Authorization = `Basic ${auth}`;
+      serverConfig.url = `${url.protocol}//${url.host}${url.pathname}${url.search}`;
+    }
+  } catch (error) {
+    console.warn("Failed to parse MCP server URL for auth:", error);
+  }
+  console.log("Adding server with config:", {
+    url: serverConfig.url,
+    hasHeaders: !!serverConfig.headers,
+    headers: serverConfig.headers
+  });
+  client.addServer(serverName, serverConfig);
+  const agent = new MCPAgent({
+    llm,
+    client,
+    maxSteps: 10,
+    memoryEnabled: true,
+    systemPrompt: "You are a helpful assistant with access to MCP tools, prompts, and resources. Help users interact with the MCP server."
+  });
+  const lastUserMessage = messages.filter((msg) => msg.role === "user").pop();
+  if (!lastUserMessage) {
+    throw new Error("No user message found");
+  }
+  const response = await agent.run(lastUserMessage.content);
+  await client.closeAllSessions();
+  return {
+    content: response,
+    toolCalls: []
+  };
+}
+var widgetDataStore = /* @__PURE__ */ new Map();
+setInterval(
+  () => {
+    const now = Date.now();
+    const ONE_HOUR = 60 * 60 * 1e3;
+    for (const [toolId, data] of widgetDataStore.entries()) {
+      if (now - data.timestamp > ONE_HOUR) {
+        widgetDataStore.delete(toolId);
+      }
+    }
+  },
+  5 * 60 * 1e3
+).unref();
+function storeWidgetData(data) {
+  const { serverId, uri, toolInput, toolOutput, resourceData, toolId } = data;
+  console.log("[Widget Store] Received request for toolId:", toolId);
+  console.log("[Widget Store] Fields:", { serverId, uri, hasResourceData: !!resourceData, hasToolInput: !!toolInput, hasToolOutput: !!toolOutput });
+  if (!serverId || !uri || !toolId || !resourceData) {
+    const missingFields = [];
+    if (!serverId)
+      missingFields.push("serverId");
+    if (!uri)
+      missingFields.push("uri");
+    if (!toolId)
+      missingFields.push("toolId");
+    if (!resourceData)
+      missingFields.push("resourceData");
+    console.error("[Widget Store] Missing required fields:", missingFields);
+    return { success: false, error: `Missing required fields: ${missingFields.join(", ")}` };
+  }
+  widgetDataStore.set(toolId, {
+    serverId,
+    uri,
+    toolInput,
+    toolOutput,
+    resourceData,
+    toolId,
+    timestamp: Date.now()
+  });
+  console.log("[Widget Store] Data stored successfully for toolId:", toolId);
+  return { success: true };
+}
+function getWidgetData(toolId) {
+  return widgetDataStore.get(toolId);
+}
+function generateWidgetContainerHtml(basePath, toolId) {
+  return `
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8">
+      <title>Loading Widget...</title>
+    </head>
+    <body>
+      <script>
+        (async function() {
+          try {
+            // Change URL to "/" BEFORE loading widget (for React Router)
+            history.replaceState(null, '', '/');
+
+            // Fetch the actual widget HTML using toolId
+            const response = await fetch('${basePath}/api/resources/widget-content/${toolId}');
+            const html = await response.text();
+
+            // Replace entire document with widget HTML using proper method
+            document.open();
+            // Write the HTML content - the browser will parse it properly
+            document.write(html);
+            document.close();
+          } catch (error) {
+            console.error('Failed to load widget:', error);
+            document.body.innerHTML = '<div style="padding: 20px; color: red;">Failed to load widget: ' + error.message + '</div>';
+          }
+        })();
+      </script>
+    </body>
+    </html>
+  `;
+}
+function generateWidgetContentHtml(widgetData) {
+  const { serverId, uri, toolInput, toolOutput, resourceData, toolId } = widgetData;
+  console.log("[Widget Content] Using pre-fetched resource for:", { serverId, uri });
+  let htmlContent = "";
+  const contentsArray = Array.isArray(resourceData?.contents) ? resourceData.contents : [];
+  const firstContent = contentsArray[0];
+  if (firstContent) {
+    if (typeof firstContent.text === "string") {
+      htmlContent = firstContent.text;
+    } else if (typeof firstContent.blob === "string") {
+      htmlContent = firstContent.blob;
+    }
+  }
+  if (!htmlContent && resourceData && typeof resourceData === "object") {
+    const recordContent = resourceData;
+    if (typeof recordContent.text === "string") {
+      htmlContent = recordContent.text;
+    } else if (typeof recordContent.blob === "string") {
+      htmlContent = recordContent.blob;
+    }
+  }
+  if (!htmlContent) {
+    return { html: "", error: "No HTML content found" };
+  }
+  const widgetStateKey = `openai-widget-state:${toolId}`;
+  const safeToolInput = JSON.stringify(toolInput).replace(/</g, "\\u003c").replace(/>/g, "\\u003e");
+  const safeToolOutput = JSON.stringify(toolOutput).replace(/</g, "\\u003c").replace(/>/g, "\\u003e");
+  const safeToolId = JSON.stringify(toolId);
+  const safeWidgetStateKey = JSON.stringify(widgetStateKey);
+  const apiScript = `
+    <script>
+      (function() {
+        'use strict';
+        
+        // Change URL to "/" for React Router compatibility
+        if (window.location.pathname !== '/') {
+          history.replaceState(null, '', '/');
+        }
+
+        const openaiAPI = {
+          toolInput: ${safeToolInput},
+          toolOutput: ${safeToolOutput},
+          displayMode: 'inline',
+          maxHeight: 600,
+          theme: 'dark',
+          locale: 'en-US',
+          safeArea: { insets: { top: 0, bottom: 0, left: 0, right: 0 } },
+          userAgent: {},
+          widgetState: null,
+
+          async setWidgetState(state) {
+            this.widgetState = state;
+            try {
+              localStorage.setItem(${safeWidgetStateKey}, JSON.stringify(state));
+            } catch (err) {
+              console.error('[OpenAI Widget] Failed to save widget state:', err);
+            }
+            window.parent.postMessage({
+              type: 'openai:setWidgetState',
+              toolId: ${safeToolId},
+              state
+            }, '*');
+          },
+
+          async callTool(toolName, params = {}) {
+            return new Promise((resolve, reject) => {
+              const requestId = \`tool_\${Date.now()}_\${Math.random()}\`;
+              const handler = (event) => {
+                if (event.data.type === 'openai:callTool:response' &&
+                    event.data.requestId === requestId) {
+                  window.removeEventListener('message', handler);
+                  if (event.data.error) {
+                    reject(new Error(event.data.error));
+                  } else {
+                    resolve(event.data.result);
+                  }
+                }
+              };
+              window.addEventListener('message', handler);
+              window.parent.postMessage({
+                type: 'openai:callTool',
+                requestId,
+                toolName,
+                params
+              }, '*');
+              setTimeout(() => {
+                window.removeEventListener('message', handler);
+                reject(new Error('Tool call timeout'));
+              }, 30000);
+            });
+          },
+
+          async sendFollowupTurn(message) {
+            const payload = typeof message === 'string'
+              ? { prompt: message }
+              : message;
+            window.parent.postMessage({
+              type: 'openai:sendFollowup',
+              message: payload.prompt || payload
+            }, '*');
+          },
+
+          async requestDisplayMode(options = {}) {
+            const mode = options.mode || 'inline';
+            this.displayMode = mode;
+            window.parent.postMessage({
+              type: 'openai:requestDisplayMode',
+              mode
+            }, '*');
+            return { mode };
+          },
+
+          async sendFollowUpMessage(args) {
+            const prompt = typeof args === 'string' ? args : (args?.prompt || '');
+            return this.sendFollowupTurn(prompt);
+          }
+        };
+
+        Object.defineProperty(window, 'openai', {
+          value: openaiAPI,
+          writable: false,
+          configurable: false,
+          enumerable: true
+        });
+
+        Object.defineProperty(window, 'webplus', {
+          value: openaiAPI,
+          writable: false,
+          configurable: false,
+          enumerable: true
+        });
+
+        setTimeout(() => {
+          try {
+            const globalsEvent = new CustomEvent('webplus:set_globals', {
+              detail: {
+                globals: {
+                  displayMode: openaiAPI.displayMode,
+                  maxHeight: openaiAPI.maxHeight,
+                  theme: openaiAPI.theme,
+                  locale: openaiAPI.locale,
+                  safeArea: openaiAPI.safeArea,
+                  userAgent: openaiAPI.userAgent
+                }
+              }
+            });
+            window.dispatchEvent(globalsEvent);
+          } catch (err) {}
+        }, 0);
+
+        setTimeout(() => {
+          try {
+            const stored = localStorage.getItem(${safeWidgetStateKey});
+            if (stored && window.openai) {
+              window.openai.widgetState = JSON.parse(stored);
+            }
+          } catch (err) {}
+        }, 0);
+      })();
+    </script>
+  `;
+  let modifiedHtml;
+  if (htmlContent.includes("<html>") && htmlContent.includes("<head>")) {
+    modifiedHtml = htmlContent.replace(
+      "<head>",
+      `<head><base href="/">${apiScript}`
+    );
+  } else {
+    modifiedHtml = `<!DOCTYPE html>
+<html>
+<head>
+  <base href="/">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  ${apiScript}
+  <title>Widget</title>
+</head>
+<body>
+  ${htmlContent}
+</body>
+</html>`;
+  }
+  console.log("[Widget Content] Generated HTML length:", modifiedHtml.length);
+  return { html: modifiedHtml };
+}
+function getWidgetSecurityHeaders() {
+  const trustedCdns = [
+    "https://persistent.oaistatic.com",
+    "https://*.oaistatic.com",
+    "https://unpkg.com",
+    "https://cdn.jsdelivr.net",
+    "https://cdnjs.cloudflare.com",
+    "https://cdn.skypack.dev"
+  ].join(" ");
+  return {
+    "Content-Security-Policy": [
+      "default-src 'self'",
+      `script-src 'self' 'unsafe-inline' 'unsafe-eval' ${trustedCdns}`,
+      "worker-src 'self' blob:",
+      "child-src 'self' blob:",
+      `style-src 'self' 'unsafe-inline' ${trustedCdns}`,
+      "img-src 'self' data: https: blob:",
+      "media-src 'self' data: https: blob:",
+      `font-src 'self' data: ${trustedCdns}`,
+      "connect-src 'self' https: wss: ws:",
+      "frame-ancestors 'self'"
+    ].join("; "),
+    "X-Frame-Options": "SAMEORIGIN",
+    "X-Content-Type-Options": "nosniff",
+    "Cache-Control": "no-cache, no-store, must-revalidate",
+    "Pragma": "no-cache",
+    "Expires": "0"
+  };
+}
+
+// src/server/utils.ts
+function isValidUrl(urlString) {
+  try {
+    const url = new URL(urlString);
+    return url.protocol === "http:" || url.protocol === "https:" || url.protocol === "ws:" || url.protocol === "wss:";
+  } catch {
+    return false;
+  }
+}
+async function findAvailablePort(startPort2 = 8080, maxAttempts = 100) {
+  const net = await import("net");
+  for (let port = startPort2; port < startPort2 + maxAttempts; port++) {
+    try {
+      await new Promise((resolve, reject) => {
+        const server = net.createServer();
+        server.listen(port, () => {
+          server.close(() => resolve());
+        });
+        server.on("error", (err) => reject(err));
+      });
+      return port;
+    } catch {
+      continue;
+    }
+  }
+  throw new Error(`No available port found after trying ${maxAttempts} ports starting from ${startPort2}`);
+}
+function formatErrorResponse(error, context) {
+  const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+  const errorMessage = error instanceof Error ? error.message : "Unknown error";
+  const errorStack = error instanceof Error ? error.stack : void 0;
+  console.error(`[${timestamp}] Error in ${context}:`, {
+    message: errorMessage,
+    stack: errorStack
+  });
+  return {
+    error: errorMessage,
+    context,
+    timestamp,
+    // Only include stack in development mode
+    ...process.env.NODE_ENV === "development" && errorStack ? { stack: errorStack } : {}
+  };
+}
+
+// src/server/shared-routes.ts
+function registerInspectorRoutes(app2, config) {
+  app2.get("/inspector/health", (c) => {
+    return c.json({ status: "ok", timestamp: (/* @__PURE__ */ new Date()).toISOString() });
+  });
+  app2.all("/inspector/api/proxy/*", async (c) => {
+    try {
+      const targetUrl = c.req.header("X-Target-URL");
+      if (!targetUrl) {
+        return c.json({ error: "X-Target-URL header is required" }, 400);
+      }
+      const method = c.req.method;
+      const headers = {};
+      const requestHeaders = c.req.header();
+      for (const [key, value] of Object.entries(requestHeaders)) {
+        if (!key.toLowerCase().startsWith("x-proxy-") && !key.toLowerCase().startsWith("x-target-") && key.toLowerCase() !== "host") {
+          headers[key] = value;
+        }
+      }
+      try {
+        const targetUrlObj = new URL(targetUrl);
+        headers.Host = targetUrlObj.host;
+      } catch {
+        return c.json({ error: "Invalid target URL" }, 400);
+      }
+      const body = method !== "GET" && method !== "HEAD" ? await c.req.arrayBuffer() : void 0;
+      const response = await fetch(targetUrl, {
+        method,
+        headers,
+        body: body ? new Uint8Array(body) : void 0
+      });
+      const responseHeaders = {};
+      response.headers.forEach((value, key) => {
+        responseHeaders[key] = value;
+      });
+      return new Response(response.body, {
+        status: response.status,
+        statusText: response.statusText,
+        headers: responseHeaders
+      });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unknown error";
+      console.error("Proxy request failed:", message, error);
+      return c.json({ error: "Proxy request failed", details: message }, 500);
+    }
+  });
+  app2.post("/inspector/api/chat/stream", async (c) => {
+    try {
+      const requestBody = await c.req.json();
+      const { readable, writable } = new globalThis.TransformStream();
+      const writer = writable.getWriter();
+      const encoder = new TextEncoder();
+      (async () => {
+        try {
+          for await (const chunk of handleChatRequestStream(requestBody)) {
+            await writer.write(encoder.encode(chunk));
+          }
+        } catch (error) {
+          const errorMsg = `${JSON.stringify({
+            type: "error",
+            data: { message: error instanceof Error ? error.message : "Unknown error" }
+          })}
+`;
+          await writer.write(encoder.encode(errorMsg));
+        } finally {
+          await writer.close();
+        }
+      })();
+      return new Response(readable, {
+        headers: {
+          "Content-Type": "text/event-stream",
+          "Cache-Control": "no-cache",
+          "Connection": "keep-alive"
+        }
+      });
+    } catch (error) {
+      return c.json(formatErrorResponse(error, "handleChatRequestStream"), 500);
+    }
+  });
+  app2.post("/inspector/api/chat", async (c) => {
+    try {
+      const requestBody = await c.req.json();
+      const result = await handleChatRequest(requestBody);
+      return c.json(result);
+    } catch (error) {
+      return c.json(formatErrorResponse(error, "handleChatRequest"), 500);
+    }
+  });
+  app2.post("/inspector/api/resources/widget/store", async (c) => {
+    try {
+      const body = await c.req.json();
+      const result = storeWidgetData(body);
+      if (!result.success) {
+        return c.json(result, 400);
+      }
+      return c.json(result);
+    } catch (error) {
+      console.error("[Widget Store] Error:", error);
+      console.error("[Widget Store] Stack:", error instanceof Error ? error.stack : "");
+      return c.json(formatErrorResponse(error, "storeWidgetData"), 500);
+    }
+  });
+  app2.get("/inspector/api/resources/widget/:toolId", async (c) => {
+    const toolId = c.req.param("toolId");
+    const widgetData = getWidgetData(toolId);
+    if (!widgetData) {
+      return c.html(
+        "<html><body>Error: Widget data not found or expired</body></html>",
+        404
+      );
+    }
+    return c.html(generateWidgetContainerHtml("/inspector", toolId));
+  });
+  app2.get("/inspector/api/resources/widget-content/:toolId", async (c) => {
+    try {
+      const toolId = c.req.param("toolId");
+      const widgetData = getWidgetData(toolId);
+      if (!widgetData) {
+        console.error("[Widget Content] Widget data not found for toolId:", toolId);
+        return c.html(
+          "<html><body>Error: Widget data not found or expired</body></html>",
+          404
+        );
+      }
+      const result = generateWidgetContentHtml(widgetData);
+      if (result.error) {
+        return c.html(`<html><body>Error: ${result.error}</body></html>`, 404);
+      }
+      const headers = getWidgetSecurityHeaders();
+      Object.entries(headers).forEach(([key, value]) => {
+        c.header(key, value);
+      });
+      return c.html(result.html);
+    } catch (error) {
+      console.error("[Widget Content] Error:", error);
+      const errorMessage = error instanceof Error ? error.message : "Unknown error";
+      const errorStack = error instanceof Error ? error.stack : "";
+      console.error("[Widget Content] Stack:", errorStack);
+      return c.html(
+        `<html><body>Error: ${errorMessage}</body></html>`,
+        500
+      );
+    }
+  });
+  app2.get("/inspector/config.json", (c) => {
+    return c.json({
+      autoConnectUrl: config?.autoConnectUrl || null
+    });
+  });
+}
+
+// src/server/shared-static.ts
+import { existsSync as existsSync2, readFileSync } from "fs";
+import { join as join2 } from "path";
+
+// src/server/shared-utils.ts
+import { Buffer as Buffer2 } from "buffer";
+import { existsSync } from "fs";
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
+function getContentType(filePath) {
+  if (filePath.endsWith(".js")) {
+    return "application/javascript";
+  } else if (filePath.endsWith(".css")) {
+    return "text/css";
+  } else if (filePath.endsWith(".svg")) {
+    return "image/svg+xml";
+  } else if (filePath.endsWith(".html")) {
+    return "text/html";
+  } else if (filePath.endsWith(".json")) {
+    return "application/json";
+  } else if (filePath.endsWith(".png")) {
+    return "image/png";
+  } else if (filePath.endsWith(".jpg") || filePath.endsWith(".jpeg")) {
+    return "image/jpeg";
+  } else if (filePath.endsWith(".ico")) {
+    return "image/x-icon";
+  } else {
+    return "application/octet-stream";
+  }
+}
+function checkClientFiles(clientDistPath) {
+  return existsSync(clientDistPath);
+}
+function getClientDistPath() {
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = dirname(__filename);
+  if (__dirname.endsWith("dist") || __dirname.endsWith("dist/")) {
+    return join(__dirname, "client");
+  }
+  return join(__dirname, "../client");
+}
+var widgetDataStore2 = /* @__PURE__ */ new Map();
+setInterval(
+  () => {
+    const now = Date.now();
+    const ONE_HOUR = 60 * 60 * 1e3;
+    for (const [toolId, data] of widgetDataStore2.entries()) {
+      if (now - data.timestamp > ONE_HOUR) {
+        widgetDataStore2.delete(toolId);
+      }
+    }
+  },
+  5 * 60 * 1e3
+).unref();
+
+// src/server/shared-static.ts
+function registerStaticRoutes(app2, clientDistPath) {
+  const distPath = clientDistPath || getClientDistPath();
+  if (!checkClientFiles(distPath)) {
+    console.warn(`\u26A0\uFE0F  MCP Inspector client files not found at ${distPath}`);
+    console.warn(`   Run 'yarn build' in the inspector package to build the UI`);
+    app2.get("*", (c) => {
+      return c.html(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>MCP Inspector</title>
+        </head>
+        <body>
+          <h1>MCP Inspector</h1>
+          <p>Client files not found. Please run 'yarn build' to build the UI.</p>
+        </body>
+      </html>
+    `);
+    });
+    return;
+  }
+  app2.get("/inspector/assets/*", (c) => {
+    const path = c.req.path.replace("/inspector/assets/", "assets/");
+    const fullPath = join2(distPath, path);
+    if (existsSync2(fullPath)) {
+      const content = readFileSync(fullPath);
+      const contentType = getContentType(fullPath);
+      c.header("Content-Type", contentType);
+      return c.body(content);
+    }
+    return c.notFound();
+  });
+  app2.get("/", (c) => {
+    return c.redirect("/inspector");
+  });
+  app2.get("*", (c) => {
+    const indexPath = join2(distPath, "index.html");
+    if (existsSync2(indexPath)) {
+      const content = readFileSync(indexPath, "utf-8");
+      return c.html(content);
+    }
+    return c.html(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>MCP Inspector</title>
+        </head>
+        <body>
+          <h1>MCP Inspector</h1>
+          <p>Client files not found. Please run 'yarn build' to build the UI.</p>
+        </body>
+      </html>
+    `);
+  });
+}
+
+// src/server/cli.ts
+var args = process.argv.slice(2);
+var mcpUrl;
+var startPort = 8080;
+for (let i = 0; i < args.length; i++) {
+  if (args[i] === "--url" && i + 1 < args.length) {
+    const url = args[i + 1];
+    if (!isValidUrl(url)) {
+      console.error(`Error: Invalid URL format: ${url}`);
+      console.error("URL must start with http://, https://, ws://, or wss://");
+      process.exit(1);
+    }
+    mcpUrl = url;
+    i++;
+  } else if (args[i] === "--port" && i + 1 < args.length) {
+    const parsedPort = Number.parseInt(args[i + 1], 10);
+    if (Number.isNaN(parsedPort) || parsedPort < 1 || parsedPort > 65535) {
+      console.error(`Error: Port must be a number between 1 and 65535, got: ${args[i + 1]}`);
+      process.exit(1);
+    }
+    startPort = parsedPort;
+    i++;
+  } else if (args[i] === "--help" || args[i] === "-h") {
+    console.log(`
+MCP Inspector - Inspect and debug MCP servers
+
+Usage:
+  npx @mcp-use/inspector [options]
+
+Options:
+  --url <url>    MCP server URL to auto-connect to (e.g., http://localhost:3000/mcp)
+  --port <port>  Starting port to try (default: 8080, will find next available)
+  --help, -h     Show this help message
+
+Examples:
+  # Run inspector with auto-connect
+  npx @mcp-use/inspector --url http://localhost:3000/mcp
+
+  # Run starting from custom port
+  npx @mcp-use/inspector --url http://localhost:3000/mcp --port 9000
+
+  # Run without auto-connect
+  npx @mcp-use/inspector
+`);
+    process.exit(0);
+  }
+}
+var app = new Hono();
+app.use("*", cors());
+app.use("*", logger());
+registerInspectorRoutes(app, { autoConnectUrl: mcpUrl });
+registerStaticRoutes(app);
+async function startServer() {
+  try {
+    const port = await findAvailablePort(startPort);
+    serve({
+      fetch: app.fetch,
+      port
+    });
+    console.log(`\u{1F680} MCP Inspector running on http://localhost:${port}`);
+    if (mcpUrl) {
+      console.log(`\u{1F4E1} Auto-connecting to: ${mcpUrl}`);
+    }
+    try {
+      await open(`http://localhost:${port}/inspector`);
+      console.log(`\u{1F310} Browser opened`);
+    } catch {
+      console.log(`\u{1F310} Please open http://localhost:${port}/inspector in your browser`);
+    }
+    return { port, fetch: app.fetch };
+  } catch (error) {
+    console.error("Failed to start server:", error);
+    process.exit(1);
+  }
+}
+startServer();