mcp-use 0.2.0 → 1.0.0

package/dist/src/react/index.cjs

@@ -0,0 +1,986 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react/index.ts
+var react_exports = {};
+__export(react_exports, {
+  onMcpAuthorization: () => onMcpAuthorization,
+  useMcp: () => useMcp
+});
+module.exports = __toCommonJS(react_exports);
+
+// src/react/useMcp.ts
+var import_types = require("@modelcontextprotocol/sdk/types.js");
+var import_react = require("react");
+var import_sse = require("@modelcontextprotocol/sdk/client/sse.js");
+var import_streamableHttp = require("@modelcontextprotocol/sdk/client/streamableHttp.js");
+var import_client = require("@modelcontextprotocol/sdk/client/index.js");
+var import_auth = require("@modelcontextprotocol/sdk/client/auth.js");
+var import_strict_url_sanitise2 = require("strict-url-sanitise");
+
+// src/auth/browser-provider.ts
+var import_strict_url_sanitise = require("strict-url-sanitise");
+var BrowserOAuthClientProvider = class {
+  static {
+    __name(this, "BrowserOAuthClientProvider");
+  }
+  serverUrl;
+  storageKeyPrefix;
+  serverUrlHash;
+  clientName;
+  clientUri;
+  callbackUrl;
+  preventAutoAuth;
+  onPopupWindow;
+  constructor(serverUrl, options = {}) {
+    this.serverUrl = serverUrl;
+    this.storageKeyPrefix = options.storageKeyPrefix || "mcp:auth";
+    this.serverUrlHash = this.hashString(serverUrl);
+    this.clientName = options.clientName || "MCP Browser Client";
+    this.clientUri = options.clientUri || (typeof window !== "undefined" ? window.location.origin : "");
+    this.callbackUrl = (0, import_strict_url_sanitise.sanitizeUrl)(
+      options.callbackUrl || (typeof window !== "undefined" ? new URL("/oauth/callback", window.location.origin).toString() : "/oauth/callback")
+    );
+    this.preventAutoAuth = options.preventAutoAuth;
+    this.onPopupWindow = options.onPopupWindow;
+  }
+  // --- SDK Interface Methods ---
+  get redirectUrl() {
+    return (0, import_strict_url_sanitise.sanitizeUrl)(this.callbackUrl);
+  }
+  get clientMetadata() {
+    return {
+      redirect_uris: [this.redirectUrl],
+      token_endpoint_auth_method: "none",
+      // Public client
+      grant_types: ["authorization_code", "refresh_token"],
+      response_types: ["code"],
+      client_name: this.clientName,
+      client_uri: this.clientUri
+      // scope: 'openid profile email mcp', // Example scopes, adjust as needed
+    };
+  }
+  async clientInformation() {
+    const key = this.getKey("client_info");
+    const data = localStorage.getItem(key);
+    if (!data) return void 0;
+    try {
+      return JSON.parse(data);
+    } catch (e) {
+      console.warn(`[${this.storageKeyPrefix}] Failed to parse client information:`, e);
+      localStorage.removeItem(key);
+      return void 0;
+    }
+  }
+  // NOTE: The SDK's auth() function uses this if dynamic registration is needed.
+  // Ensure your OAuthClientInformationFull matches the expected structure if DCR is used.
+  async saveClientInformation(clientInformation) {
+    const key = this.getKey("client_info");
+    localStorage.setItem(key, JSON.stringify(clientInformation));
+  }
+  async tokens() {
+    const key = this.getKey("tokens");
+    const data = localStorage.getItem(key);
+    if (!data) return void 0;
+    try {
+      return JSON.parse(data);
+    } catch (e) {
+      console.warn(`[${this.storageKeyPrefix}] Failed to parse tokens:`, e);
+      localStorage.removeItem(key);
+      return void 0;
+    }
+  }
+  async saveTokens(tokens) {
+    const key = this.getKey("tokens");
+    localStorage.setItem(key, JSON.stringify(tokens));
+    localStorage.removeItem(this.getKey("code_verifier"));
+    localStorage.removeItem(this.getKey("last_auth_url"));
+  }
+  async saveCodeVerifier(codeVerifier) {
+    const key = this.getKey("code_verifier");
+    localStorage.setItem(key, codeVerifier);
+  }
+  async codeVerifier() {
+    const key = this.getKey("code_verifier");
+    const verifier = localStorage.getItem(key);
+    if (!verifier) {
+      throw new Error(
+        `[${this.storageKeyPrefix}] Code verifier not found in storage for key ${key}. Auth flow likely corrupted or timed out.`
+      );
+    }
+    return verifier;
+  }
+  /**
+   * Generates and stores the authorization URL with state, without opening a popup.
+   * Used when preventAutoAuth is enabled to provide the URL for manual navigation.
+   * @param authorizationUrl The fully constructed authorization URL from the SDK.
+   * @returns The full authorization URL with state parameter.
+   */
+  async prepareAuthorizationUrl(authorizationUrl) {
+    const state = globalThis.crypto.randomUUID();
+    const stateKey = `${this.storageKeyPrefix}:state_${state}`;
+    const stateData = {
+      serverUrlHash: this.serverUrlHash,
+      expiry: Date.now() + 1e3 * 60 * 10,
+      // State expires in 10 minutes
+      // Store provider options needed to reconstruct on callback
+      providerOptions: {
+        serverUrl: this.serverUrl,
+        storageKeyPrefix: this.storageKeyPrefix,
+        clientName: this.clientName,
+        clientUri: this.clientUri,
+        callbackUrl: this.callbackUrl
+      }
+    };
+    localStorage.setItem(stateKey, JSON.stringify(stateData));
+    authorizationUrl.searchParams.set("state", state);
+    const authUrlString = authorizationUrl.toString();
+    const sanitizedAuthUrl = (0, import_strict_url_sanitise.sanitizeUrl)(authUrlString);
+    localStorage.setItem(this.getKey("last_auth_url"), sanitizedAuthUrl);
+    return sanitizedAuthUrl;
+  }
+  /**
+   * Redirects the user agent to the authorization URL, storing necessary state.
+   * This now adheres to the SDK's void return type expectation for the interface.
+   * @param authorizationUrl The fully constructed authorization URL from the SDK.
+   */
+  async redirectToAuthorization(authorizationUrl) {
+    if (this.preventAutoAuth) return;
+    const sanitizedAuthUrl = await this.prepareAuthorizationUrl(authorizationUrl);
+    const popupFeatures = "width=600,height=700,resizable=yes,scrollbars=yes,status=yes";
+    try {
+      const popup = window.open(sanitizedAuthUrl, `mcp_auth_${this.serverUrlHash}`, popupFeatures);
+      if (this.onPopupWindow) {
+        this.onPopupWindow(sanitizedAuthUrl, popupFeatures, popup);
+      }
+      if (!popup || popup.closed || typeof popup.closed === "undefined") {
+        console.warn(
+          `[${this.storageKeyPrefix}] Popup likely blocked by browser. Manual navigation might be required using the stored URL.`
+        );
+      } else {
+        popup.focus();
+        console.info(`[${this.storageKeyPrefix}] Redirecting to authorization URL in popup.`);
+      }
+    } catch (e) {
+      console.error(`[${this.storageKeyPrefix}] Error opening popup window:`, e);
+    }
+  }
+  // --- Helper Methods ---
+  /**
+   * Retrieves the last URL passed to `redirectToAuthorization`. Useful for manual fallback.
+   */
+  getLastAttemptedAuthUrl() {
+    const storedUrl = localStorage.getItem(this.getKey("last_auth_url"));
+    return storedUrl ? (0, import_strict_url_sanitise.sanitizeUrl)(storedUrl) : null;
+  }
+  clearStorage() {
+    const prefixPattern = `${this.storageKeyPrefix}_${this.serverUrlHash}_`;
+    const statePattern = `${this.storageKeyPrefix}:state_`;
+    const keysToRemove = [];
+    let count = 0;
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (!key) continue;
+      if (key.startsWith(prefixPattern)) {
+        keysToRemove.push(key);
+      } else if (key.startsWith(statePattern)) {
+        try {
+          const item = localStorage.getItem(key);
+          if (item) {
+            const state = JSON.parse(item);
+            if (state.serverUrlHash === this.serverUrlHash) {
+              keysToRemove.push(key);
+            }
+          }
+        } catch (e) {
+          console.warn(`[${this.storageKeyPrefix}] Error parsing state key ${key} during clearStorage:`, e);
+        }
+      }
+    }
+    const uniqueKeysToRemove = [...new Set(keysToRemove)];
+    uniqueKeysToRemove.forEach((key) => {
+      localStorage.removeItem(key);
+      count++;
+    });
+    return count;
+  }
+  hashString(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      const char = str.charCodeAt(i);
+      hash = (hash << 5) - hash + char;
+      hash = hash & hash;
+    }
+    return Math.abs(hash).toString(16);
+  }
+  getKey(keySuffix) {
+    return `${this.storageKeyPrefix}_${this.serverUrlHash}_${keySuffix}`;
+  }
+};
+
+// src/utils/assert.ts
+function assert(condition, message) {
+  if (!condition) {
+    throw new Error(message);
+  }
+}
+__name(assert, "assert");
+
+// src/react/useMcp.ts
+var DEFAULT_RECONNECT_DELAY = 3e3;
+var DEFAULT_RETRY_DELAY = 5e3;
+var AUTH_TIMEOUT = 5 * 60 * 1e3;
+function useMcp(options) {
+  const {
+    url,
+    enabled = true,
+    clientName,
+    clientUri,
+    callbackUrl = typeof window !== "undefined" ? (0, import_strict_url_sanitise2.sanitizeUrl)(new URL("/oauth/callback", window.location.origin).toString()) : "/oauth/callback",
+    storageKeyPrefix = "mcp:auth",
+    clientConfig = {},
+    customHeaders = {},
+    debug: _debug = false,
+    autoRetry = false,
+    autoReconnect = DEFAULT_RECONNECT_DELAY,
+    transportType = "auto",
+    preventAutoAuth = false,
+    onPopupWindow
+  } = options;
+  const [state, setState] = (0, import_react.useState)("discovering");
+  const [tools, setTools] = (0, import_react.useState)([]);
+  const [resources, setResources] = (0, import_react.useState)([]);
+  const [resourceTemplates, setResourceTemplates] = (0, import_react.useState)([]);
+  const [prompts, setPrompts] = (0, import_react.useState)([]);
+  const [error, setError] = (0, import_react.useState)(void 0);
+  const [log, setLog] = (0, import_react.useState)([]);
+  const [authUrl, setAuthUrl] = (0, import_react.useState)(void 0);
+  const clientRef = (0, import_react.useRef)(null);
+  const transportRef = (0, import_react.useRef)(null);
+  const authProviderRef = (0, import_react.useRef)(null);
+  const connectingRef = (0, import_react.useRef)(false);
+  const isMountedRef = (0, import_react.useRef)(true);
+  const connectAttemptRef = (0, import_react.useRef)(0);
+  const authTimeoutRef = (0, import_react.useRef)(null);
+  const stateRef = (0, import_react.useRef)(state);
+  const autoReconnectRef = (0, import_react.useRef)(autoReconnect);
+  const successfulTransportRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    stateRef.current = state;
+    autoReconnectRef.current = autoReconnect;
+  }, [state, autoReconnect]);
+  const addLog = (0, import_react.useCallback)(
+    (level, message, ...args) => {
+      const fullMessage = args.length > 0 ? `${message} ${args.map((arg) => JSON.stringify(arg)).join(" ")}` : message;
+      console[level](`[useMcp] ${fullMessage}`);
+      if (isMountedRef.current) {
+        setLog((prevLog) => [...prevLog.slice(-100), { level, message: fullMessage, timestamp: Date.now() }]);
+      }
+    },
+    []
+  );
+  const disconnect = (0, import_react.useCallback)(
+    async (quiet = false) => {
+      if (!quiet) addLog("info", "Disconnecting...");
+      connectingRef.current = false;
+      if (authTimeoutRef.current) clearTimeout(authTimeoutRef.current);
+      authTimeoutRef.current = null;
+      const transport = transportRef.current;
+      clientRef.current = null;
+      transportRef.current = null;
+      if (isMountedRef.current && !quiet) {
+        setState("discovering");
+        setTools([]);
+        setResources([]);
+        setResourceTemplates([]);
+        setPrompts([]);
+        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]
+  );
+  const failConnection = (0, import_react.useCallback)(
+    (errorMessage, connectionError) => {
+      addLog("error", errorMessage, connectionError ?? "");
+      if (isMountedRef.current) {
+        setState("failed");
+        setError(errorMessage);
+        const manualUrl = authProviderRef.current?.getLastAttemptedAuthUrl();
+        if (manualUrl) {
+          setAuthUrl(manualUrl);
+          addLog("info", "Manual authentication URL may be available.", manualUrl);
+        }
+      }
+      connectingRef.current = false;
+    },
+    [addLog]
+  );
+  const connect = (0, import_react.useCallback)(async () => {
+    if (!enabled || !url) {
+      addLog("debug", enabled ? "No server URL provided, skipping connection." : "Connection disabled via enabled flag.");
+      return;
+    }
+    if (connectingRef.current) {
+      addLog("debug", "Connection attempt already in progress.");
+      return;
+    }
+    if (!isMountedRef.current) {
+      addLog("debug", "Connect called after unmount, aborting.");
+      return;
+    }
+    connectingRef.current = true;
+    connectAttemptRef.current += 1;
+    setError(void 0);
+    setAuthUrl(void 0);
+    successfulTransportRef.current = null;
+    setState("discovering");
+    addLog("info", `Connecting attempt #${connectAttemptRef.current} to ${url}...`);
+    if (!authProviderRef.current) {
+      authProviderRef.current = new BrowserOAuthClientProvider(url, {
+        storageKeyPrefix,
+        clientName,
+        clientUri,
+        callbackUrl,
+        preventAutoAuth,
+        onPopupWindow
+      });
+      addLog("debug", "BrowserOAuthClientProvider initialized in connect.");
+    }
+    if (!clientRef.current) {
+      clientRef.current = new import_client.Client(
+        { name: clientConfig.name || "use-mcp-react-client", version: clientConfig.version || "0.1.0" },
+        { capabilities: {} }
+      );
+      addLog("debug", "MCP Client 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;
+      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
+            }
+          }
+        };
+        const sanitizedUrl = (0, import_strict_url_sanitise2.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 import_streamableHttp.StreamableHTTPClientTransport(targetUrl, commonOptions);
+          addLog("debug", "StreamableHTTPClientTransport created successfully");
+        } else {
+          addLog("debug", "Creating SSEClientTransport...");
+          transportInstance = new import_sse.SSEClientTransport(targetUrl, commonOptions);
+          addLog("debug", "SSEClientTransport created successfully");
+        }
+        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("Connection closed unexpectedly.");
+        }
+      };
+      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" }, import_types.ListToolsResultSchema);
+        let resourcesResponse = { resources: [], resourceTemplates: [] };
+        try {
+          resourcesResponse = await clientRef.current.request({ method: "resources/list" }, import_types.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" }, import_types.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 (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 import_auth.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 authResult = await (0, import_auth.auth)(authProviderRef.current, { serverUrl: url });
+            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);
+            failConnection(
+              `Failed to initiate authentication: ${sdkAuthError instanceof Error ? sdkAuthError.message : String(sdkAuthError)}`,
+              sdkAuthError instanceof Error ? sdkAuthError : void 0
+            );
+            return "failed";
+          }
+        }
+        failConnection(`Failed to connect via ${transportTypeParam.toUpperCase()}: ${errorMessage}`, errorInstance);
+        return "failed";
+      }
+    }, "tryConnectWithTransport");
+    let finalStatus = "failed";
+    if (transportType === "sse") {
+      addLog("debug", "Using SSE-only transport mode");
+      finalStatus = await tryConnectWithTransport("sse");
+    } else if (transportType === "http") {
+      addLog("debug", "Using HTTP-only transport mode");
+      finalStatus = await tryConnectWithTransport("http");
+    } else {
+      addLog("debug", "Using auto transport mode (HTTP with SSE fallback)");
+      const httpResult = await tryConnectWithTransport("http");
+      if (httpResult === "fallback" && isMountedRef.current && stateRef.current !== "authenticating") {
+        addLog("info", "HTTP failed, attempting SSE fallback...");
+        const sseResult = await tryConnectWithTransport("sse");
+        finalStatus = sseResult;
+      } else {
+        finalStatus = httpResult;
+      }
+    }
+    if (finalStatus === "success" || finalStatus === "failed") {
+      connectingRef.current = false;
+    }
+    addLog("debug", `Connection sequence finished with status: ${finalStatus}`);
+  }, [
+    addLog,
+    failConnection,
+    disconnect,
+    url,
+    storageKeyPrefix,
+    clientName,
+    clientUri,
+    callbackUrl,
+    clientConfig.name,
+    clientConfig.version,
+    customHeaders,
+    transportType,
+    preventAutoAuth,
+    onPopupWindow,
+    enabled
+  ]);
+  const callTool = (0, import_react.useCallback)(
+    async (name, args) => {
+      if (stateRef.current !== "ready" || !clientRef.current) {
+        throw new Error(`MCP client is not ready (current state: ${state}). Cannot call tool "${name}".`);
+      }
+      addLog("info", `Calling tool: ${name}`, args);
+      try {
+        const result = await clientRef.current.request({ method: "tools/call", params: { name, arguments: args } }, import_types.CallToolResultSchema);
+        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 import_auth.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 authResult = await (0, import_auth.auth)(authProviderRef.current, { serverUrl: url });
+            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;
+      }
+    },
+    [state, url, addLog, failConnection, connect]
+  );
+  const retry = (0, import_react.useCallback)(() => {
+    if (stateRef.current === "failed") {
+      addLog("info", "Retry requested...");
+      connect();
+    } else {
+      addLog("warn", `Retry called but state is not 'failed' (state: ${stateRef.current}). Ignoring.`);
+    }
+  }, [addLog, connect]);
+  const authenticate = (0, import_react.useCallback)(async () => {
+    addLog("info", "Manual authentication requested...");
+    const currentState = stateRef.current;
+    if (currentState === "failed") {
+      addLog("info", "Attempting to reconnect and authenticate via retry...");
+      retry();
+    } else if (currentState === "pending_auth") {
+      addLog("info", "Proceeding with authentication from pending state...");
+      setState("authenticating");
+      if (authTimeoutRef.current) clearTimeout(authTimeoutRef.current);
+      authTimeoutRef.current = setTimeout(() => {
+        if (isMountedRef.current) {
+          const currentStateValue = stateRef.current;
+          if (currentStateValue === "authenticating") {
+            failConnection("Authentication timed out. Please try again.");
+          }
+        }
+      }, AUTH_TIMEOUT);
+      try {
+        assert(authProviderRef.current, "Auth Provider not available for manual auth");
+        assert(url, "Server URL is required for authentication");
+        const authResult = await (0, import_auth.auth)(authProviderRef.current, { serverUrl: url });
+        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...");
+        }
+      } catch (authError) {
+        if (!isMountedRef.current) return;
+        if (authTimeoutRef.current) clearTimeout(authTimeoutRef.current);
+        failConnection(
+          `Manual authentication failed: ${authError instanceof Error ? authError.message : String(authError)}`,
+          authError instanceof Error ? authError : void 0
+        );
+      }
+    } else if (currentState === "authenticating") {
+      addLog("warn", "Already attempting authentication. Check for blocked popups or wait for timeout.");
+      const manualUrl = authProviderRef.current?.getLastAttemptedAuthUrl();
+      if (manualUrl && !authUrl) {
+        setAuthUrl(manualUrl);
+        addLog("info", "Manual authentication URL retrieved:", manualUrl);
+      }
+    } else {
+      addLog(
+        "info",
+        `Client not in a state requiring manual authentication trigger (state: ${currentState}). If needed, try disconnecting and reconnecting.`
+      );
+    }
+  }, [addLog, retry, authUrl, url, failConnection, connect]);
+  const clearStorage = (0, import_react.useCallback)(() => {
+    if (authProviderRef.current) {
+      const count = authProviderRef.current.clearStorage();
+      addLog("info", `Cleared ${count} item(s) from localStorage for ${url}.`);
+      setAuthUrl(void 0);
+      disconnect();
+    } else {
+      addLog("warn", "Auth provider not initialized, cannot clear storage.");
+    }
+  }, [url, addLog, disconnect]);
+  const listResources = (0, import_react.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" }, import_types.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.`
+        );
+      }
+    } catch (err) {
+      addLog("error", `Error listing resources: ${err instanceof Error ? err.message : String(err)}`, err);
+      throw err;
+    }
+  }, [state, addLog]);
+  const readResource = (0, import_react.useCallback)(
+    async (uri) => {
+      if (stateRef.current !== "ready" || !clientRef.current) {
+        throw new Error(`MCP client is not ready (current state: ${state}). Cannot read resource "${uri}".`);
+      }
+      addLog("info", `Reading resource: ${uri}`);
+      try {
+        const result = await clientRef.current.request({ method: "resources/read", params: { uri } }, import_types.ReadResourceResultSchema);
+        addLog("info", `Resource "${uri}" read successfully`);
+        return result;
+      } catch (err) {
+        addLog("error", `Error reading resource "${uri}": ${err instanceof Error ? err.message : String(err)}`, err);
+        throw err;
+      }
+    },
+    [state, addLog]
+  );
+  const listPrompts = (0, import_react.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" }, import_types.ListPromptsResultSchema);
+      if (isMountedRef.current) {
+        setPrompts(promptsResponse.prompts);
+        addLog("info", `Listed ${promptsResponse.prompts.length} prompts.`);
+      }
+    } catch (err) {
+      addLog("error", `Error listing prompts: ${err instanceof Error ? err.message : String(err)}`, err);
+      throw err;
+    }
+  }, [state, addLog]);
+  const getPrompt = (0, import_react.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}".`);
+      }
+      addLog("info", `Getting prompt: ${name}`, args);
+      try {
+        const result = await clientRef.current.request({ method: "prompts/get", params: { name, arguments: args } }, import_types.GetPromptResultSchema);
+        addLog("info", `Prompt "${name}" retrieved successfully`);
+        return result;
+      } catch (err) {
+        addLog("error", `Error getting prompt "${name}": ${err instanceof Error ? err.message : String(err)}`, err);
+        throw err;
+      }
+    },
+    [state, addLog]
+  );
+  const connectRef = (0, import_react.useRef)(connect);
+  const failConnectionRef = (0, import_react.useRef)(failConnection);
+  (0, import_react.useEffect)(() => {
+    connectRef.current = connect;
+    failConnectionRef.current = failConnection;
+  });
+  (0, import_react.useEffect)(() => {
+    const messageHandler = /* @__PURE__ */ __name((event) => {
+      if (event.origin !== window.location.origin) return;
+      if (event.data?.type === "mcp_auth_callback") {
+        addLog("info", "Received auth callback message.", event.data);
+        if (authTimeoutRef.current) clearTimeout(authTimeoutRef.current);
+        authTimeoutRef.current = null;
+        if (event.data.success) {
+          addLog("info", "Authentication successful via popup. Reconnecting client...");
+          if (!connectingRef.current) {
+            connectingRef.current = false;
+            connectRef.current();
+          } else {
+            addLog("warn", "Connection already in progress, skipping reconnection from auth callback");
+          }
+        } else {
+          failConnectionRef.current(`Authentication failed in callback: ${event.data.error || "Unknown reason."}`);
+        }
+      }
+    }, "messageHandler");
+    window.addEventListener("message", messageHandler);
+    addLog("debug", "Auth callback message listener added.");
+    return () => {
+      window.removeEventListener("message", messageHandler);
+      addLog("debug", "Auth callback message listener removed.");
+      if (authTimeoutRef.current) clearTimeout(authTimeoutRef.current);
+    };
+  }, [addLog]);
+  (0, import_react.useEffect)(() => {
+    isMountedRef.current = true;
+    if (!enabled || !url) {
+      addLog("debug", enabled ? "No server URL provided, skipping connection." : "Connection disabled via enabled flag.");
+      setState("discovering");
+      return () => {
+        isMountedRef.current = false;
+      };
+    }
+    addLog("debug", "useMcp mounted, initiating connection.");
+    connectAttemptRef.current = 0;
+    if (!authProviderRef.current || authProviderRef.current.serverUrl !== url) {
+      authProviderRef.current = new BrowserOAuthClientProvider(url, {
+        storageKeyPrefix,
+        clientName,
+        clientUri,
+        callbackUrl,
+        preventAutoAuth,
+        onPopupWindow
+      });
+      addLog("debug", "BrowserOAuthClientProvider initialized/updated on mount/option change.");
+    }
+    connect();
+    return () => {
+      isMountedRef.current = false;
+      addLog("debug", "useMcp unmounting, disconnecting.");
+      disconnect(true);
+    };
+  }, [url, enabled, storageKeyPrefix, callbackUrl, clientName, clientUri, clientConfig.name, clientConfig.version]);
+  (0, import_react.useEffect)(() => {
+    let retryTimeoutId = null;
+    if (state === "failed" && autoRetry && connectAttemptRef.current > 0) {
+      const delay = typeof autoRetry === "number" ? autoRetry : DEFAULT_RETRY_DELAY;
+      addLog("info", `Connection failed, auto-retrying in ${delay}ms...`);
+      retryTimeoutId = setTimeout(() => {
+        if (isMountedRef.current && stateRef.current === "failed") {
+          retry();
+        }
+      }, delay);
+    }
+    return () => {
+      if (retryTimeoutId) clearTimeout(retryTimeoutId);
+    };
+  }, [state, autoRetry, retry, addLog]);
+  return {
+    state,
+    tools,
+    resources,
+    resourceTemplates,
+    prompts,
+    error,
+    log,
+    authUrl,
+    callTool,
+    listResources,
+    readResource,
+    listPrompts,
+    getPrompt,
+    retry,
+    disconnect,
+    authenticate,
+    clearStorage
+  };
+}
+__name(useMcp, "useMcp");
+
+// src/auth/callback.ts
+var import_auth2 = require("@modelcontextprotocol/sdk/client/auth.js");
+async function onMcpAuthorization() {
+  const queryParams = new URLSearchParams(window.location.search);
+  const code = queryParams.get("code");
+  const state = queryParams.get("state");
+  const error = queryParams.get("error");
+  const errorDescription = queryParams.get("error_description");
+  const logPrefix = "[mcp-callback]";
+  console.log(`${logPrefix} Handling callback...`, { code, state, error, errorDescription });
+  let provider = null;
+  let storedStateData = null;
+  const stateKey = state ? `mcp:auth:state_${state}` : null;
+  try {
+    if (error) {
+      throw new Error(`OAuth error: ${error} - ${errorDescription || "No description provided."}`);
+    }
+    if (!code) {
+      throw new Error("Authorization code not found in callback query parameters.");
+    }
+    if (!state || !stateKey) {
+      throw new Error("State parameter not found or invalid in callback query parameters.");
+    }
+    const storedStateJSON = localStorage.getItem(stateKey);
+    if (!storedStateJSON) {
+      throw new Error(`Invalid or expired state parameter "${state}". No matching state found in storage.`);
+    }
+    try {
+      storedStateData = JSON.parse(storedStateJSON);
+    } catch (e) {
+      throw new Error("Failed to parse stored OAuth state.");
+    }
+    if (!storedStateData.expiry || storedStateData.expiry < Date.now()) {
+      localStorage.removeItem(stateKey);
+      throw new Error("OAuth state has expired. Please try initiating authentication again.");
+    }
+    if (!storedStateData.providerOptions) {
+      throw new Error("Stored state is missing required provider options.");
+    }
+    const { serverUrl, ...providerOptions } = storedStateData.providerOptions;
+    console.log(`${logPrefix} Re-instantiating provider for server: ${serverUrl}`);
+    provider = new BrowserOAuthClientProvider(serverUrl, providerOptions);
+    console.log(`${logPrefix} Calling SDK auth() to exchange code...`);
+    const authResult = await (0, import_auth2.auth)(provider, { serverUrl, authorizationCode: code });
+    if (authResult === "AUTHORIZED") {
+      console.log(`${logPrefix} Authorization successful via SDK auth(). Notifying opener...`);
+      if (window.opener && !window.opener.closed) {
+        window.opener.postMessage({ type: "mcp_auth_callback", success: true }, window.location.origin);
+        window.close();
+      } else {
+        console.warn(`${logPrefix} No opener window detected. Redirecting to root.`);
+        const pathParts = window.location.pathname.split("/").filter(Boolean);
+        const basePath = pathParts.length > 0 && pathParts[pathParts.length - 1] === "callback" ? "/" + pathParts.slice(0, -2).join("/") : "/";
+        window.location.href = basePath || "/";
+      }
+      localStorage.removeItem(stateKey);
+    } else {
+      console.warn(`${logPrefix} SDK auth() returned unexpected status: ${authResult}`);
+      throw new Error(`Unexpected result from authentication library: ${authResult}`);
+    }
+  } catch (err) {
+    console.error(`${logPrefix} Error during OAuth callback handling:`, err);
+    const errorMessage = err instanceof Error ? err.message : String(err);
+    if (window.opener && !window.opener.closed) {
+      window.opener.postMessage({ type: "mcp_auth_callback", success: false, error: errorMessage }, window.location.origin);
+    }
+    try {
+      document.body.innerHTML = `
+            <div style="font-family: sans-serif; padding: 20px;">
+            <h1>Authentication Error</h1>
+            <p style="color: red; background-color: #ffebeb; border: 1px solid red; padding: 10px; border-radius: 4px;">
+                ${errorMessage}
+            </p>
+            <p>You can close this window or <a href="#" onclick="window.close(); return false;">click here to close</a>.</p>
+            <pre style="font-size: 0.8em; color: #555; margin-top: 20px; white-space: pre-wrap;">${err instanceof Error ? err.stack : ""}</pre>
+            </div>
+        `;
+    } catch (displayError) {
+      console.error(`${logPrefix} Could not display error in callback window:`, displayError);
+    }
+    if (stateKey) {
+      localStorage.removeItem(stateKey);
+    }
+    if (provider) {
+      localStorage.removeItem(provider.getKey("code_verifier"));
+      localStorage.removeItem(provider.getKey("last_auth_url"));
+    }
+  }
+}
+__name(onMcpAuthorization, "onMcpAuthorization");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  onMcpAuthorization,
+  useMcp
+});