@mcp-ts/sdk 1.1.0 → 1.2.0

package/dist/client/react.mjs

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect, useCallback } from 'react';
+import { useRef, useState, useEffect, useCallback, useSyncExternalStore, useMemo } from 'react';
 import { nanoid } from 'nanoid';
 import { AppBridge, PostMessageTransport } from '@modelcontextprotocol/ext-apps/app-bridge';
 
@@ -327,7 +327,7 @@ var SSEClient = class {
   }
 };
 
-// src/client/react/useMcp.ts
+// src/client/react/use-mcp.ts
 function useMcp(options) {
   const {
     url,
@@ -593,7 +593,7 @@ function useMcp(options) {
     getPrompt,
     listResources,
     readResource,
-    client: clientRef.current
+    sseClient: clientRef.current
   };
 }
 var HOST_INFO = { name: "mcp-ts-host", version: "1.0.0" };
@@ -893,8 +893,8 @@ var AppHost = class {
   }
 };
 
-// src/client/react/use-mcp-app.ts
-function useMcpApp(client, iframeRef, options) {
+// src/client/react/use-app-host.ts
+function useAppHost(client, iframeRef, options) {
   const [host, setHost] = useState(null);
   const [error, setError] = useState(null);
   const initializingRef = useRef(false);
@@ -914,7 +914,7 @@ function useMcpApp(client, iframeRef, options) {
         setHost(appHost);
         await appHost.start();
       } catch (err) {
-        console.error("[useMcpApp] Failed to initialize AppHost:", err);
+        console.error("[useAppHost] Failed to initialize AppHost:", err);
         setError(err instanceof Error ? err : new Error(String(err)));
       }
     };
@@ -926,7 +926,302 @@ function useMcpApp(client, iframeRef, options) {
   }, [client, iframeRef]);
   return { host, error };
 }
+function useMcpAppIframe({
+  resourceUri,
+  sessionId,
+  toolInput,
+  toolResult,
+  toolStatus,
+  sseClient
+}) {
+  const iframeRef = useRef(null);
+  const { host, error: hostError } = useAppHost(sseClient, iframeRef);
+  const [isLaunched, setIsLaunched] = useState(false);
+  const [error, setError] = useState(null);
+  const launchAttemptedRef = useRef(false);
+  const toolInputSentRef = useRef(false);
+  const toolResultSentRef = useRef(false);
+  useEffect(() => {
+    if (hostError) {
+      setError(hostError);
+    }
+  }, [hostError]);
+  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]);
+  useEffect(() => {
+    if (!host || !isLaunched || !toolInput || toolInputSentRef.current) return;
+    toolInputSentRef.current = true;
+    host.sendToolInput(toolInput);
+  }, [host, isLaunched, toolInput]);
+  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();
+    }
+    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) {
+  useEffect(() => {
+    if (!agent) return;
+    const subscriber = createMcpAppSubscriber(config);
+    const { unsubscribe } = agent.subscribe(subscriber);
+    return () => unsubscribe();
+  }, [agent, config]);
+}
+function useMcpApps(agent, mcpClient) {
+  const [manager] = useState(() => new McpAppEventManager());
+  useEffect(() => {
+    if (!agent) {
+      manager.detach();
+      return;
+    }
+    manager.attach(agent);
+    return () => manager.detach();
+  }, [agent, manager]);
+  const agentApps = useSyncExternalStore(
+    (callback) => manager.subscribe(callback),
+    () => manager.getAllEvents(),
+    () => ({})
+    // Server-side snapshot
+  );
+  const apps = useMemo(() => {
+    const combined = {};
+    if (mcpClient) {
+      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: "",
+              resourceUri,
+              sessionId: conn.sessionId,
+              toolName: tool.name
+            };
+          }
+        }
+      }
+    }
+    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()
+  };
+}
+function useToolCallEvents(agent) {
+  const [toolCalls, setToolCalls] = useState({});
+  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 };
+}
 
-export { AppHost, SSEClient, useMcp, useMcpApp };
+export { AppHost, McpAppEventManager, SSEClient, createMcpAppSubscriber, subscribeMcpAppEvents, useAguiSubscriber, useAppHost, useMcp, useMcpAppIframe, useMcpApps, useToolCallEvents };
 //# sourceMappingURL=react.mjs.map
 //# sourceMappingURL=react.mjs.map