mcp-use 1.2.1 → 1.2.2-canary.0

package/dist/{chunk-JV7HAYUT.js → chunk-CPV4QNHD.js}

@@ -1,24 +1,13 @@
 import {
+  BrowserMCPClient,
   BrowserOAuthClientProvider
-} from "./chunk-62GFHYCL.js";
+} from "./chunk-C3SRZK7H.js";
 import {
   __name
 } from "./chunk-SHUYVCID.js";
 
 // src/react/useMcp.ts
-import {
-  CallToolResultSchema,
-  GetPromptResultSchema,
-  ListPromptsResultSchema,
-  ListResourcesResultSchema,
-  ListToolsResultSchema,
-  ReadResourceResultSchema
-} from "@modelcontextprotocol/sdk/types.js";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { auth, UnauthorizedError } from "@modelcontextprotocol/sdk/client/auth.js";
-import { Client } from "@modelcontextprotocol/sdk/client/index.js";
-import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
-import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
 import { sanitizeUrl } from "strict-url-sanitise";
 
 // src/utils/assert.ts
@@ -63,7 +52,6 @@ function useMcp(options) {
   const [log, setLog] = useState([]);
   const [authUrl, setAuthUrl] = useState(void 0);
   const clientRef = useRef(null);
-  const transportRef = useRef(null);
   const authProviderRef = useRef(null);
   const connectingRef = useRef(false);
   const isMountedRef = useRef(true);
@@ -92,9 +80,15 @@ function useMcp(options) {
       connectingRef.current = false;
       if (authTimeoutRef.current) clearTimeout(authTimeoutRef.current);
       authTimeoutRef.current = null;
-      const transport = transportRef.current;
+      if (clientRef.current) {
+        try {
+          const serverName = "inspector-server";
+          await clientRef.current.closeSession(serverName);
+        } catch (err) {
+          if (!quiet) addLog("warn", "Error closing session:", err);
+        }
+      }
       clientRef.current = null;
-      transportRef.current = null;
       if (isMountedRef.current && !quiet) {
         setState("discovering");
         setTools([]);
@@ -104,14 +98,6 @@ function useMcp(options) {
         setError(void 0);
         setAuthUrl(void 0);
       }
-      if (transport) {
-        try {
-          await transport.close();
-          if (!quiet) addLog("debug", "Transport closed");
-        } catch (err) {
-          if (!quiet) addLog("warn", "Error closing transport:", err);
-        }
-      }
     },
     [addLog]
   );
@@ -163,187 +149,60 @@ function useMcp(options) {
       addLog("debug", "BrowserOAuthClientProvider initialized in connect.");
     }
     if (!clientRef.current) {
-      clientRef.current = new Client(
-        { name: clientConfig.name || "mcp-use", version: clientConfig.version || "0.1.0" },
-        { capabilities: {} }
-      );
-      addLog("debug", "MCP Client initialized in connect.");
+      clientRef.current = new BrowserMCPClient();
+      addLog("debug", "BrowserMCPClient initialized in connect.");
     }
     const tryConnectWithTransport = /* @__PURE__ */ __name(async (transportTypeParam, isAuthRetry = false) => {
-      addLog("info", `Attempting connection with ${transportTypeParam.toUpperCase()} transport${isAuthRetry ? " (after auth)" : ""}...`);
-      if (stateRef.current !== "authenticating") {
-        setState("connecting");
-      }
-      let transportInstance;
+      addLog("info", `Attempting connection with transport: ${transportTypeParam}`);
       try {
-        assert(authProviderRef.current, "Auth Provider must be initialized");
-        assert(clientRef.current, "Client must be initialized");
-        if (transportRef.current) {
-          await transportRef.current.close().catch((e) => addLog("warn", `Error closing previous transport: ${e.message}`));
-          transportRef.current = null;
-        }
-        const commonOptions = {
-          authProvider: authProviderRef.current,
-          requestInit: {
-            headers: {
-              Accept: "application/json, text/event-stream",
-              ...customHeaders
-            }
-          }
-          // Note: The MCP SDK's SSEClientTransport doesn't expose timeout configuration directly
-          // Timeout handling is managed by the underlying EventSource and browser/Node.js fetch implementations
-          // The timeout and sseReadTimeout options are preserved for future use or custom implementations
+        const serverName = "inspector-server";
+        const serverConfig = {
+          url,
+          transport: transportTypeParam === "sse" ? "http" : transportTypeParam
         };
-        const sanitizedUrl = sanitizeUrl(url);
-        const targetUrl = new URL(sanitizedUrl);
-        addLog("debug", `Creating ${transportTypeParam.toUpperCase()} transport for URL: ${targetUrl.toString()}`);
-        if (transportTypeParam === "http") {
-          addLog("debug", "Creating StreamableHTTPClientTransport...");
-          transportInstance = new StreamableHTTPClientTransport(targetUrl, commonOptions);
-          addLog("debug", "StreamableHTTPClientTransport created successfully");
-        } else {
-          addLog("debug", "Creating SSEClientTransport...");
-          transportInstance = new SSEClientTransport(targetUrl, commonOptions);
-          addLog("debug", "SSEClientTransport created successfully");
+        if (customHeaders && Object.keys(customHeaders).length > 0) {
+          serverConfig.headers = customHeaders;
         }
-        transportRef.current = transportInstance;
-        addLog("debug", `${transportTypeParam.toUpperCase()} transport created and assigned to ref.`);
-      } catch (err) {
-        failConnection(
-          `Failed to create ${transportTypeParam.toUpperCase()} transport: ${err instanceof Error ? err.message : String(err)}`,
-          err instanceof Error ? err : void 0
-        );
-        return "failed";
-      }
-      transportInstance.onmessage = (message) => {
-        addLog("debug", `[Transport] Received: ${JSON.stringify(message)}`);
-        clientRef.current?.handleMessage?.(message);
-      };
-      transportInstance.onerror = (err) => {
-        addLog("warn", `Transport error event (${transportTypeParam.toUpperCase()}):`, err);
-        failConnection(`Transport error (${transportTypeParam.toUpperCase()}): ${err.message}`, err);
-      };
-      transportInstance.onclose = () => {
-        if (!isMountedRef.current || connectingRef.current) return;
-        addLog("info", `Transport connection closed (${successfulTransportRef.current || "unknown"} type).`);
-        const currentState = stateRef.current;
-        const currentAutoReconnect = autoReconnectRef.current;
-        if (currentState === "ready" && currentAutoReconnect) {
-          const delay = typeof currentAutoReconnect === "number" ? currentAutoReconnect : DEFAULT_RECONNECT_DELAY;
-          addLog("info", `Attempting to reconnect in ${delay}ms...`);
-          setState("connecting");
-          setTimeout(() => {
-            if (isMountedRef.current) {
-              connect();
-            }
-          }, delay);
-        } else if (currentState !== "failed" && currentState !== "authenticating") {
-          failConnection("Cannot connect to server");
-        }
-      };
-      try {
-        addLog("info", `Connecting client via ${transportTypeParam.toUpperCase()}...`);
-        await clientRef.current.connect(transportInstance);
-        addLog("info", `Client connected via ${transportTypeParam.toUpperCase()}. Loading tools, resources, and prompts...`);
-        successfulTransportRef.current = transportTypeParam;
-        setState("loading");
-        const toolsResponse = await clientRef.current.request({ method: "tools/list" }, ListToolsResultSchema);
-        let resourcesResponse = { resources: [], resourceTemplates: [] };
-        try {
-          resourcesResponse = await clientRef.current.request({ method: "resources/list" }, ListResourcesResultSchema);
-        } catch (err) {
-          addLog("debug", "Server does not support resources/list method", err);
-        }
-        let promptsResponse = { prompts: [] };
-        try {
-          promptsResponse = await clientRef.current.request({ method: "prompts/list" }, ListPromptsResultSchema);
-        } catch (err) {
-          addLog("debug", "Server does not support prompts/list method", err);
-        }
-        if (isMountedRef.current) {
-          setTools(toolsResponse.tools);
-          setResources(resourcesResponse.resources);
-          setResourceTemplates(Array.isArray(resourcesResponse.resourceTemplates) ? resourcesResponse.resourceTemplates : []);
-          setPrompts(promptsResponse.prompts);
-          const summary = [`Loaded ${toolsResponse.tools.length} tools`];
-          if (resourcesResponse.resources.length > 0 || resourcesResponse.resourceTemplates && resourcesResponse.resourceTemplates.length > 0) {
-            summary.push(`${resourcesResponse.resources.length} resources`);
-            if (Array.isArray(resourcesResponse.resourceTemplates) && resourcesResponse.resourceTemplates.length > 0) {
-              summary.push(`${resourcesResponse.resourceTemplates.length} resource templates`);
-            }
+        if (authProviderRef.current) {
+          const tokens = await authProviderRef.current.tokens();
+          if (tokens?.access_token) {
+            serverConfig.headers = {
+              ...serverConfig.headers,
+              Authorization: `Bearer ${tokens.access_token}`
+            };
           }
-          if (promptsResponse.prompts.length > 0) {
-            summary.push(`${promptsResponse.prompts.length} prompts`);
-          }
-          addLog("info", summary.join(", ") + ".");
-          setState("ready");
-          connectAttemptRef.current = 0;
-          return "success";
-        } else {
-          return "failed";
         }
-      } catch (connectErr) {
-        addLog("debug", `Client connect error via ${transportTypeParam.toUpperCase()}:`, connectErr);
-        const errorInstance = connectErr instanceof Error ? connectErr : new Error(String(connectErr));
-        const errorMessage = errorInstance.message;
-        const is404 = errorMessage.includes("404") || errorMessage.includes("Not Found");
-        const is405 = errorMessage.includes("405") || errorMessage.includes("Method Not Allowed");
-        const isLikelyCors = errorMessage === "Failed to fetch" || errorMessage === "NetworkError when attempting to fetch resource." || errorMessage === "Load failed";
-        if (transportTypeParam === "http" && (is404 || is405 || isLikelyCors)) {
-          addLog("warn", `HTTP transport failed (${isLikelyCors ? "CORS" : is404 ? "404" : "405"}), will try fallback.`);
-          return "fallback";
-        }
-        if (errorInstance instanceof UnauthorizedError || errorMessage.includes("Unauthorized") || errorMessage.includes("401")) {
-          if (isAuthRetry) {
-            addLog("error", "Authentication failed even after successful token refresh. This may indicate a server issue.");
-            failConnection("Authentication loop detected - auth succeeded but connection still unauthorized.");
-            return "failed";
-          }
-          addLog("info", "Authentication required.");
-          assert(authProviderRef.current, "Auth Provider not available for auth flow");
-          const existingTokens = await authProviderRef.current.tokens();
-          if (preventAutoAuth && !existingTokens) {
-            addLog("info", "Authentication required but auto-auth prevented. User action needed.");
-            setState("pending_auth");
-            return "auth_redirect";
-          }
-          if (stateRef.current !== "authenticating" && stateRef.current !== "pending_auth") {
-            setState("authenticating");
-            if (authTimeoutRef.current) clearTimeout(authTimeoutRef.current);
-            authTimeoutRef.current = setTimeout(() => {
-              if (isMountedRef.current) {
-                const currentState = stateRef.current;
-                if (currentState === "authenticating") {
-                  failConnection("Authentication timed out. Please try again.");
-                }
-              }
-            }, AUTH_TIMEOUT);
-          }
-          try {
-            assert(url, "Server URL is required for authentication");
-            const baseUrl = new URL(url).origin;
-            const authResult = await auth(authProviderRef.current, { serverUrl: baseUrl });
-            if (!isMountedRef.current) return "failed";
-            if (authResult === "AUTHORIZED") {
-              addLog("info", "Authentication successful via existing token or refresh. Retrying transport connection...");
-              if (authTimeoutRef.current) clearTimeout(authTimeoutRef.current);
-              authTimeoutRef.current = null;
-              return await tryConnectWithTransport(transportTypeParam, true);
-            } else if (authResult === "REDIRECT") {
-              addLog("info", "Redirecting for authentication. Waiting for callback...");
-              return "auth_redirect";
-            }
-          } catch (sdkAuthError) {
-            if (!isMountedRef.current) return "failed";
-            if (authTimeoutRef.current) clearTimeout(authTimeoutRef.current);
+        clientRef.current.addServer(serverName, {
+          ...serverConfig,
+          authProvider: authProviderRef.current
+          // ← SDK handles OAuth automatically!
+        });
+        const session = await clientRef.current.createSession(serverName);
+        await session.initialize();
+        addLog("info", "\u2705 Successfully connected to MCP server");
+        setState("ready");
+        successfulTransportRef.current = transportTypeParam;
+        setTools(session.connector.tools || []);
+        const resourcesResult = await session.connector.listAllResources();
+        setResources(resourcesResult.resources || []);
+        const promptsResult = await session.connector.listPrompts();
+        setPrompts(promptsResult.prompts || []);
+        return "success";
+      } catch (err) {
+        const errorMessage = err?.message || String(err);
+        if (err.code === 401 || errorMessage.includes("401") || errorMessage.includes("Unauthorized")) {
+          if (customHeaders && Object.keys(customHeaders).length > 0) {
             failConnection(
-              `Failed to initiate authentication: ${sdkAuthError instanceof Error ? sdkAuthError.message : String(sdkAuthError)}`,
-              sdkAuthError instanceof Error ? sdkAuthError : void 0
+              "Authentication failed: Server returned 401 Unauthorized. Check your Authorization header value is correct."
             );
             return "failed";
           }
+          failConnection(
+            "Authentication required: Server returned 401 Unauthorized. Add an Authorization header in the Custom Headers section (e.g., Authorization: Bearer YOUR_API_KEY)."
+          );
+          return "failed";
         }
-        failConnection(`Failed to connect via ${transportTypeParam.toUpperCase()}: ${errorMessage}`, errorInstance);
+        failConnection(errorMessage, err);
         return "failed";
       }
     }, "tryConnectWithTransport");
@@ -395,55 +254,20 @@ function useMcp(options) {
       }
       addLog("info", `Calling tool: ${name}`, args);
       try {
-        const result = await clientRef.current.request({ method: "tools/call", params: { name, arguments: args } }, CallToolResultSchema);
+        const serverName = "inspector-server";
+        const session = clientRef.current.getSession(serverName);
+        if (!session) {
+          throw new Error("No active session found");
+        }
+        const result = await session.connector.callTool(name, args || {});
         addLog("info", `Tool "${name}" call successful:`, result);
         return result;
       } catch (err) {
-        addLog("error", `Error calling tool "${name}": ${err instanceof Error ? err.message : String(err)}`, err);
-        const errorInstance = err instanceof Error ? err : new Error(String(err));
-        if (errorInstance instanceof UnauthorizedError || errorInstance.message.includes("Unauthorized") || errorInstance.message.includes("401")) {
-          addLog("warn", "Tool call unauthorized, attempting re-authentication...");
-          setState("authenticating");
-          if (authTimeoutRef.current) clearTimeout(authTimeoutRef.current);
-          authTimeoutRef.current = setTimeout(() => {
-            if (isMountedRef.current) {
-              const currentState2 = stateRef.current;
-              if (currentState2 === "authenticating") {
-                failConnection("Authentication timed out. Please try again.");
-              }
-            }
-          }, AUTH_TIMEOUT);
-          try {
-            assert(authProviderRef.current, "Auth Provider not available for tool re-auth");
-            assert(url, "Server URL is required for authentication");
-            const baseUrl = new URL(url).origin;
-            const authResult = await auth(authProviderRef.current, { serverUrl: baseUrl });
-            if (!isMountedRef.current) return;
-            if (authResult === "AUTHORIZED") {
-              addLog("info", "Re-authentication successful. Retrying tool call is recommended, or reconnecting.");
-              if (authTimeoutRef.current) clearTimeout(authTimeoutRef.current);
-              connectingRef.current = false;
-              connect();
-            } else if (authResult === "REDIRECT") {
-              addLog("info", "Redirecting for re-authentication for tool call.");
-            }
-          } catch (sdkAuthError) {
-            if (!isMountedRef.current) return;
-            if (authTimeoutRef.current) clearTimeout(authTimeoutRef.current);
-            failConnection(
-              `Re-authentication failed: ${sdkAuthError instanceof Error ? sdkAuthError.message : String(sdkAuthError)}`,
-              sdkAuthError instanceof Error ? sdkAuthError : void 0
-            );
-          }
-        }
-        const currentState = stateRef.current;
-        if (currentState !== "authenticating") {
-          throw err;
-        }
-        return void 0;
+        addLog("error", `Tool "${name}" call failed:`, err);
+        throw err;
       }
     },
-    [state, url, addLog, failConnection, connect]
+    [state]
   );
   const retry = useCallback(() => {
     if (stateRef.current === "failed") {
@@ -474,17 +298,7 @@ function useMcp(options) {
       try {
         assert(authProviderRef.current, "Auth Provider not available for manual auth");
         assert(url, "Server URL is required for authentication");
-        const baseUrl = new URL(url).origin;
-        const authResult = await auth(authProviderRef.current, { serverUrl: baseUrl });
-        if (!isMountedRef.current) return;
-        if (authResult === "AUTHORIZED") {
-          addLog("info", "Manual authentication successful. Re-attempting connection...");
-          if (authTimeoutRef.current) clearTimeout(authTimeoutRef.current);
-          connectingRef.current = false;
-          connect();
-        } else if (authResult === "REDIRECT") {
-          addLog("info", "Redirecting for manual authentication. Waiting for callback...");
-        }
+        addLog("info", "Redirecting for manual authentication. Waiting for callback...");
       } catch (authError) {
         if (!isMountedRef.current) return;
         if (authTimeoutRef.current) clearTimeout(authTimeoutRef.current);
@@ -517,75 +331,93 @@ function useMcp(options) {
       addLog("warn", "Auth provider not initialized, cannot clear storage.");
     }
   }, [url, addLog, disconnect]);
-  const listResources = useCallback(async () => {
-    if (stateRef.current !== "ready" || !clientRef.current) {
-      throw new Error(`MCP client is not ready (current state: ${state}). Cannot list resources.`);
-    }
-    addLog("info", "Listing resources...");
-    try {
-      const resourcesResponse = await clientRef.current.request({ method: "resources/list" }, ListResourcesResultSchema);
-      if (isMountedRef.current) {
-        setResources(resourcesResponse.resources);
-        setResourceTemplates(Array.isArray(resourcesResponse.resourceTemplates) ? resourcesResponse.resourceTemplates : []);
-        addLog(
-          "info",
-          `Listed ${resourcesResponse.resources.length} resources, ${Array.isArray(resourcesResponse.resourceTemplates) ? resourcesResponse.resourceTemplates.length : 0} resource templates.`
-        );
+  const listResources = useCallback(
+    async () => {
+      if (stateRef.current !== "ready" || !clientRef.current) {
+        throw new Error(`MCP client is not ready (current state: ${state}). Cannot list resources.`);
       }
-    } catch (err) {
-      addLog("error", `Error listing resources: ${err instanceof Error ? err.message : String(err)}`, err);
-      throw err;
-    }
-  }, [state, addLog]);
+      addLog("info", "Listing resources");
+      try {
+        const serverName = "inspector-server";
+        const session = clientRef.current.getSession(serverName);
+        if (!session) {
+          throw new Error("No active session found");
+        }
+        const resourcesResult = await session.connector.listAllResources();
+        setResources(resourcesResult.resources || []);
+        addLog("info", "Resources listed successfully");
+      } catch (err) {
+        addLog("error", "List resources failed:", err);
+        throw err;
+      }
+    },
+    [state]
+  );
   const readResource = useCallback(
     async (uri) => {
       if (stateRef.current !== "ready" || !clientRef.current) {
-        throw new Error(`MCP client is not ready (current state: ${state}). Cannot read resource "${uri}".`);
+        throw new Error(`MCP client is not ready (current state: ${state}). Cannot read resource.`);
       }
       addLog("info", `Reading resource: ${uri}`);
       try {
-        const result = await clientRef.current.request({ method: "resources/read", params: { uri } }, ReadResourceResultSchema);
-        addLog("info", `Resource "${uri}" read successfully`);
+        const serverName = "inspector-server";
+        const session = clientRef.current.getSession(serverName);
+        if (!session) {
+          throw new Error("No active session found");
+        }
+        const result = await session.connector.readResource(uri);
+        addLog("info", "Resource read successful:", result);
         return result;
       } catch (err) {
-        addLog("error", `Error reading resource "${uri}": ${err instanceof Error ? err.message : String(err)}`, err);
+        addLog("error", "Resource read failed:", err);
         throw err;
       }
     },
-    [state, addLog]
+    [state]
   );
-  const listPrompts = useCallback(async () => {
-    if (stateRef.current !== "ready" || !clientRef.current) {
-      throw new Error(`MCP client is not ready (current state: ${state}). Cannot list prompts.`);
-    }
-    addLog("info", "Listing prompts...");
-    try {
-      const promptsResponse = await clientRef.current.request({ method: "prompts/list" }, ListPromptsResultSchema);
-      if (isMountedRef.current) {
-        setPrompts(promptsResponse.prompts);
-        addLog("info", `Listed ${promptsResponse.prompts.length} prompts.`);
+  const listPrompts = useCallback(
+    async () => {
+      if (stateRef.current !== "ready" || !clientRef.current) {
+        throw new Error(`MCP client is not ready (current state: ${state}). Cannot list prompts.`);
       }
-    } catch (err) {
-      addLog("error", `Error listing prompts: ${err instanceof Error ? err.message : String(err)}`, err);
-      throw err;
-    }
-  }, [state, addLog]);
+      addLog("info", "Listing prompts");
+      try {
+        const serverName = "inspector-server";
+        const session = clientRef.current.getSession(serverName);
+        if (!session) {
+          throw new Error("No active session found");
+        }
+        const promptsResult = await session.connector.listPrompts();
+        setPrompts(promptsResult.prompts || []);
+        addLog("info", "Prompts listed successfully");
+      } catch (err) {
+        addLog("error", "List prompts failed:", err);
+        throw err;
+      }
+    },
+    [state]
+  );
   const getPrompt = useCallback(
     async (name, args) => {
       if (stateRef.current !== "ready" || !clientRef.current) {
-        throw new Error(`MCP client is not ready (current state: ${state}). Cannot get prompt "${name}".`);
+        throw new Error(`MCP client is not ready (current state: ${state}). Cannot get prompt.`);
       }
       addLog("info", `Getting prompt: ${name}`, args);
       try {
-        const result = await clientRef.current.request({ method: "prompts/get", params: { name, arguments: args } }, GetPromptResultSchema);
-        addLog("info", `Prompt "${name}" retrieved successfully`);
+        const serverName = "inspector-server";
+        const session = clientRef.current.getSession(serverName);
+        if (!session) {
+          throw new Error("No active session found");
+        }
+        const result = await session.connector.getPrompt(name, args || {});
+        addLog("info", `Prompt "${name}" retrieved successfully:`, result);
         return result;
       } catch (err) {
-        addLog("error", `Error getting prompt "${name}": ${err instanceof Error ? err.message : String(err)}`, err);
+        addLog("error", `Prompt "${name}" retrieval failed:`, err);
         throw err;
       }
     },
-    [state, addLog]
+    [state]
   );
   const connectRef = useRef(connect);
   const failConnectionRef = useRef(failConnection);
@@ -678,9 +510,10 @@ function useMcp(options) {
     error,
     log,
     authUrl,
+    client: clientRef.current,
     callTool,
-    listResources,
     readResource,
+    listResources,
     listPrompts,
     getPrompt,
     retry,