mcp-use 1.7.0-canary.2 → 1.7.0-canary.3

package/dist/{chunk-BG2APH43.js → chunk-BBEY6HHN.js}

@@ -1,6 +1,6 @@
 import {
   BrowserMCPClient
-} from "./chunk-AGKMD2ZM.js";
+} from "./chunk-PSO6HYXH.js";
 import {
   BrowserOAuthClientProvider,
   sanitizeUrl
@@ -1490,7 +1490,13 @@ function WidgetControls({
 __name(WidgetControls, "WidgetControls");
 
 // src/react/McpUseProvider.tsx
-import React5, { StrictMode, useCallback as useCallback3, useEffect as useEffect5, useRef as useRef3 } from "react";
+import React5, {
+  StrictMode,
+  useCallback as useCallback3,
+  useEffect as useEffect5,
+  useRef as useRef3,
+  useState as useState5
+} from "react";
 var BrowserRouter = null;
 var routerError = null;
 (async () => {
@@ -1526,6 +1532,33 @@ function McpUseProvider({
   const lastHeightRef = useRef3(0);
   const debounceTimeoutRef = useRef3(null);
   const notificationInProgressRef = useRef3(false);
+  const [BrowserRouter2, setBrowserRouter] = useState5(null);
+  const [routerError2, setRouterError] = useState5(null);
+  const [isRouterLoading, setIsRouterLoading] = useState5(true);
+  useEffect5(() => {
+    let mounted = true;
+    (async () => {
+      try {
+        const routerModule = await import("react-router-dom");
+        if (mounted) {
+          setBrowserRouter(() => routerModule.BrowserRouter);
+          setIsRouterLoading(false);
+        }
+      } catch (error) {
+        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'."
+            )
+          );
+          setIsRouterLoading(false);
+        }
+      }
+    })();
+    return () => {
+      mounted = false;
+    };
+  }, []);
   const notifyHeight = useCallback3((height) => {
     if (typeof window !== "undefined" && window.openai?.notifyIntrinsicHeight) {
       notificationInProgressRef.current = true;
@@ -1591,18 +1624,20 @@ function McpUseProvider({
       notificationInProgressRef.current = false;
     };
   }, [autoSize, debouncedNotifyHeight]);
+  if (isRouterLoading) {
+    return /* @__PURE__ */ React5.createElement(StrictMode, null, /* @__PURE__ */ React5.createElement(ThemeProvider, null, /* @__PURE__ */ React5.createElement("div", { style: { padding: "20px", textAlign: "center" } }, "Loading...")));
+  }
+  if (routerError2) {
+    throw routerError2;
+  }
   let content = children;
   content = /* @__PURE__ */ React5.createElement(ErrorBoundary, null, content);
   if (enableDebugger || viewControls) {
     content = /* @__PURE__ */ React5.createElement(WidgetControls, { debugger: enableDebugger, viewControls }, content);
   }
-  if (routerError) {
-    throw routerError;
-  }
-  if (!BrowserRouter) {
-    throw new Error("react-router-dom is still loading, please try again.");
+  if (BrowserRouter2) {
+    content = /* @__PURE__ */ React5.createElement(BrowserRouter2, { basename }, content);
   }
-  content = /* @__PURE__ */ React5.createElement(BrowserRouter, { basename }, content);
   content = /* @__PURE__ */ React5.createElement(ThemeProvider, null, content);
   if (autoSize) {
     const containerStyle = {

package/dist/index.cjs

@@ -9564,6 +9564,33 @@ function McpUseProvider({
   const lastHeightRef = (0, import_react7.useRef)(0);
   const debounceTimeoutRef = (0, import_react7.useRef)(null);
   const notificationInProgressRef = (0, import_react7.useRef)(false);
+  const [BrowserRouter2, setBrowserRouter] = (0, import_react7.useState)(null);
+  const [routerError2, setRouterError] = (0, import_react7.useState)(null);
+  const [isRouterLoading, setIsRouterLoading] = (0, import_react7.useState)(true);
+  (0, import_react7.useEffect)(() => {
+    let mounted = true;
+    (async () => {
+      try {
+        const routerModule = await import("react-router-dom");
+        if (mounted) {
+          setBrowserRouter(() => routerModule.BrowserRouter);
+          setIsRouterLoading(false);
+        }
+      } catch (error) {
+        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'."
+            )
+          );
+          setIsRouterLoading(false);
+        }
+      }
+    })();
+    return () => {
+      mounted = false;
+    };
+  }, []);
   const notifyHeight = (0, import_react7.useCallback)((height) => {
     if (typeof window !== "undefined" && window.openai?.notifyIntrinsicHeight) {
       notificationInProgressRef.current = true;
@@ -9629,18 +9656,20 @@ function McpUseProvider({
       notificationInProgressRef.current = false;
     };
   }, [autoSize, debouncedNotifyHeight]);
+  if (isRouterLoading) {
+    return /* @__PURE__ */ import_react7.default.createElement(import_react7.StrictMode, null, /* @__PURE__ */ import_react7.default.createElement(ThemeProvider, null, /* @__PURE__ */ import_react7.default.createElement("div", { style: { padding: "20px", textAlign: "center" } }, "Loading...")));
+  }
+  if (routerError2) {
+    throw routerError2;
+  }
   let content = children;
   content = /* @__PURE__ */ import_react7.default.createElement(ErrorBoundary, null, content);
   if (enableDebugger || viewControls) {
     content = /* @__PURE__ */ import_react7.default.createElement(WidgetControls, { debugger: enableDebugger, viewControls }, content);
   }
-  if (routerError) {
-    throw routerError;
-  }
-  if (!BrowserRouter) {
-    throw new Error("react-router-dom is still loading, please try again.");
+  if (BrowserRouter2) {
+    content = /* @__PURE__ */ import_react7.default.createElement(BrowserRouter2, { basename }, content);
   }
-  content = /* @__PURE__ */ import_react7.default.createElement(BrowserRouter, { basename }, content);
   content = /* @__PURE__ */ import_react7.default.createElement(ThemeProvider, null, content);
   if (autoSize) {
     const containerStyle = {

package/dist/index.js

@@ -20,6 +20,10 @@ import {
   setTelemetrySource
 } from "./chunk-S6K5QZBJ.js";
 import "./chunk-JQKKMUCT.js";
+import {
+  CodeModeConnector,
+  PROMPTS
+} from "./chunk-2AOGMX4T.js";
 import {
   ErrorBoundary,
   Image,
@@ -31,26 +35,22 @@ import {
   useWidgetProps,
   useWidgetState,
   useWidgetTheme
-} from "./chunk-BG2APH43.js";
+} from "./chunk-BBEY6HHN.js";
 import {
   BaseMCPClient,
   ConnectionManager,
   HttpConnector,
   MCPSession,
   WebSocketConnector
-} from "./chunk-AGKMD2ZM.js";
+} from "./chunk-PSO6HYXH.js";
 import {
   BrowserOAuthClientProvider,
   onMcpAuthorization
 } from "./chunk-3R5PDYIN.js";
-import "./chunk-MTHLLDCX.js";
-import {
-  CodeModeConnector,
-  PROMPTS
-} from "./chunk-2AOGMX4T.js";
 import {
   BaseConnector
 } from "./chunk-2JBWOW4S.js";
+import "./chunk-MTHLLDCX.js";
 import "./chunk-CPG2WZUL.js";
 import {
   Logger,

package/dist/src/agents/index.js

@@ -5,11 +5,11 @@ import {
   MCPAgent,
   RemoteAgent
 } from "../../chunk-S6K5QZBJ.js";
-import "../../chunk-MTHLLDCX.js";
 import {
   PROMPTS
 } from "../../chunk-2AOGMX4T.js";
 import "../../chunk-2JBWOW4S.js";
+import "../../chunk-MTHLLDCX.js";
 import "../../chunk-CPG2WZUL.js";
 import "../../chunk-34R6SIER.js";
 import "../../chunk-3GQAWCBQ.js";

package/dist/src/browser.js

@@ -15,15 +15,15 @@ import {
   HttpConnector,
   MCPSession,
   WebSocketConnector
-} from "../chunk-AGKMD2ZM.js";
+} from "../chunk-PSO6HYXH.js";
 import {
   BrowserOAuthClientProvider,
   onMcpAuthorization
 } from "../chunk-3R5PDYIN.js";
-import "../chunk-MTHLLDCX.js";
 import {
   BaseConnector
 } from "../chunk-2JBWOW4S.js";
+import "../chunk-MTHLLDCX.js";
 import "../chunk-CPG2WZUL.js";
 import {
   Logger,