open-mcp-app 0.1.3 → 0.1.4

package/dist/react/index.js

@@ -1,5 +1,5 @@
 // src/react/useHost.ts
-import { useSyncExternalStore, useEffect, useRef, useMemo } from "react";
+import { useSyncExternalStore, useEffect as useEffect2, useRef as useRef2, useMemo, useState, useCallback } from "react";
 
 // src/core/base/Subscribable.ts
 var Subscribable = class {
@@ -278,6 +278,24 @@ var ChatGptAdapter = class _ChatGptAdapter {
   get isCreature() {
     return false;
   }
+  /**
+   * Experimental APIs for ChatGPT.
+   * Most are no-ops since ChatGPT doesn't support MCP Apps extensions.
+   */
+  get experimental() {
+    return {
+      sendNotification: (_method, _params) => {
+      },
+      setWidgetState: (state) => {
+        this.base.setWidgetState(state);
+      },
+      setTitle: (_title) => {
+      },
+      getCreatureStyles: () => {
+        return null;
+      }
+    };
+  }
   /**
    * Get host context - returns null for ChatGPT as it doesn't use MCP Apps protocol.
    */
@@ -293,19 +311,6 @@ var ChatGptAdapter = class _ChatGptAdapter {
   async callTool(toolName, args) {
     return this.base.callTool(toolName, args);
   }
-  /**
-   * Send notification - not supported on ChatGPT.
-   */
-  sendNotification(_method, _params) {
-  }
-  setWidgetState(state) {
-    this.base.setWidgetState(state);
-  }
-  /**
-   * Set pip/widget title - not supported on ChatGPT.
-   */
-  setTitle(_title) {
-  }
   async requestDisplayMode(params) {
     return this.base.requestDisplayMode(params);
   }
@@ -460,6 +465,26 @@ var StandaloneAdapter = class _StandaloneAdapter {
   get isCreature() {
     return false;
   }
+  /**
+   * Experimental APIs for standalone mode.
+   * All methods are logged for development/debugging purposes.
+   */
+  get experimental() {
+    return {
+      sendNotification: (method, params) => {
+        console.debug(`[Standalone] experimental.sendNotification("${method}")`, params);
+      },
+      setWidgetState: (state) => {
+        this.base.setWidgetState(state);
+      },
+      setTitle: (title) => {
+        console.debug(`[Standalone] experimental.setTitle("${title}")`);
+      },
+      getCreatureStyles: () => {
+        return null;
+      }
+    };
+  }
   /**
    * Get host context - returns null for standalone mode.
    */
@@ -475,21 +500,6 @@ var StandaloneAdapter = class _StandaloneAdapter {
   async callTool(toolName, args) {
     return this.base.callTool(toolName, args);
   }
-  /**
-   * Send notification - logged in standalone mode.
-   */
-  sendNotification(method, params) {
-    console.debug(`[Standalone] sendNotification("${method}")`, params);
-  }
-  setWidgetState(state) {
-    this.base.setWidgetState(state);
-  }
-  /**
-   * Set pip/widget title - logged in standalone mode.
-   */
-  setTitle(title) {
-    console.debug(`[Standalone] setTitle("${title}")`);
-  }
   async requestDisplayMode(params) {
     return this.base.requestDisplayMode(params);
   }
@@ -10156,14 +10166,29 @@ var UpgradingMcpAppsClient = class _UpgradingMcpAppsClient {
     return this.base.getState().environment;
   }
   // ============================================================================
-  // Creature-Specific Extensions (gracefully no-op when not in Creature)
+  // Experimental APIs
   // ============================================================================
   /**
-   * Get Creature-specific styles if available.
-   * Returns null when not running in Creature.
+   * Experimental APIs with dynamic Creature support.
+   * Methods like setTitle will only work when isCreature is true.
    */
-  getCreatureStyles() {
-    return this.base.getCreatureStyles();
+  get experimental() {
+    return {
+      sendNotification: (method, params) => {
+        this.base.sendNotification(method, params);
+      },
+      setWidgetState: (state) => {
+        this.base.setWidgetState(state);
+      },
+      setTitle: (title) => {
+        if (this.isCreature) {
+          this.base.sendNotification("ui/notifications/title-changed", { title });
+        }
+      },
+      getCreatureStyles: () => {
+        return this.base.getCreatureStyles();
+      }
+    };
   }
   // ============================================================================
   // UnifiedHostClient Implementation
@@ -10180,19 +10205,6 @@ var UpgradingMcpAppsClient = class _UpgradingMcpAppsClient {
   async callTool(toolName, args) {
     return this.base.callTool(toolName, args);
   }
-  sendNotification(method, params) {
-    this.base.sendNotification(method, params);
-  }
-  setWidgetState(state) {
-    this.base.setWidgetState(state);
-  }
-  /**
-   * Set pip/widget title.
-   * Sends a notification - hosts that support it will update the title.
-   */
-  setTitle(title) {
-    this.base.sendNotification("ui/notifications/title-changed", { title });
-  }
   async requestDisplayMode(params) {
     return this.base.requestDisplayMode(params);
   }
@@ -10262,6 +10274,25 @@ var McpAppsAdapter = class _McpAppsAdapter {
   get isCreature() {
     return false;
   }
+  /**
+   * Experimental APIs for non-spec extensions.
+   * Base MCP Apps adapter provides minimal implementations - CreatureAdapter overrides.
+   */
+  get experimental() {
+    return {
+      sendNotification: (method, params) => {
+        this.base.sendNotification(method, params);
+      },
+      setWidgetState: (state) => {
+        this.base.setWidgetState(state);
+      },
+      setTitle: (_title) => {
+      },
+      getCreatureStyles: () => {
+        return null;
+      }
+    };
+  }
   /**
    * Get the host context received from the host.
    * Useful for checking host-specific capabilities.
@@ -10278,19 +10309,6 @@ var McpAppsAdapter = class _McpAppsAdapter {
   async callTool(toolName, args) {
     return this.base.callTool(toolName, args);
   }
-  sendNotification(method, params) {
-    this.base.sendNotification(method, params);
-  }
-  setWidgetState(state) {
-    this.base.setWidgetState(state);
-  }
-  /**
-   * Set pip/widget title.
-   * Sends a notification - hosts that support it will update the title.
-   */
-  setTitle(title) {
-    this.base.sendNotification("ui/notifications/title-changed", { title });
-  }
   async requestDisplayMode(params) {
     return this.base.requestDisplayMode(params);
   }
@@ -10388,11 +10406,25 @@ var CreatureAdapter = class _CreatureAdapter extends McpAppsAdapter {
     return this.base.isCreatureHost();
   }
   /**
-   * Get Creature-specific styles if available.
-   * Returns null when not running in Creature.
+   * Experimental APIs with Creature-specific implementations.
    */
-  getCreatureStyles() {
-    return this.base.getCreatureStyles();
+  get experimental() {
+    return {
+      sendNotification: (method, params) => {
+        this.base.sendNotification(method, params);
+      },
+      setWidgetState: (state) => {
+        this.base.setWidgetState(state);
+      },
+      setTitle: (title) => {
+        if (this.isCreature) {
+          this.base.sendNotification("ui/notifications/title-changed", { title });
+        }
+      },
+      getCreatureStyles: () => {
+        return this.base.getCreatureStyles();
+      }
+    };
   }
 };
 
@@ -10539,13 +10571,164 @@ async function createHostAsync(config) {
   });
 }
 
-// src/react/useHost.ts
-function useHost(config) {
+// src/react/HostContext.tsx
+import { createContext, useContext, useRef, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+var HostContext = createContext(null);
+function useHostClient() {
+  const client = useContext(HostContext);
+  if (!client) {
+    throw new Error(
+      'useHostClient must be used within a HostProvider. Wrap your app with <HostProvider name="..." version="...">.'
+    );
+  }
+  return client;
+}
+function useHostClientOptional() {
+  return useContext(HostContext);
+}
+function HostProvider({
+  name,
+  version,
+  children,
+  onToolInput,
+  onThemeChange,
+  onTeardown
+}) {
   const clientRef = useRef(null);
   if (!clientRef.current) {
-    clientRef.current = createHost({ name: config.name, version: config.version });
+    clientRef.current = createHost({ name, version });
   }
   const client = clientRef.current;
+  const callbacksRef = useRef({ onToolInput, onThemeChange, onTeardown });
+  useEffect(() => {
+    callbacksRef.current = { onToolInput, onThemeChange, onTeardown };
+  });
+  useEffect(() => {
+    const unsubs = [];
+    if (callbacksRef.current.onToolInput) {
+      unsubs.push(
+        client.on("tool-input", (args) => callbacksRef.current.onToolInput?.(args))
+      );
+    }
+    unsubs.push(
+      client.on("theme-change", (theme) => callbacksRef.current.onThemeChange?.(theme))
+    );
+    unsubs.push(
+      client.on("teardown", () => callbacksRef.current.onTeardown?.())
+    );
+    client.connect();
+    return () => {
+      unsubs.forEach((unsub) => unsub());
+      client.disconnect();
+    };
+  }, [client]);
+  return /* @__PURE__ */ jsx(HostContext.Provider, { value: client, children });
+}
+
+// src/react/useHost.ts
+var INITIAL_TOOL_STATE = {
+  status: "idle",
+  data: null,
+  result: null,
+  error: null,
+  isError: false,
+  text: null,
+  title: null,
+  instanceId: null
+};
+function extractResultMetadata(result) {
+  const structured = result.structuredContent;
+  let data = null;
+  let title = null;
+  let instanceId = null;
+  if (structured) {
+    const { title: resultTitle, instanceId: resultInstanceId, ...rest } = structured;
+    data = rest;
+    if (resultTitle) title = resultTitle;
+    if (resultInstanceId) instanceId = resultInstanceId;
+  }
+  const text = result.content?.[0]?.text ?? null;
+  return { data, title, instanceId, text };
+}
+function useHost(config) {
+  const contextClient = useHostClientOptional();
+  const useContext2 = !config && contextClient !== null;
+  const clientRef = useRef2(null);
+  if (!useContext2) {
+    if (!config) {
+      throw new Error(
+        'useHost() requires either a HostProvider wrapper or config argument. Either wrap your app with <HostProvider name="..." version="..."> or pass { name, version } to useHost().'
+      );
+    }
+    if (!clientRef.current) {
+      clientRef.current = createHost({ name: config.name, version: config.version });
+    }
+  }
+  const client = useContext2 ? contextClient : clientRef.current;
+  const [toolStates, setToolStates] = useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const toolFunctionsRef = useRef2(/* @__PURE__ */ new Map());
+  const updateToolState = useCallback(
+    (toolName, newState) => {
+      setToolStates((prev) => {
+        const current = prev.get(toolName) ?? INITIAL_TOOL_STATE;
+        const updated = { ...current, ...newState };
+        const next = new Map(prev);
+        next.set(toolName, updated);
+        return next;
+      });
+    },
+    []
+  );
+  const getOrCreateToolFunction = useCallback(
+    (toolName) => {
+      const existing = toolFunctionsRef.current.get(toolName);
+      if (existing) {
+        return existing;
+      }
+      const runFn = async (args = {}) => {
+        updateToolState(toolName, {
+          status: "loading",
+          error: null
+        });
+        try {
+          const result = await client.callTool(toolName, args);
+          const { data, title, instanceId, text } = extractResultMetadata(result);
+          updateToolState(toolName, {
+            status: "success",
+            data,
+            result,
+            error: null,
+            isError: result.isError ?? false,
+            text,
+            title,
+            instanceId
+          });
+          return result;
+        } catch (err) {
+          updateToolState(toolName, {
+            status: "error",
+            error: err,
+            isError: true
+          });
+          throw err;
+        }
+      };
+      toolFunctionsRef.current.set(toolName, runFn);
+      return runFn;
+    },
+    [client, updateToolState]
+  );
+  const callTool = useCallback(
+    (toolName) => {
+      const runFn = getOrCreateToolFunction(toolName);
+      const currentState = toolStates.get(toolName) ?? INITIAL_TOOL_STATE;
+      return [runFn, currentState];
+    },
+    [getOrCreateToolFunction, toolStates]
+  );
   const log = useMemo(() => {
     const logFn = (message, data) => {
       client.log("info", message, data);
@@ -10567,13 +10750,16 @@ function useHost(config) {
     };
     return logFn;
   }, [client]);
-  const boundMethods = useMemo(
+  const requestDisplayMode = useMemo(
+    () => client.requestDisplayMode.bind(client),
+    [client]
+  );
+  const experimental = useMemo(
     () => ({
-      callTool: client.callTool.bind(client),
-      sendNotification: client.sendNotification.bind(client),
-      setWidgetState: client.setWidgetState.bind(client),
-      setTitle: client.setTitle.bind(client),
-      requestDisplayMode: client.requestDisplayMode.bind(client)
+      sendNotification: client.experimental.sendNotification.bind(client.experimental),
+      setWidgetState: client.experimental.setWidgetState.bind(client.experimental),
+      setTitle: client.experimental.setTitle.bind(client.experimental),
+      getCreatureStyles: client.experimental.getCreatureStyles.bind(client.experimental)
     }),
     [client]
   );
@@ -10582,23 +10768,33 @@ function useHost(config) {
     () => client.getState(),
     () => client.getState()
   );
-  const callbacksRef = useRef({
-    onToolInput: config.onToolInput,
-    onToolResult: config.onToolResult,
-    onThemeChange: config.onThemeChange,
-    onTeardown: config.onTeardown,
-    onWidgetStateChange: config.onWidgetStateChange
+  const experimental_widgetState = useCallback(
+    () => {
+      const currentState = state.widgetState;
+      const setState = (newState) => {
+        client.experimental.setWidgetState(newState);
+      };
+      return [currentState, setState];
+    },
+    [state.widgetState, client]
+  );
+  const callbacksRef = useRef2({
+    onToolInput: config?.onToolInput,
+    onToolResult: config?.onToolResult,
+    onThemeChange: config?.onThemeChange,
+    onTeardown: config?.onTeardown,
+    onWidgetStateChange: config?.onWidgetStateChange
   });
-  useEffect(() => {
+  useEffect2(() => {
     callbacksRef.current = {
-      onToolInput: config.onToolInput,
-      onToolResult: config.onToolResult,
-      onThemeChange: config.onThemeChange,
-      onTeardown: config.onTeardown,
-      onWidgetStateChange: config.onWidgetStateChange
+      onToolInput: config?.onToolInput,
+      onToolResult: config?.onToolResult,
+      onThemeChange: config?.onThemeChange,
+      onTeardown: config?.onTeardown,
+      onWidgetStateChange: config?.onWidgetStateChange
     };
   });
-  useEffect(() => {
+  useEffect2(() => {
     const unsubs = [];
     unsubs.push(
       client.on("tool-input", (args) => callbacksRef.current.onToolInput?.(args))
@@ -10618,38 +10814,42 @@ function useHost(config) {
         (widgetState) => callbacksRef.current.onWidgetStateChange?.(widgetState)
       )
     );
-    client.connect();
+    if (!useContext2) {
+      client.connect();
+    }
     return () => {
       unsubs.forEach((unsub) => unsub());
-      client.disconnect();
+      if (!useContext2) {
+        client.disconnect();
+      }
     };
-  }, [client]);
+  }, [client, useContext2]);
   return {
     isReady: state.isReady,
     environment: state.environment,
     widgetState: state.widgetState,
-    callTool: boundMethods.callTool,
-    sendNotification: boundMethods.sendNotification,
-    setWidgetState: boundMethods.setWidgetState,
-    setTitle: boundMethods.setTitle,
-    requestDisplayMode: boundMethods.requestDisplayMode,
+    callTool,
+    requestDisplayMode,
     log,
     // Host detection properties (may change after connection for MCP Apps)
     adapterKind: client.adapterKind,
     isCreature: client.isCreature,
-    hostContext: client.getHostContext()
+    hostContext: client.getHostContext(),
+    // Experimental APIs (non-spec extensions)
+    experimental,
+    experimental_widgetState
   };
 }
 
 // src/react/useToolResult.ts
-import { useState as useState2, useCallback } from "react";
+import { useState as useState2, useCallback as useCallback2 } from "react";
 function useToolResult() {
   const [data, setData] = useState2(null);
   const [instanceId, setInstanceId] = useState2(null);
   const [title, setTitle] = useState2(null);
   const [isError, setIsError] = useState2(false);
   const [text, setText] = useState2(null);
-  const onToolResult = useCallback((result) => {
+  const onToolResult = useCallback2((result) => {
     const structured = result.structuredContent;
     if (structured) {
       const { title: resultTitle, instanceId: resultInstanceId, ...rest } = structured;
@@ -10666,7 +10866,7 @@ function useToolResult() {
       setText(result.content[0].text);
     }
   }, []);
-  const reset = useCallback(() => {
+  const reset = useCallback2(() => {
     setData(null);
     setInstanceId(null);
     setTitle(null);
@@ -10685,23 +10885,23 @@ function useToolResult() {
 }
 
 // src/react/useWebSocket.ts
-import { useEffect as useEffect2, useRef as useRef2, useMemo as useMemo2, useCallback as useCallback2, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useMemo as useMemo2, useCallback as useCallback3, useSyncExternalStore as useSyncExternalStore2 } from "react";
 function useWebSocket(url, config = {}) {
   const { onMessage, enabled = true } = config;
-  const onMessageRef = useRef2(onMessage);
+  const onMessageRef = useRef3(onMessage);
   onMessageRef.current = onMessage;
-  const stateRef = useRef2({ status: "disconnected", error: void 0 });
-  const listenersRef = useRef2(/* @__PURE__ */ new Set());
-  const clientRef = useRef2(null);
-  const subscribe = useCallback2((listener) => {
+  const stateRef = useRef3({ status: "disconnected", error: void 0 });
+  const listenersRef = useRef3(/* @__PURE__ */ new Set());
+  const clientRef = useRef3(null);
+  const subscribe = useCallback3((listener) => {
     listenersRef.current.add(listener);
     return () => {
       listenersRef.current.delete(listener);
     };
   }, []);
-  const getSnapshot = useCallback2(() => stateRef.current, []);
+  const getSnapshot = useCallback3(() => stateRef.current, []);
   const state = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!url || !enabled) {
       if (clientRef.current) {
         clientRef.current.disconnect();
@@ -10738,8 +10938,8 @@ function useWebSocket(url, config = {}) {
 }
 
 // src/react/CreatureIcon.tsx
-import { useState as useState3, useEffect as useEffect3, useRef as useRef3 } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState as useState3, useEffect as useEffect4, useRef as useRef4 } from "react";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 function CreatureIcon({
   isDarkMode,
   showEyes = true,
@@ -10750,8 +10950,8 @@ function CreatureIcon({
 }) {
   const fillColor = isDarkMode ? "#F8F7F6" : "#0D0D0C";
   const [isBlinking, setIsBlinking] = useState3(false);
-  const timeoutRef = useRef3(null);
-  useEffect3(() => {
+  const timeoutRef = useRef4(null);
+  useEffect4(() => {
     if (!enableBlink || !showEyes) {
       return;
     }
@@ -10782,7 +10982,7 @@ function CreatureIcon({
       xmlns: "http://www.w3.org/2000/svg",
       className,
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "path",
           {
             fillRule: "evenodd",
@@ -10792,7 +10992,7 @@ function CreatureIcon({
           }
         ),
         showEyes && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "g",
             {
               style: {
@@ -10800,7 +11000,7 @@ function CreatureIcon({
                 transform: isBlinking ? "scaleY(0.1)" : "scaleY(1)",
                 transition: "transform 0.1s ease-out"
               },
-              children: /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ jsx2(
                 "path",
                 {
                   d: "M65.6051 34.48C66.4951 32.97 66.6051 31.3799 65.8451 30.9299C65.0851 30.4899 63.7451 31.3499 62.8551 32.8699C61.9651 34.3799 61.8551 35.97 62.6151 36.42C63.3751 36.86 64.7151 36 65.6051 34.48Z",
@@ -10809,7 +11009,7 @@ function CreatureIcon({
               )
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "g",
             {
               style: {
@@ -10817,7 +11017,7 @@ function CreatureIcon({
                 transform: isBlinking ? "scaleY(0.1)" : "scaleY(1)",
                 transition: "transform 0.1s ease-out"
               },
-              children: /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ jsx2(
                 "path",
                 {
                   d: "M71.7651 37.0999C72.6951 35.1499 72.6551 33.1899 71.6751 32.73C70.6951 32.27 69.1551 33.4799 68.2351 35.4299C67.3051 37.3799 67.3451 39.3399 68.3251 39.7999C69.3051 40.2599 70.8451 39.0499 71.7651 37.0999Z",
@@ -10831,10 +11031,50 @@ function CreatureIcon({
     }
   );
 }
+
+// src/react/experimental.ts
+import { useState as useState4, useEffect as useEffect5, useCallback as useCallback4, useSyncExternalStore as useSyncExternalStore3 } from "react";
+function experimental_useWidgetState() {
+  const client = useHostClient();
+  const state = useSyncExternalStore3(
+    (onStoreChange) => client.subscribe(onStoreChange),
+    () => client.getState().widgetState,
+    () => client.getState().widgetState
+  );
+  const setState = useCallback4(
+    (newState) => {
+      client.experimental.setWidgetState(newState);
+    },
+    [client]
+  );
+  return [state, setState];
+}
+function experimental_useTitle() {
+  const client = useHostClient();
+  const setTitle = useCallback4(
+    (title) => {
+      client.experimental.setTitle(title);
+    },
+    [client]
+  );
+  return setTitle;
+}
+function experimental_useCreatureStyles() {
+  const client = useHostClient();
+  const [styles, setStyles] = useState4(() => client.experimental.getCreatureStyles());
+  useEffect5(() => {
+    const unsub = client.on("theme-change", () => {
+      setStyles(client.experimental.getCreatureStyles());
+    });
+    return unsub;
+  }, [client]);
+  return styles;
+}
 export {
   ChatGptAdapter,
   CreatureAdapter,
   CreatureIcon,
+  HostProvider,
   KNOWN_HOSTS,
   McpAppsAdapter,
   StandaloneAdapter,
@@ -10846,11 +11086,16 @@ export {
   createHostAsync,
   createWebSocket,
   detectEnvironment,
+  experimental_useCreatureStyles,
+  experimental_useTitle,
+  experimental_useWidgetState,
   VU as getDocumentTheme,
   getHostIdentity,
   isHost,
   parseHostUserAgent,
   useHost,
+  useHostClient,
+  useHostClientOptional,
   useToolResult,
   useWebSocket
 };