@mcp-ts/sdk 1.2.0 → 1.3.1

package/dist/client/react.js

@@ -3,6 +3,7 @@
 var react = require('react');
 var nanoid = require('nanoid');
 var appBridge = require('@modelcontextprotocol/ext-apps/app-bridge');
+var jsxRuntime = require('react/jsx-runtime');
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -928,312 +929,106 @@ function useAppHost(client, iframeRef, options) {
   }, [client, iframeRef]);
   return { host, error };
 }
-function useMcpAppIframe({
-  resourceUri,
-  sessionId,
-  toolInput,
-  toolResult,
-  toolStatus,
-  sseClient
+var McpAppRenderer = react.memo(function McpAppRenderer2({
+  metadata,
+  input,
+  result,
+  status,
+  sseClient,
+  className
 }) {
   const iframeRef = react.useRef(null);
   const { host, error: hostError } = useAppHost(sseClient, iframeRef);
   const [isLaunched, setIsLaunched] = react.useState(false);
   const [error, setError] = react.useState(null);
-  const launchAttemptedRef = react.useRef(false);
-  const toolInputSentRef = react.useRef(false);
-  const toolResultSentRef = react.useRef(false);
+  const sentInputRef = react.useRef(false);
+  const sentResultRef = react.useRef(false);
+  const lastInputRef = react.useRef(input);
+  const lastResultRef = react.useRef(result);
+  const lastStatusRef = react.useRef(status);
   react.useEffect(() => {
-    if (hostError) {
-      setError(hostError);
-    }
-  }, [hostError]);
-  react.useEffect(() => {
-    if (!host || !resourceUri || !sessionId || launchAttemptedRef.current) return;
-    launchAttemptedRef.current = true;
-    host.launch(resourceUri, sessionId).then(() => {
-      setIsLaunched(true);
-    }).catch((err) => {
-      const error2 = err instanceof Error ? err : new Error(String(err));
-      setError(error2);
-    });
-  }, [host, resourceUri, sessionId]);
+    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]);
   react.useEffect(() => {
-    if (!host || !isLaunched || !toolInput || toolInputSentRef.current) return;
-    toolInputSentRef.current = true;
-    host.sendToolInput(toolInput);
-  }, [host, isLaunched, toolInput]);
-  react.useEffect(() => {
-    if (!host || !isLaunched || toolResult === void 0 || toolResultSentRef.current) return;
-    if (toolStatus !== "complete") return;
-    toolResultSentRef.current = true;
-    const formattedResult = typeof toolResult === "string" ? { content: [{ type: "text", text: toolResult }] } : toolResult;
-    host.sendToolResult(formattedResult);
-  }, [host, isLaunched, toolResult, toolStatus]);
-  return {
-    iframeRef,
-    isLaunched,
-    error
-  };
-}
-
-// src/client/react/agui-subscriber.ts
-function createMcpAppSubscriber(config) {
-  const eventName = config.eventName || "mcp-apps-ui";
-  const subscriber = {
-    // Listen for custom MCP app events from middleware
-    onCustomEvent: ({ event }) => {
-      if (event.name === eventName && config.onMcpApp) {
-        const payload = event.value;
-        config.onMcpApp(payload);
-      }
-    },
-    // Listen for tool call lifecycle events
-    onToolCallStartEvent: (params) => {
-      if (config.onToolCall && params.event.toolCallName) {
-        config.onToolCall({
-          toolCallId: params.event.toolCallId || "",
-          toolName: params.event.toolCallName,
-          status: "start"
-        });
-      }
-    },
-    onToolCallArgsEvent: (params) => {
-      if (config.onToolCall) {
-        const args = params.partialToolCallArgs;
-        config.onToolCall({
-          toolCallId: params.event.toolCallId || "",
-          toolName: params.toolCallName || "",
-          // toolCallName is in params, not event
-          args,
-          status: "args"
-        });
-      }
-    },
-    onToolCallEndEvent: (params) => {
-      if (config.onToolCall && params.event.toolCallId) {
-        config.onToolCall({
-          toolCallId: params.event.toolCallId,
-          toolName: params.toolCallName || "",
-          // toolCallName is in params, not event
-          status: "end"
-        });
-      }
-    },
-    onToolCallResultEvent: (params) => {
-      if (config.onToolCall && params.event.toolCallId) {
-        config.onToolCall({
-          toolCallId: params.event.toolCallId,
-          toolName: "",
-          // Not available in result event
-          result: params.event.content,
-          // content contains the result
-          status: "result"
-        });
-      }
-    }
-  };
-  return subscriber;
-}
-function subscribeMcpAppEvents(agent, config) {
-  const subscriber = createMcpAppSubscriber(config);
-  const { unsubscribe } = agent.subscribe(subscriber);
-  return unsubscribe;
-}
-var McpAppEventManager = class {
-  constructor() {
-    __publicField(this, "events", /* @__PURE__ */ new Map());
-    __publicField(this, "toolCalls", /* @__PURE__ */ new Map());
-    __publicField(this, "listeners", /* @__PURE__ */ new Set());
-    __publicField(this, "unsubscribe");
-    __publicField(this, "cachedSnapshot", {});
-  }
-  /**
-   * Attach to an AG-UI agent
-   */
-  attach(agent) {
-    if (this.unsubscribe) {
-      this.unsubscribe();
+    if (!host || !isLaunched || !input) return;
+    if (!sentInputRef.current || JSON.stringify(input) !== JSON.stringify(lastInputRef.current)) {
+      sentInputRef.current = true;
+      lastInputRef.current = input;
+      host.sendToolInput(input);
     }
-    this.unsubscribe = subscribeMcpAppEvents(agent, {
-      onMcpApp: (event) => {
-        this.events.set(event.toolName, event);
-        this.cachedSnapshot = Object.fromEntries(this.events);
-        this.notify();
-      },
-      onToolCall: (event) => {
-        if (event.toolCallId) {
-          this.toolCalls.set(event.toolCallId, event);
-          this.notify();
-        }
-      }
-    });
-  }
-  /**
-   * Detach from the current agent
-   */
-  detach() {
-    if (this.unsubscribe) {
-      this.unsubscribe();
-      this.unsubscribe = void 0;
-    }
-  }
-  /**
-   * Get MCP app event for a specific tool
-   */
-  getEvent(toolName) {
-    return this.events.get(toolName);
-  }
-  /**
-   * Get all MCP app events (cached for useSyncExternalStore)
-   */
-  getAllEvents() {
-    return this.cachedSnapshot;
-  }
-  /**
-   * Get tool call event by ID
-   */
-  getToolCall(toolCallId) {
-    return this.toolCalls.get(toolCallId);
-  }
-  /**
-   * Subscribe to event changes
-   */
-  subscribe(listener) {
-    this.listeners.add(listener);
-    return () => this.listeners.delete(listener);
-  }
-  /**
-   * Clear all events
-   */
-  clear() {
-    this.events.clear();
-    this.toolCalls.clear();
-    this.cachedSnapshot = {};
-    this.notify();
-  }
-  notify() {
-    this.listeners.forEach((listener) => listener());
-  }
-};
-
-// src/client/react/use-agui-subscriber.ts
-function useAguiSubscriber(agent, config) {
+  }, [host, isLaunched, input]);
   react.useEffect(() => {
-    if (!agent) return;
-    const subscriber = createMcpAppSubscriber(config);
-    const { unsubscribe } = agent.subscribe(subscriber);
-    return () => unsubscribe();
-  }, [agent, config]);
-}
-function useMcpApps(agent, mcpClient) {
-  const [manager] = react.useState(() => new McpAppEventManager());
+    if (!host || !isLaunched || result === void 0) return;
+    if (status !== "complete") return;
+    if (!sentResultRef.current || JSON.stringify(result) !== JSON.stringify(lastResultRef.current)) {
+      sentResultRef.current = true;
+      lastResultRef.current = result;
+      const formattedResult = typeof result === "string" ? { content: [{ type: "text", text: result }] } : result;
+      host.sendToolResult(formattedResult);
+    }
+  }, [host, isLaunched, result, status]);
   react.useEffect(() => {
-    if (!agent) {
-      manager.detach();
-      return;
+    if (status === "executing" && lastStatusRef.current !== "executing") {
+      sentInputRef.current = false;
+      sentResultRef.current = false;
     }
-    manager.attach(agent);
-    return () => manager.detach();
-  }, [agent, manager]);
-  const agentApps = react.useSyncExternalStore(
-    (callback) => manager.subscribe(callback),
-    () => manager.getAllEvents(),
-    () => ({})
-    // Server-side snapshot
-  );
-  const apps = react.useMemo(() => {
-    const combined = {};
-    if (mcpClient) {
+    lastStatusRef.current = status;
+  }, [status]);
+  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: [
+      "Error: ",
+      displayError.message || String(displayError)
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-full border border-gray-700 rounded overflow-hidden bg-white min-h-96 my-2 relative ${className || ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "iframe",
+      {
+        ref: iframeRef,
+        sandbox: "allow-scripts allow-same-origin allow-forms allow-modals allow-popups allow-downloads",
+        className: "w-full h-full min-h-96",
+        style: { height: "auto" },
+        title: "MCP App"
+      }
+    ),
+    !isLaunched && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gray-900/50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" }) })
+  ] });
+});
+function useMcpApps(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 meta = tool._meta;
-          if (!meta?.ui) continue;
-          const ui = meta.ui;
-          if (typeof ui !== "object" || !ui) continue;
-          if (ui.visibility && !ui.visibility.includes("app")) continue;
-          const resourceUri = typeof ui.resourceUri === "string" ? ui.resourceUri : typeof ui.uri === "string" ? ui.uri : void 0;
-          if (resourceUri) {
-            combined[tool.name] = {
-              toolCallId: "",
+          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,
-              toolName: tool.name
+              sessionId: conn.sessionId
             };
           }
         }
       }
-    }
-    for (const [toolName, event] of Object.entries(agentApps)) {
-      if (combined[toolName]) {
-        combined[toolName] = {
-          ...combined[toolName],
-          toolCallId: event.toolCallId || combined[toolName].toolCallId,
-          result: event.result,
-          input: event.input,
-          status: event.status
-        };
-      } else {
-        combined[toolName] = event;
-      }
-    }
-    return new Proxy(combined, {
-      get(target, prop) {
-        if (typeof prop !== "string") return void 0;
-        if (prop in target) return target[prop];
-        const match = prop.match(/^tool_[^_]+_(.+)$/);
-        if (match && match[1] in target) {
-          return target[match[1]];
-        }
-        return void 0;
-      },
-      // Support Object.entries, Object.keys, etc. by returning base names
-      ownKeys(target) {
-        return Reflect.ownKeys(target);
-      },
-      getOwnPropertyDescriptor(target, prop) {
-        return Reflect.getOwnPropertyDescriptor(target, prop);
-      }
-    });
-  }, [agentApps, mcpClient]);
-  return {
-    apps,
-    // getApp handles both base and prefixed names transparently via the Proxy
-    getApp: (toolName) => apps[toolName],
-    clear: () => manager.clear()
-  };
+      return void 0;
+    },
+    [mcpClient]
+  );
+  return { getAppMetadata, McpAppRenderer };
 }
-function useToolCallEvents(agent) {
-  const [toolCalls, setToolCalls] = react.useState({});
-  react.useEffect(() => {
-    if (!agent) {
-      setToolCalls({});
-      return;
-    }
-    const subscriber = createMcpAppSubscriber({
-      onToolCall: (event) => {
-        setToolCalls((prev) => ({
-          ...prev,
-          [event.toolCallId]: event
-        }));
-      }
-    });
-    const { unsubscribe } = agent.subscribe(subscriber);
-    return () => unsubscribe();
-  }, [agent]);
-  return { toolCalls };
+function extractToolName(fullName) {
+  const match = fullName.match(/(?:tool_[^_]+_)?(.+)$/);
+  return match?.[1] || fullName;
 }
 
 exports.AppHost = AppHost;
-exports.McpAppEventManager = McpAppEventManager;
 exports.SSEClient = SSEClient;
-exports.createMcpAppSubscriber = createMcpAppSubscriber;
-exports.subscribeMcpAppEvents = subscribeMcpAppEvents;
-exports.useAguiSubscriber = useAguiSubscriber;
 exports.useAppHost = useAppHost;
 exports.useMcp = useMcp;
-exports.useMcpAppIframe = useMcpAppIframe;
 exports.useMcpApps = useMcpApps;
-exports.useToolCallEvents = useToolCallEvents;
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map