mcp-use 1.10.5 → 1.11.0-canary.10

package/dist/src/react/index.cjs

@@ -246,7 +246,7 @@ var Logger = class {
           timestamp({ format: "HH:mm:ss" }),
           this.getFormatter()
         ),
-        transports: []
+        transports: [new winston.transports.Console()]
       });
     }
     return this.instances[name];
@@ -482,6 +482,7 @@ var SseConnectionManager = class extends ConnectionManager {
   url;
   opts;
   _transport = null;
+  reinitializing = false;
   /**
    * Create an SSE connection manager.
    *
@@ -494,12 +495,53 @@ var SseConnectionManager = class extends ConnectionManager {
     this.opts = opts;
   }
   /**
-   * Spawn a new `SSEClientTransport` and start the connection.
+   * Spawn a new `SSEClientTransport` and wrap it with 404 handling.
+   * Per MCP spec, clients MUST re-initialize when receiving 404 for stale sessions.
    */
   async establishConnection() {
-    this._transport = new import_sse.SSEClientTransport(this.url, this.opts);
+    const transport = new import_sse.SSEClientTransport(this.url, this.opts);
+    const originalSend = transport.send.bind(transport);
+    transport.send = async (message) => {
+      const sendMessage = /* @__PURE__ */ __name(async (msg) => {
+        if (Array.isArray(msg)) {
+          for (const singleMsg of msg) {
+            await originalSend(singleMsg);
+          }
+        } else {
+          await originalSend(msg);
+        }
+      }, "sendMessage");
+      try {
+        await sendMessage(message);
+      } catch (error) {
+        if (error?.code === 404 && transport.sessionId && !this.reinitializing) {
+          logger.warn(
+            `[SSE] Session not found (404), re-initializing per MCP spec...`
+          );
+          this.reinitializing = true;
+          try {
+            transport.sessionId = void 0;
+            await this.reinitialize(transport);
+            logger.info(`[SSE] Re-initialization successful, retrying request`);
+            await sendMessage(message);
+          } finally {
+            this.reinitializing = false;
+          }
+        } else {
+          throw error;
+        }
+      }
+    };
+    this._transport = transport;
     logger.debug(`${this.constructor.name} connected successfully`);
-    return this._transport;
+    return transport;
+  }
+  /**
+   * Re-initialize the transport with a new session
+   * This is called when the server returns 404 for a stale session
+   */
+  async reinitialize(transport) {
+    logger.debug(`[SSE] Re-initialization triggered`);
   }
   /**
    * Close the underlying transport and clean up resources.
@@ -876,7 +918,7 @@ function generateUUID() {
 __name(generateUUID, "generateUUID");
 
 // src/version.ts
-var VERSION = "1.10.5";
+var VERSION = "1.11.0-canary.10";
 function getPackageVersion() {
   return VERSION;
 }
@@ -1806,6 +1848,20 @@ var BaseConnector = class {
     logger.debug(`Tool '${name}' returned`, res);
     return res;
   }
+  /**
+   * List all available tools from the MCP server.
+   * This method fetches fresh tools from the server, unlike the `tools` getter which returns cached tools.
+   *
+   * @param options - Optional request options
+   * @returns Array of available tools
+   */
+  async listTools(options) {
+    if (!this.client) {
+      throw new Error("MCP client is not connected");
+    }
+    const result = await this.client.listTools(void 0, options);
+    return result.tools ?? [];
+  }
   /**
    * List resources from the server with optional pagination
    *
@@ -2249,279 +2305,6 @@ var HttpConnector = class extends BaseConnector {
   }
 };
 
-// src/task_managers/websocket.ts
-var import_ws = __toESM(require("ws"), 1);
-var WebSocketConnectionManager = class extends ConnectionManager {
-  static {
-    __name(this, "WebSocketConnectionManager");
-  }
-  url;
-  headers;
-  _ws = null;
-  /**
-   * @param url     The WebSocket URL to connect to.
-   * @param headers Optional headers to include in the connection handshake.
-   */
-  constructor(url, headers = {}) {
-    super();
-    this.url = url;
-    this.headers = headers;
-  }
-  /** Establish a WebSocket connection and wait until it is open. */
-  async establishConnection() {
-    logger.debug(`Connecting to WebSocket: ${this.url}`);
-    return new Promise((resolve, reject) => {
-      const ws = new import_ws.default(this.url, {
-        headers: this.headers
-      });
-      this._ws = ws;
-      const onOpen = /* @__PURE__ */ __name(() => {
-        cleanup();
-        logger.debug("WebSocket connected successfully");
-        resolve(ws);
-      }, "onOpen");
-      const onError = /* @__PURE__ */ __name((err) => {
-        cleanup();
-        logger.error(`Failed to connect to WebSocket: ${err}`);
-        reject(err);
-      }, "onError");
-      const cleanup = /* @__PURE__ */ __name(() => {
-        ws.off("open", onOpen);
-        ws.off("error", onError);
-      }, "cleanup");
-      ws.on("open", onOpen);
-      ws.on("error", onError);
-    });
-  }
-  /** Cleanly close the WebSocket connection. */
-  async closeConnection(connection) {
-    logger.debug("Closing WebSocket connection");
-    return new Promise((resolve) => {
-      const onClose = /* @__PURE__ */ __name(() => {
-        connection.off("close", onClose);
-        this._ws = null;
-        resolve();
-      }, "onClose");
-      if (connection.readyState === import_ws.default.CLOSED) {
-        onClose();
-        return;
-      }
-      connection.on("close", onClose);
-      try {
-        connection.close();
-      } catch (e) {
-        logger.warn(`Error closing WebSocket connection: ${e}`);
-        onClose();
-      }
-    });
-  }
-};
-
-// src/connectors/websocket.ts
-var WebSocketConnector = class extends BaseConnector {
-  static {
-    __name(this, "WebSocketConnector");
-  }
-  url;
-  headers;
-  connectionManager = null;
-  ws = null;
-  receiverTask = null;
-  pending = /* @__PURE__ */ new Map();
-  toolsCache = null;
-  constructor(url, opts = {}) {
-    super();
-    this.url = url;
-    this.headers = { ...opts.headers ?? {} };
-    if (opts.authToken) this.headers.Authorization = `Bearer ${opts.authToken}`;
-  }
-  async connect() {
-    if (this.connected) {
-      logger.debug("Already connected to MCP implementation");
-      return;
-    }
-    logger.debug(`Connecting via WebSocket: ${this.url}`);
-    try {
-      this.connectionManager = new WebSocketConnectionManager(
-        this.url,
-        this.headers
-      );
-      this.ws = await this.connectionManager.start();
-      this.receiverTask = this.receiveLoop();
-      this.connected = true;
-      logger.debug("WebSocket connected successfully");
-    } catch (e) {
-      logger.error(`Failed to connect: ${e}`);
-      await this.cleanupResources();
-      throw e;
-    }
-  }
-  async disconnect() {
-    if (!this.connected) {
-      logger.debug("Not connected to MCP implementation");
-      return;
-    }
-    logger.debug("Disconnecting \u2026");
-    await this.cleanupResources();
-    this.connected = false;
-  }
-  sendRequest(method, params = null) {
-    if (!this.ws) throw new Error("WebSocket is not connected");
-    const id = generateUUID();
-    const payload = JSON.stringify({ id, method, params: params ?? {} });
-    return new Promise((resolve, reject) => {
-      this.pending.set(id, { resolve, reject });
-      this.ws.send(payload, (err) => {
-        if (err) {
-          this.pending.delete(id);
-          reject(err);
-        }
-      });
-    });
-  }
-  async receiveLoop() {
-    if (!this.ws) return;
-    const socket = this.ws;
-    const onMessage = /* @__PURE__ */ __name((msg) => {
-      let data;
-      try {
-        data = JSON.parse(msg.data ?? msg);
-      } catch (e) {
-        logger.warn("Received non\u2011JSON frame", e);
-        return;
-      }
-      const id = data.id;
-      if (id && this.pending.has(id)) {
-        const { resolve, reject } = this.pending.get(id);
-        this.pending.delete(id);
-        if ("result" in data) resolve(data.result);
-        else if ("error" in data) reject(data.error);
-      } else if (data.method && !data.id) {
-        logger.debug("Received notification", data.method, data.params);
-        this.handleNotification(data);
-      } else {
-        logger.debug("Received unsolicited message", data);
-      }
-    }, "onMessage");
-    if (socket.addEventListener) {
-      socket.addEventListener("message", onMessage);
-    } else {
-      socket.on("message", onMessage);
-    }
-    return new Promise((resolve) => {
-      const onClose = /* @__PURE__ */ __name(() => {
-        if (socket.removeEventListener) {
-          socket.removeEventListener("message", onMessage);
-        } else {
-          socket.off("message", onMessage);
-        }
-        this.rejectAll(new Error("WebSocket closed"));
-        resolve();
-      }, "onClose");
-      if (socket.addEventListener) {
-        socket.addEventListener("close", onClose);
-      } else {
-        socket.on("close", onClose);
-      }
-    });
-  }
-  rejectAll(err) {
-    for (const { reject } of this.pending.values()) reject(err);
-    this.pending.clear();
-  }
-  async handleNotification(data) {
-    switch (data.method) {
-      case "notifications/tools/list_changed":
-        await this.refreshToolsCache();
-        break;
-      case "notifications/resources/list_changed":
-        await this.onResourcesListChanged();
-        break;
-      case "notifications/prompts/list_changed":
-        await this.onPromptsListChanged();
-        break;
-      default:
-        break;
-    }
-    for (const handler of this.notificationHandlers) {
-      try {
-        await handler({
-          method: data.method,
-          params: data.params
-        });
-      } catch (err) {
-        logger.error("Error in notification handler:", err);
-      }
-    }
-  }
-  /**
-   * Auto-refresh tools cache when server sends tools/list_changed notification
-   * Override to use WebSocket-specific listTools method
-   */
-  async refreshToolsCache() {
-    try {
-      logger.debug(
-        "[Auto] Refreshing tools cache due to list_changed notification"
-      );
-      const tools = await this.listTools();
-      this.toolsCache = tools.map((t) => t);
-      logger.debug(
-        `[Auto] Refreshed tools cache: ${this.toolsCache.length} tools`
-      );
-    } catch (err) {
-      logger.warn("[Auto] Failed to refresh tools cache:", err);
-    }
-  }
-  async initialize() {
-    logger.debug("Initializing MCP session over WebSocket");
-    const result = await this.sendRequest("initialize");
-    const toolsList = await this.listTools();
-    this.toolsCache = toolsList.map((t) => t);
-    logger.debug(`Initialized with ${this.toolsCache.length} tools`);
-    return result;
-  }
-  async listTools() {
-    const res = await this.sendRequest("tools/list");
-    return res.tools ?? [];
-  }
-  async callTool(name, args) {
-    return await this.sendRequest("tools/call", { name, arguments: args });
-  }
-  async listResources() {
-    const resources = await this.sendRequest("resources/list");
-    return { resources: Array.isArray(resources) ? resources : [] };
-  }
-  async readResource(uri) {
-    const res = await this.sendRequest("resources/read", { uri });
-    return res;
-  }
-  async request(method, params = null) {
-    return await this.sendRequest(method, params);
-  }
-  get tools() {
-    if (!this.toolsCache) throw new Error("MCP client is not initialized");
-    return this.toolsCache;
-  }
-  async cleanupResources() {
-    if (this.receiverTask) await this.receiverTask.catch(() => {
-    });
-    this.receiverTask = null;
-    this.rejectAll(new Error("WebSocket disconnected"));
-    if (this.connectionManager) {
-      await this.connectionManager.stop();
-      this.connectionManager = null;
-      this.ws = null;
-    }
-    this.toolsCache = null;
-  }
-  get publicIdentifier() {
-    return {
-      type: "websocket",
-      url: this.url
-    };
-  }
-};
-
 // src/session.ts
 var MCPSession = class {
   static {
@@ -2607,6 +2390,22 @@ var MCPSession = class {
   get tools() {
     return this.connector.tools;
   }
+  /**
+   * List all available tools from the MCP server.
+   * This method fetches fresh tools from the server, unlike the `tools` getter which returns cached tools.
+   *
+   * @param options - Optional request options
+   * @returns Array of available tools
+   *
+   * @example
+   * ```typescript
+   * const tools = await session.listTools();
+   * console.log(`Available tools: ${tools.map(t => t.name).join(", ")}`);
+   * ```
+   */
+  async listTools(options) {
+    return this.connector.listTools(options);
+  }
   /**
    * Get the server capabilities advertised during initialization.
    *
@@ -2627,7 +2426,7 @@ var MCPSession = class {
    * Call a tool on the server.
    *
    * @param name - Name of the tool to call
-   * @param args - Arguments to pass to the tool
+   * @param args - Arguments to pass to the tool (defaults to empty object)
    * @param options - Optional request options (timeout, progress handlers, etc.)
    * @returns Result from the tool execution
    *
@@ -2637,7 +2436,7 @@ var MCPSession = class {
    * console.log(`Result: ${result.content[0].text}`);
    * ```
    */
-  async callTool(name, args, options) {
+  async callTool(name, args = {}, options) {
     return this.connector.callTool(name, args, options);
   }
   /**
@@ -2852,6 +2651,15 @@ var BaseMCPClient = class {
     }
     return session;
   }
+  requireSession(serverName) {
+    const session = this.sessions[serverName];
+    if (!session) {
+      throw new Error(
+        `Session '${serverName}' not found. Available sessions: ${this.activeSessions.join(", ") || "none"}`
+      );
+    }
+    return session;
+  }
   getAllActiveSessions() {
     return Object.fromEntries(
       this.activeSessions.map((n) => [n, this.sessions[n]])
@@ -2937,12 +2745,11 @@ var BrowserMCPClient = class _BrowserMCPClient extends BaseMCPClient {
   }
   /**
    * Create a connector from server configuration (Browser version)
-   * Supports HTTP and WebSocket connectors only
+   * Supports HTTP connector only
    */
   createConnectorFromConfig(serverConfig) {
     const {
       url,
-      transport,
       headers,
       authToken,
       authProvider,
@@ -2978,13 +2785,7 @@ var BrowserMCPClient = class _BrowserMCPClient extends BaseMCPClient {
         "[BrowserMCPClient] No clientOptions provided to connector!"
       );
     }
-    if (transport === "websocket" || url.startsWith("ws://") || url.startsWith("wss://")) {
-      return new WebSocketConnector(url, connectorOptions);
-    } else if (transport === "http" || url.startsWith("http://") || url.startsWith("https://")) {
-      return new HttpConnector(url, connectorOptions);
-    } else {
-      return new HttpConnector(url, connectorOptions);
-    }
+    return new HttpConnector(url, connectorOptions);
   }
 };
 
@@ -3306,6 +3107,11 @@ function useMcp(options) {
       if (clientRef.current) {
         try {
           const serverName = "inspector-server";
+          const session = clientRef.current.getSession(serverName);
+          if (session && session._healthCheckCleanup) {
+            session._healthCheckCleanup();
+            session._healthCheckCleanup = null;
+          }
           await clientRef.current.closeSession(serverName);
         } catch (err) {
           if (!quiet) addLog("warn", "Error closing session:", err);
@@ -3445,9 +3251,25 @@ function useMcp(options) {
           serverName,
           false
         );
-        if (onNotification) {
-          session.on("notification", onNotification);
-        }
+        session.on("notification", (notification) => {
+          onNotification?.(notification);
+          if (notification.method === "notifications/tools/list_changed") {
+            addLog("info", "Tools list changed, auto-refreshing...");
+            refreshTools().catch(
+              (err) => addLog("warn", "Auto-refresh tools failed:", err)
+            );
+          } else if (notification.method === "notifications/resources/list_changed") {
+            addLog("info", "Resources list changed, auto-refreshing...");
+            refreshResources().catch(
+              (err) => addLog("warn", "Auto-refresh resources failed:", err)
+            );
+          } else if (notification.method === "notifications/prompts/list_changed") {
+            addLog("info", "Prompts list changed, auto-refreshing...");
+            refreshPrompts().catch(
+              (err) => addLog("warn", "Auto-refresh prompts failed:", err)
+            );
+          }
+        });
         await session.initialize();
         addLog("info", "\u2705 Successfully connected to MCP server");
         addLog("info", "Server info:", session.connector.serverInfo);
@@ -3463,6 +3285,63 @@ function useMcp(options) {
         );
         setState("ready");
         successfulTransportRef.current = transportTypeParam;
+        const setupConnectionMonitoring = /* @__PURE__ */ __name(() => {
+          let healthCheckInterval = null;
+          let lastSuccessfulCheck = Date.now();
+          const HEALTH_CHECK_INTERVAL = 1e4;
+          const HEALTH_CHECK_TIMEOUT = 3e4;
+          const checkConnectionHealth = /* @__PURE__ */ __name(async () => {
+            if (!isMountedRef.current || stateRef.current !== "ready") {
+              if (healthCheckInterval) {
+                clearInterval(healthCheckInterval);
+                healthCheckInterval = null;
+              }
+              return;
+            }
+            try {
+              await session.connector.listTools();
+              lastSuccessfulCheck = Date.now();
+            } catch (err) {
+              const timeSinceLastSuccess = Date.now() - lastSuccessfulCheck;
+              if (timeSinceLastSuccess > HEALTH_CHECK_TIMEOUT) {
+                addLog(
+                  "warn",
+                  `Connection appears to be broken (no response for ${Math.round(timeSinceLastSuccess / 1e3)}s), attempting to reconnect...`
+                );
+                if (healthCheckInterval) {
+                  clearInterval(healthCheckInterval);
+                  healthCheckInterval = null;
+                }
+                if (autoReconnectRef.current && isMountedRef.current) {
+                  setState("discovering");
+                  addLog("info", "Auto-reconnecting to MCP server...");
+                  setTimeout(
+                    () => {
+                      if (isMountedRef.current && stateRef.current === "discovering") {
+                        connect();
+                      }
+                    },
+                    typeof autoReconnectRef.current === "number" ? autoReconnectRef.current : DEFAULT_RECONNECT_DELAY
+                  );
+                }
+              }
+            }
+          }, "checkConnectionHealth");
+          healthCheckInterval = setInterval(
+            checkConnectionHealth,
+            HEALTH_CHECK_INTERVAL
+          );
+          return () => {
+            if (healthCheckInterval) {
+              clearInterval(healthCheckInterval);
+              healthCheckInterval = null;
+            }
+          };
+        }, "setupConnectionMonitoring");
+        if (autoReconnect) {
+          const cleanup = setupConnectionMonitoring();
+          session._healthCheckCleanup = cleanup;
+        }
         Tel.getInstance().trackUseMcpConnection({
           url,
           transportType: transportTypeParam,
@@ -3814,6 +3693,70 @@ function useMcp(options) {
       throw err;
     }
   }, [state]);
+  const refreshTools = (0, import_react.useCallback)(async () => {
+    if (stateRef.current !== "ready" || !clientRef.current) {
+      addLog("debug", "Cannot refresh tools - client not ready");
+      return;
+    }
+    addLog("debug", "Refreshing tools list");
+    try {
+      const serverName = "inspector-server";
+      const session = clientRef.current.getSession(serverName);
+      if (!session) {
+        addLog("warn", "No active session found for tools refresh");
+        return;
+      }
+      const toolsResult = await session.connector.listTools();
+      setTools(toolsResult || []);
+      addLog("info", "Tools list refreshed successfully");
+    } catch (err) {
+      addLog("warn", "Failed to refresh tools:", err);
+    }
+  }, [addLog]);
+  const refreshResources = (0, import_react.useCallback)(async () => {
+    if (stateRef.current !== "ready" || !clientRef.current) {
+      addLog("debug", "Cannot refresh resources - client not ready");
+      return;
+    }
+    addLog("debug", "Refreshing resources list");
+    try {
+      const serverName = "inspector-server";
+      const session = clientRef.current.getSession(serverName);
+      if (!session) {
+        addLog("warn", "No active session found for resources refresh");
+        return;
+      }
+      const resourcesResult = await session.connector.listAllResources();
+      setResources(resourcesResult.resources || []);
+      addLog("info", "Resources list refreshed successfully");
+    } catch (err) {
+      addLog("warn", "Failed to refresh resources:", err);
+    }
+  }, [addLog]);
+  const refreshPrompts = (0, import_react.useCallback)(async () => {
+    if (stateRef.current !== "ready" || !clientRef.current) {
+      addLog("debug", "Cannot refresh prompts - client not ready");
+      return;
+    }
+    addLog("debug", "Refreshing prompts list");
+    try {
+      const serverName = "inspector-server";
+      const session = clientRef.current.getSession(serverName);
+      if (!session) {
+        addLog("warn", "No active session found for prompts refresh");
+        return;
+      }
+      const promptsResult = await session.connector.listPrompts();
+      setPrompts(promptsResult.prompts || []);
+      addLog("info", "Prompts list refreshed successfully");
+    } catch (err) {
+      addLog("warn", "Failed to refresh prompts:", err);
+    }
+  }, [addLog]);
+  const refreshAll = (0, import_react.useCallback)(async () => {
+    addLog("info", "Refreshing all lists (tools, resources, prompts)");
+    await Promise.all([refreshTools(), refreshResources(), refreshPrompts()]);
+  }, [refreshTools, refreshResources, refreshPrompts, addLog]);
   const getPrompt = (0, import_react.useCallback)(
     async (name, args) => {
       if (stateRef.current !== "ready" || !clientRef.current) {
@@ -3965,6 +3908,10 @@ function useMcp(options) {
     listResources,
     listPrompts,
     getPrompt,
+    refreshTools,
+    refreshResources,
+    refreshPrompts,
+    refreshAll,
     retry,
     disconnect,
     authenticate,
@@ -4270,6 +4217,15 @@ function useWidget(defaultProps) {
   const toolInput = provider === "openai" ? useOpenAiGlobal("toolInput") : urlParams.toolInput;
   const toolOutput = provider === "openai" ? useOpenAiGlobal("toolOutput") : urlParams.toolOutput;
   const toolResponseMetadata = useOpenAiGlobal("toolResponseMetadata");
+  const widgetProps = (0, import_react4.useMemo)(() => {
+    if (toolResponseMetadata && typeof toolResponseMetadata === "object") {
+      const metaProps = toolResponseMetadata["mcp-use/props"];
+      if (metaProps) {
+        return metaProps;
+      }
+    }
+    return defaultProps || {};
+  }, [toolResponseMetadata, defaultProps]);
   const widgetState = useOpenAiGlobal("widgetState");
   const theme = useOpenAiGlobal("theme");
   const displayMode = useOpenAiGlobal("displayMode");
@@ -4334,9 +4290,13 @@ function useWidget(defaultProps) {
     },
     [widgetState, localWidgetState]
   );
+  const isPending = (0, import_react4.useMemo)(() => {
+    return provider === "openai" && toolResponseMetadata === null;
+  }, [provider, toolResponseMetadata]);
   return {
     // Props and state (with defaults)
-    props: toolInput || defaultProps || {},
+    props: widgetProps,
+    toolInput: toolInput || {},
     output: toolOutput ?? null,
     metadata: toolResponseMetadata ?? null,
     state: localWidgetState,
@@ -4358,7 +4318,8 @@ function useWidget(defaultProps) {
     openExternal,
     requestDisplayMode,
     // Availability
-    isAvailable: isOpenAiAvailable
+    isAvailable: isOpenAiAvailable,
+    isPending
   };
 }
 __name(useWidget, "useWidget");
@@ -4461,7 +4422,7 @@ function WidgetControls({
   );
   const isFullscreen = displayMode === "fullscreen" && isAvailable;
   const isPip = displayMode === "pip" && isAvailable;
-  const isDevMode = typeof window !== "undefined" && window.location.pathname.includes("/inspector/api/dev-widget/");
+  const isInInspector = typeof window !== "undefined" && window.location.pathname.includes("/inspector/api/");
   (0, import_react6.useEffect)(() => {
     const timeoutId = setTimeout(() => {
       if (typeof window !== "undefined" && window.openai) {
@@ -4793,7 +4754,7 @@ function WidgetControls({
         className: getPositionClasses().join(" "),
         style: getPositionOffsetStyles()
       },
-      !isDevMode && /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, !isFullscreen && !isPip && /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, (viewControls === true || viewControls === "fullscreen") && /* @__PURE__ */ import_react6.default.createElement(IconButton, { onClick: handleFullscreen, label: "Fullscreen" }, /* @__PURE__ */ import_react6.default.createElement("path", { d: "M15 3h6v6" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "m21 3-7 7" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "m3 21 7-7" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M9 21H3v-6" })), (viewControls === true || viewControls === "pip") && /* @__PURE__ */ import_react6.default.createElement(IconButton, { onClick: handlePip, label: "Picture in Picture" }, /* @__PURE__ */ import_react6.default.createElement("path", { d: "M21 9V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h4" }), /* @__PURE__ */ import_react6.default.createElement("rect", { width: "10", height: "7", x: "12", y: "13", rx: "2" }))), enableDebugger && /* @__PURE__ */ import_react6.default.createElement(IconButton, { onClick: handleToggleOverlay, label: "Debug Info" }, /* @__PURE__ */ import_react6.default.createElement("path", { d: "M12 20v-9" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M14.12 3.88 16 2" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M21 21a4 4 0 0 0-3.81-4" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M21 5a4 4 0 0 1-3.55 3.97" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M22 13h-4" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M3 21a4 4 0 0 1 3.81-4" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M3 5a4 4 0 0 0 3.55 3.97" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M6 13H2" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "m8 2 1.88 1.88" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M9 7.13V6a3 3 0 1 1 6 0v1.13" })))
+      !isInInspector && /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, !isFullscreen && !isPip && /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, (viewControls === true || viewControls === "fullscreen") && /* @__PURE__ */ import_react6.default.createElement(IconButton, { onClick: handleFullscreen, label: "Fullscreen" }, /* @__PURE__ */ import_react6.default.createElement("path", { d: "M15 3h6v6" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "m21 3-7 7" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "m3 21 7-7" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M9 21H3v-6" })), (viewControls === true || viewControls === "pip") && /* @__PURE__ */ import_react6.default.createElement(IconButton, { onClick: handlePip, label: "Picture in Picture" }, /* @__PURE__ */ import_react6.default.createElement("path", { d: "M21 9V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h4" }), /* @__PURE__ */ import_react6.default.createElement("rect", { width: "10", height: "7", x: "12", y: "13", rx: "2" }))), enableDebugger && /* @__PURE__ */ import_react6.default.createElement(IconButton, { onClick: handleToggleOverlay, label: "Debug Info" }, /* @__PURE__ */ import_react6.default.createElement("path", { d: "M12 20v-9" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M14.12 3.88 16 2" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M21 21a4 4 0 0 0-3.81-4" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M21 5a4 4 0 0 1-3.55 3.97" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M22 13h-4" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M3 21a4 4 0 0 1 3.81-4" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M3 5a4 4 0 0 0 3.55 3.97" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M6 13H2" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "m8 2 1.88 1.88" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M9 7.13V6a3 3 0 1 1 6 0v1.13" })))
     ),
     children
   ), isOverlayOpen && enableDebugger && /* @__PURE__ */ import_react6.default.createElement(
@@ -4945,7 +4906,7 @@ function McpUseProvider({
     let mounted = true;
     (async () => {
       try {
-        const routerModule = await import("react-router-dom");
+        const routerModule = await import("react-router");
         if (mounted) {
           setBrowserRouter(() => routerModule.BrowserRouter);
           setIsRouterLoading(false);
@@ -4954,7 +4915,7 @@ function McpUseProvider({
         if (mounted) {
           setRouterError(
             new Error(
-              "\u274C react-router-dom not installed!\n\nTo use MCP widgets with McpUseProvider, you need to install:\n\n  npm install react-router-dom\n  # or\n  pnpm add react-router-dom\n\nThis dependency is automatically included in projects created with 'create-mcp-use-app'."
+              "\u274C react-router not installed!\n\nTo use MCP widgets with McpUseProvider, you need to install:\n\n  npm install react-router\n  # or\n  pnpm add react-router\n\nThis dependency is automatically included in projects created with 'create-mcp-use-app'."
             )
           );
           setIsRouterLoading(false);