@mcp-ts/sdk 1.3.7 → 1.3.10

package/dist/client/react.mjs

@@ -1,4 +1,4 @@
-import { memo, useRef, useState, useEffect, useCallback } from 'react';
+import { memo, useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { nanoid } from 'nanoid';
 import { AppBridge, PostMessageTransport } from '@modelcontextprotocol/ext-apps/app-bridge';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -275,6 +275,7 @@ function useMcp(options) {
     "disconnected"
   );
   const [isInitializing, setIsInitializing] = useState(false);
+  const [sseClient, setSseClient] = useState(null);
   useEffect(() => {
     isMountedRef.current = true;
     const clientOptions = {
@@ -297,6 +298,7 @@ function useMcp(options) {
     };
     const client = new SSEClient(clientOptions);
     clientRef.current = client;
+    setSseClient(client);
     if (autoConnect) {
       client.connect();
       if (autoInitialize) {
@@ -530,29 +532,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 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 = [
@@ -884,14 +911,19 @@ function useAppHost(client, iframeRef, options) {
   }, [client, iframeRef]);
   return { host, error };
 }
-var McpAppRenderer = memo(function McpAppRenderer2({
-  metadata,
+var McpAppView = memo(function McpAppView2({
+  clientRef,
+  name,
   input,
   result,
   status,
-  sseClient,
   className
 }) {
+  const mcpClient = clientRef.current;
+  const metadata = getMcpAppMetadata(mcpClient, name);
+  const sseClient = mcpClient?.sseClient ?? null;
+  const resourceUri = metadata?.resourceUri;
+  const appSessionId = metadata?.sessionId;
   const iframeRef = useRef(null);
   const { host, error: hostError } = useAppHost(sseClient, iframeRef);
   const [isLaunched, setIsLaunched] = useState(false);
@@ -902,19 +934,23 @@ var McpAppRenderer = memo(function McpAppRenderer2({
   const lastResultRef = useRef(result);
   const lastStatusRef = useRef(status);
   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]);
+  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]);
   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]);
   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;
@@ -922,7 +958,7 @@ var McpAppRenderer = 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]);
   useEffect(() => {
     if (status === "executing" && lastStatusRef.current !== "executing") {
       sentInputRef.current = false;
@@ -930,6 +966,9 @@ var McpAppRenderer = memo(function McpAppRenderer2({
     }
     lastStatusRef.current = status;
   }, [status]);
+  if (!metadata || !sseClient) {
+    return null;
+  }
   const displayError = error || hostError;
   if (displayError) {
     return /* @__PURE__ */ jsxs("div", { className: `p-4 bg-red-900/20 border border-red-700 rounded text-red-200 ${className || ""}`, children: [
@@ -952,33 +991,43 @@ var McpAppRenderer = memo(function McpAppRenderer2({
   ] });
 });
 function useMcpApps(mcpClient) {
+  const clientRef = useRef(mcpClient);
+  clientRef.current = mcpClient;
   const getAppMetadata = 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 = useMemo(() => {
+    const Renderer = memo(function McpAppRenderer2(props) {
+      return /* @__PURE__ */ 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;
+}
 
 export { AppHost, SSEClient, useAppHost, useMcp, useMcpApps };
 //# sourceMappingURL=react.mjs.map