@mcp-ts/sdk 1.3.9 → 1.3.10

package/README.md

@@ -270,7 +270,6 @@ export function ToolRenderer() {
     name: "*",
     render: ({ name, args, result, status }) => (
       <McpAppRenderer
-        mcpClient={mcpClient}
         name={name}
         input={args}
         result={result}

package/dist/client/react.d.mts

@@ -172,10 +172,11 @@ declare function useMcp(options: UseMcpOptions): McpClient$1;
 /**
  * Hook to host an MCP App in a React component
  *
- * Optimized for instant loading:
- * - Creates AppHost synchronously
- * - Starts bridge connection immediately
- * - Returns host before connection completes (ready to call launch)
+ * Initialization is async but optimized for instant availability:
+ * - Constructor runs synchronously (sandbox + bridge handler setup)
+ * - Host is set in state immediately so launch() can be called right away
+ * - start() is a lightweight no-op reserved for future async pre-init work
+ * - The real async work (iframe load, bridge connect) happens inside launch()
  *
  * @param client - Connected SSEClient instance
  * @param iframeRef - Reference to the iframe element
@@ -222,8 +223,8 @@ interface McpAppMetadata {
     resourceUri: string;
     sessionId: string;
 }
+/** Props for {@link useMcpApps}'s `McpAppRenderer` (client is supplied via the hook). */
 interface McpAppRendererProps {
-    mcpClient: McpClient | null;
     name: string;
     input?: Record<string, unknown>;
     result?: unknown;
@@ -232,32 +233,13 @@ interface McpAppRendererProps {
     className?: string;
 }
 /**
- * Simple hook to get MCP app metadata
+ * Helpers scoped to one `mcpClient`. Pass the client here once; `McpAppRenderer` only needs per-tool props (`name`, `input`, `result`, `status`).
  *
- * @param mcpClient - The MCP client from useMcp() or context
- * @returns Object with getAppMetadata function and McpAppRenderer component
- *
- * @example
- * ```tsx
- * function ToolRenderer(props) {
- *   const { getAppMetadata, McpAppRenderer } = useMcpApps(mcpClient);
- *   const metadata = getAppMetadata(props.name);
- *
- *   if (!metadata) return null;
- *   return (
- *     <McpAppRenderer
- *       metadata={metadata}
- *       input={props.args}
- *       result={props.result}
- *       status={props.status}
- *     />
- *   );
- * }
- * ```
+ * @param mcpClient - From `useMcp()` or context (for example `useMcpContext()`).
  */
 declare function useMcpApps(mcpClient: McpClient | null): {
     getAppMetadata: (toolName: string) => McpAppMetadata | undefined;
     McpAppRenderer: React$1.NamedExoticComponent<McpAppRendererProps>;
 };
 
-export { AppHost, type McpClient$1 as McpClient, type McpConnection, McpConnectionEvent, McpConnectionState, SSEClient, ToolInfo, type UseMcpOptions, useAppHost, useMcp, useMcpApps };
+export { AppHost, type McpAppMetadata, type McpAppRendererProps, type McpClient$1 as McpClient, type McpConnection, McpConnectionEvent, McpConnectionState, SSEClient, ToolInfo, type UseMcpOptions, useAppHost, useMcp, useMcpApps };

package/dist/client/react.d.ts

@@ -172,10 +172,11 @@ declare function useMcp(options: UseMcpOptions): McpClient$1;
 /**
  * Hook to host an MCP App in a React component
  *
- * Optimized for instant loading:
- * - Creates AppHost synchronously
- * - Starts bridge connection immediately
- * - Returns host before connection completes (ready to call launch)
+ * Initialization is async but optimized for instant availability:
+ * - Constructor runs synchronously (sandbox + bridge handler setup)
+ * - Host is set in state immediately so launch() can be called right away
+ * - start() is a lightweight no-op reserved for future async pre-init work
+ * - The real async work (iframe load, bridge connect) happens inside launch()
  *
  * @param client - Connected SSEClient instance
  * @param iframeRef - Reference to the iframe element
@@ -222,8 +223,8 @@ interface McpAppMetadata {
     resourceUri: string;
     sessionId: string;
 }
+/** Props for {@link useMcpApps}'s `McpAppRenderer` (client is supplied via the hook). */
 interface McpAppRendererProps {
-    mcpClient: McpClient | null;
     name: string;
     input?: Record<string, unknown>;
     result?: unknown;
@@ -232,32 +233,13 @@ interface McpAppRendererProps {
     className?: string;
 }
 /**
- * Simple hook to get MCP app metadata
+ * Helpers scoped to one `mcpClient`. Pass the client here once; `McpAppRenderer` only needs per-tool props (`name`, `input`, `result`, `status`).
  *
- * @param mcpClient - The MCP client from useMcp() or context
- * @returns Object with getAppMetadata function and McpAppRenderer component
- *
- * @example
- * ```tsx
- * function ToolRenderer(props) {
- *   const { getAppMetadata, McpAppRenderer } = useMcpApps(mcpClient);
- *   const metadata = getAppMetadata(props.name);
- *
- *   if (!metadata) return null;
- *   return (
- *     <McpAppRenderer
- *       metadata={metadata}
- *       input={props.args}
- *       result={props.result}
- *       status={props.status}
- *     />
- *   );
- * }
- * ```
+ * @param mcpClient - From `useMcp()` or context (for example `useMcpContext()`).
  */
 declare function useMcpApps(mcpClient: McpClient | null): {
     getAppMetadata: (toolName: string) => McpAppMetadata | undefined;
     McpAppRenderer: React$1.NamedExoticComponent<McpAppRendererProps>;
 };
 
-export { AppHost, type McpClient$1 as McpClient, type McpConnection, McpConnectionEvent, McpConnectionState, SSEClient, ToolInfo, type UseMcpOptions, useAppHost, useMcp, useMcpApps };
+export { AppHost, type McpAppMetadata, type McpAppRendererProps, type McpClient$1 as McpClient, type McpConnection, McpConnectionEvent, McpConnectionState, SSEClient, ToolInfo, type UseMcpOptions, useAppHost, useMcp, useMcpApps };

package/dist/client/react.js

@@ -277,6 +277,7 @@ function useMcp(options) {
     "disconnected"
   );
   const [isInitializing, setIsInitializing] = react.useState(false);
+  const [sseClient, setSseClient] = react.useState(null);
   react.useEffect(() => {
     isMountedRef.current = true;
     const clientOptions = {
@@ -299,6 +300,7 @@ function useMcp(options) {
     };
     const client = new SSEClient(clientOptions);
     clientRef.current = client;
+    setSseClient(client);
     if (autoConnect) {
       client.connect();
       if (autoInitialize) {
@@ -532,29 +534,54 @@ function useMcp(options) {
     },
     [getConnection]
   );
-  return {
-    connections,
-    status,
-    isInitializing,
-    connect,
-    disconnect,
-    getConnection,
-    getConnectionByServerId,
-    isServerConnected,
-    getTools,
-    refresh,
-    connectSSE,
-    disconnectSSE,
-    finishAuth,
-    resumeAuth,
-    callTool,
-    listTools,
-    listPrompts,
-    getPrompt,
-    listResources,
-    readResource,
-    sseClient: clientRef.current
-  };
+  return react.useMemo(
+    () => ({
+      connections,
+      status,
+      isInitializing,
+      connect,
+      disconnect,
+      getConnection,
+      getConnectionByServerId,
+      isServerConnected,
+      getTools,
+      refresh,
+      connectSSE,
+      disconnectSSE,
+      finishAuth,
+      resumeAuth,
+      callTool,
+      listTools,
+      listPrompts,
+      getPrompt,
+      listResources,
+      readResource,
+      sseClient
+    }),
+    [
+      connections,
+      status,
+      isInitializing,
+      connect,
+      disconnect,
+      getConnection,
+      getConnectionByServerId,
+      isServerConnected,
+      getTools,
+      refresh,
+      connectSSE,
+      disconnectSSE,
+      finishAuth,
+      resumeAuth,
+      callTool,
+      listTools,
+      listPrompts,
+      getPrompt,
+      listResources,
+      readResource,
+      sseClient
+    ]
+  );
 }
 var HOST_INFO = { name: "mcp-ts-host", version: "1.0.0" };
 var SANDBOX_PERMISSIONS = [
@@ -886,37 +913,19 @@ function useAppHost(client, iframeRef, options) {
   }, [client, iframeRef]);
   return { host, error };
 }
-var McpAppRenderer = react.memo(function McpAppRenderer2({
-  mcpClient,
+var McpAppView = react.memo(function McpAppView2({
+  clientRef,
   name,
   input,
   result,
   status,
   className
 }) {
-  const getAppMetadata = react.useCallback(() => {
-    if (!mcpClient) return void 0;
-    const extractedName = extractToolName(name);
-    for (const conn of mcpClient.connections) {
-      for (const tool of conn.tools) {
-        const candidateName = extractToolName(tool.name);
-        const resourceUri = tool.mcpApp?.resourceUri ?? tool._meta?.ui?.resourceUri ?? tool._meta?.["ui/resourceUri"];
-        if (resourceUri && candidateName === extractedName) {
-          return {
-            toolName: candidateName,
-            resourceUri,
-            sessionId: conn.sessionId
-          };
-        }
-      }
-    }
-    return void 0;
-  }, [mcpClient, name]);
-  const metadata = getAppMetadata();
+  const mcpClient = clientRef.current;
+  const metadata = getMcpAppMetadata(mcpClient, name);
   const sseClient = mcpClient?.sseClient ?? null;
-  if (!metadata || !sseClient) {
-    return null;
-  }
+  const resourceUri = metadata?.resourceUri;
+  const appSessionId = metadata?.sessionId;
   const iframeRef = react.useRef(null);
   const { host, error: hostError } = useAppHost(sseClient, iframeRef);
   const [isLaunched, setIsLaunched] = react.useState(false);
@@ -927,19 +936,23 @@ var McpAppRenderer = react.memo(function McpAppRenderer2({
   const lastResultRef = react.useRef(result);
   const lastStatusRef = react.useRef(status);
   react.useEffect(() => {
-    if (!host || !metadata.resourceUri || !metadata.sessionId) return;
-    host.launch(metadata.resourceUri, metadata.sessionId).then(() => setIsLaunched(true)).catch((err) => setError(err instanceof Error ? err : new Error(String(err))));
-  }, [host, metadata.resourceUri, metadata.sessionId]);
+    setIsLaunched(false);
+    setError(null);
+  }, [resourceUri, appSessionId]);
+  react.useEffect(() => {
+    if (!host || !resourceUri || !appSessionId) return;
+    host.launch(resourceUri, appSessionId).then(() => setIsLaunched(true)).catch((err) => setError(err instanceof Error ? err : new Error(String(err))));
+  }, [host, resourceUri, appSessionId]);
   react.useEffect(() => {
-    if (!host || !isLaunched || !input) return;
+    if (!host || !isLaunched || !resourceUri || !appSessionId || !input) return;
     if (!sentInputRef.current || JSON.stringify(input) !== JSON.stringify(lastInputRef.current)) {
       sentInputRef.current = true;
       lastInputRef.current = input;
       host.sendToolInput(input);
     }
-  }, [host, isLaunched, input]);
+  }, [host, isLaunched, input, resourceUri, appSessionId, name]);
   react.useEffect(() => {
-    if (!host || !isLaunched || result === void 0) return;
+    if (!host || !isLaunched || !resourceUri || !appSessionId || result === void 0) return;
     if (status !== "complete") return;
     if (!sentResultRef.current || JSON.stringify(result) !== JSON.stringify(lastResultRef.current)) {
       sentResultRef.current = true;
@@ -947,7 +960,7 @@ var McpAppRenderer = react.memo(function McpAppRenderer2({
       const formattedResult = typeof result === "string" ? { content: [{ type: "text", text: result }] } : result;
       host.sendToolResult(formattedResult);
     }
-  }, [host, isLaunched, result, status]);
+  }, [host, isLaunched, result, status, resourceUri, appSessionId, name]);
   react.useEffect(() => {
     if (status === "executing" && lastStatusRef.current !== "executing") {
       sentInputRef.current = false;
@@ -955,6 +968,9 @@ var McpAppRenderer = react.memo(function McpAppRenderer2({
     }
     lastStatusRef.current = status;
   }, [status]);
+  if (!metadata || !sseClient) {
+    return null;
+  }
   const displayError = error || hostError;
   if (displayError) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `p-4 bg-red-900/20 border border-red-700 rounded text-red-200 ${className || ""}`, children: [
@@ -977,33 +993,43 @@ var McpAppRenderer = react.memo(function McpAppRenderer2({
   ] });
 });
 function useMcpApps(mcpClient) {
+  const clientRef = react.useRef(mcpClient);
+  clientRef.current = mcpClient;
   const getAppMetadata = react.useCallback(
-    (toolName) => {
-      if (!mcpClient) return void 0;
-      const extractedName = extractToolName(toolName);
-      for (const conn of mcpClient.connections) {
-        for (const tool of conn.tools) {
-          const candidateName = extractToolName(tool.name);
-          const resourceUri = tool.mcpApp?.resourceUri ?? tool._meta?.ui?.resourceUri ?? tool._meta?.["ui/resourceUri"];
-          if (resourceUri && candidateName === extractedName) {
-            return {
-              toolName: candidateName,
-              resourceUri,
-              sessionId: conn.sessionId
-            };
-          }
-        }
-      }
-      return void 0;
-    },
-    [mcpClient]
+    (toolName) => getMcpAppMetadata(clientRef.current, toolName),
+    []
   );
+  const McpAppRenderer = react.useMemo(() => {
+    const Renderer = react.memo(function McpAppRenderer2(props) {
+      return /* @__PURE__ */ jsxRuntime.jsx(McpAppView, { clientRef, ...props });
+    });
+    Renderer.displayName = "McpAppRenderer";
+    return Renderer;
+  }, []);
   return { getAppMetadata, McpAppRenderer };
 }
 function extractToolName(fullName) {
   const match = fullName.match(/(?:tool_[^_]+_)?(.+)$/);
   return match?.[1] || fullName;
 }
+function getMcpAppMetadata(mcpClient, toolName) {
+  if (!mcpClient) return void 0;
+  const extractedName = extractToolName(toolName);
+  for (const conn of mcpClient.connections) {
+    for (const tool of conn.tools) {
+      const candidateName = extractToolName(tool.name);
+      const resourceUri = tool.mcpApp?.resourceUri ?? tool._meta?.ui?.resourceUri ?? tool._meta?.["ui/resourceUri"];
+      if (resourceUri && candidateName === extractedName) {
+        return {
+          toolName: candidateName,
+          resourceUri,
+          sessionId: conn.sessionId
+        };
+      }
+    }
+  }
+  return void 0;
+}
 
 exports.AppHost = AppHost;
 exports.SSEClient = SSEClient;