mcp-use 1.1.6-canary.1 → 1.1.7-canary.0

package/README.md

@@ -587,7 +587,7 @@ server.listen(3000)
 
 This automatically creates:
 
-- **Tool**: `ui_kanban-board` - Accepts parameters and returns UIResource
+- **Tool**: `kanban-board` - Accepts parameters and returns UIResource
 - **Resource**: `ui://widget/kanban-board` - Static access with defaults
 
 #### Three Resource Types

package/dist/{chunk-B5SNLEZM.js → chunk-JV7HAYUT.js}

@@ -691,6 +691,170 @@ function useMcp(options) {
 }
 __name(useMcp, "useMcp");
 
+// src/react/useWidget.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useState as useState2, useSyncExternalStore } from "react";
+
+// src/react/widget-types.ts
+var SET_GLOBALS_EVENT_TYPE = "openai:set_globals";
+
+// src/react/useWidget.ts
+function useOpenAiGlobal(key) {
+  return useSyncExternalStore(
+    (onChange) => {
+      const handleSetGlobal = /* @__PURE__ */ __name((event) => {
+        const customEvent = event;
+        const value = customEvent.detail.globals[key];
+        if (value === void 0) {
+          return;
+        }
+        onChange();
+      }, "handleSetGlobal");
+      if (typeof window !== "undefined") {
+        window.addEventListener(
+          SET_GLOBALS_EVENT_TYPE,
+          handleSetGlobal
+        );
+      }
+      return () => {
+        if (typeof window !== "undefined") {
+          window.removeEventListener(
+            SET_GLOBALS_EVENT_TYPE,
+            handleSetGlobal
+          );
+        }
+      };
+    },
+    () => typeof window !== "undefined" && window.openai ? window.openai[key] : void 0
+  );
+}
+__name(useOpenAiGlobal, "useOpenAiGlobal");
+function useWidget(defaultProps) {
+  console.log(window?.location?.search, window.openai);
+  const isOpenAiAvailable = useMemo(() => typeof window !== "undefined" && !!window.openai, []);
+  const provider = useMemo(() => {
+    return isOpenAiAvailable ? "openai" : "mcp-ui";
+  }, [isOpenAiAvailable]);
+  const urlParams = useMemo(() => {
+    const urlParams2 = new URLSearchParams(window?.location?.search);
+    if (urlParams2.has("mcpUseParams")) {
+      return JSON.parse(urlParams2.get("mcpUseParams"));
+    }
+    return {
+      toolInput: {},
+      toolOutput: {},
+      toolId: ""
+    };
+  }, [window?.location?.search]);
+  console.log(urlParams);
+  const toolInput = provider === "openai" ? useOpenAiGlobal("toolInput") : urlParams.toolInput;
+  const toolOutput = provider === "openai" ? useOpenAiGlobal("toolOutput") : urlParams.toolOutput;
+  const toolResponseMetadata = useOpenAiGlobal("toolResponseMetadata");
+  const widgetState = useOpenAiGlobal("widgetState");
+  const theme = useOpenAiGlobal("theme");
+  const displayMode = useOpenAiGlobal("displayMode");
+  const safeArea = useOpenAiGlobal("safeArea");
+  const maxHeight = useOpenAiGlobal("maxHeight");
+  const userAgent = useOpenAiGlobal("userAgent");
+  const locale = useOpenAiGlobal("locale");
+  const [localWidgetState, setLocalWidgetState] = useState2(null);
+  useEffect2(() => {
+    if (widgetState !== void 0) {
+      setLocalWidgetState(widgetState);
+    }
+  }, [widgetState]);
+  const callTool = useCallback2(
+    async (name, args) => {
+      if (!window.openai?.callTool) {
+        throw new Error("window.openai.callTool is not available");
+      }
+      return window.openai.callTool(name, args);
+    },
+    []
+  );
+  const sendFollowUpMessage = useCallback2(async (prompt) => {
+    if (!window.openai?.sendFollowUpMessage) {
+      throw new Error("window.openai.sendFollowUpMessage is not available");
+    }
+    return window.openai.sendFollowUpMessage({ prompt });
+  }, []);
+  const openExternal = useCallback2((href) => {
+    if (!window.openai?.openExternal) {
+      throw new Error("window.openai.openExternal is not available");
+    }
+    window.openai.openExternal({ href });
+  }, []);
+  const requestDisplayMode = useCallback2(
+    async (mode) => {
+      if (!window.openai?.requestDisplayMode) {
+        throw new Error("window.openai.requestDisplayMode is not available");
+      }
+      return window.openai.requestDisplayMode({ mode });
+    },
+    []
+  );
+  const setState = useCallback2(
+    async (state) => {
+      const newState = typeof state === "function" ? state(localWidgetState) : state;
+      if (!window.openai?.setWidgetState) {
+        throw new Error("window.openai.setWidgetState is not available");
+      }
+      setLocalWidgetState(newState);
+      return window.openai.setWidgetState(newState);
+    },
+    [localWidgetState]
+  );
+  return {
+    // Props and state (with defaults)
+    props: toolInput || defaultProps || {},
+    output: toolOutput ?? null,
+    metadata: toolResponseMetadata ?? null,
+    state: localWidgetState,
+    setState,
+    // Layout and theme (with safe defaults)
+    theme: theme || "light",
+    displayMode: displayMode || "inline",
+    safeArea: safeArea || { insets: { top: 0, bottom: 0, left: 0, right: 0 } },
+    maxHeight: maxHeight || 600,
+    userAgent: userAgent || {
+      device: { type: "desktop" },
+      capabilities: { hover: true, touch: false }
+    },
+    locale: locale || "en",
+    // Actions
+    callTool,
+    sendFollowUpMessage,
+    openExternal,
+    requestDisplayMode,
+    // Availability
+    isAvailable: isOpenAiAvailable
+  };
+}
+__name(useWidget, "useWidget");
+function useWidgetProps(defaultProps) {
+  const { props } = useWidget(defaultProps);
+  return props;
+}
+__name(useWidgetProps, "useWidgetProps");
+function useWidgetTheme() {
+  const { theme } = useWidget();
+  return theme;
+}
+__name(useWidgetTheme, "useWidgetTheme");
+function useWidgetState(defaultState) {
+  const { state, setState } = useWidget();
+  useEffect2(() => {
+    if (state === null && defaultState !== void 0 && window.openai?.setWidgetState) {
+      setState(defaultState);
+    }
+  }, []);
+  return [state, setState];
+}
+__name(useWidgetState, "useWidgetState");
+
 export {
-  useMcp
+  useMcp,
+  useWidget,
+  useWidgetProps,
+  useWidgetTheme,
+  useWidgetState
 };

package/dist/index.cjs

@@ -504,7 +504,11 @@ __export(index_exports, {
   setTelemetrySource: () => setTelemetrySource,
   streamEventsToAISDK: () => streamEventsToAISDK,
   streamEventsToAISDKWithTools: () => streamEventsToAISDKWithTools,
-  useMcp: () => useMcp
+  useMcp: () => useMcp,
+  useWidget: () => useWidget,
+  useWidgetProps: () => useWidgetProps,
+  useWidgetState: () => useWidgetState,
+  useWidgetTheme: () => useWidgetTheme
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -5402,6 +5406,166 @@ function useMcp(options) {
 }
 __name(useMcp, "useMcp");
 
+// src/react/useWidget.ts
+var import_react2 = require("react");
+
+// src/react/widget-types.ts
+var SET_GLOBALS_EVENT_TYPE = "openai:set_globals";
+
+// src/react/useWidget.ts
+function useOpenAiGlobal(key) {
+  return (0, import_react2.useSyncExternalStore)(
+    (onChange) => {
+      const handleSetGlobal = /* @__PURE__ */ __name((event) => {
+        const customEvent = event;
+        const value = customEvent.detail.globals[key];
+        if (value === void 0) {
+          return;
+        }
+        onChange();
+      }, "handleSetGlobal");
+      if (typeof window !== "undefined") {
+        window.addEventListener(
+          SET_GLOBALS_EVENT_TYPE,
+          handleSetGlobal
+        );
+      }
+      return () => {
+        if (typeof window !== "undefined") {
+          window.removeEventListener(
+            SET_GLOBALS_EVENT_TYPE,
+            handleSetGlobal
+          );
+        }
+      };
+    },
+    () => typeof window !== "undefined" && window.openai ? window.openai[key] : void 0
+  );
+}
+__name(useOpenAiGlobal, "useOpenAiGlobal");
+function useWidget(defaultProps) {
+  console.log(window?.location?.search, window.openai);
+  const isOpenAiAvailable = (0, import_react2.useMemo)(() => typeof window !== "undefined" && !!window.openai, []);
+  const provider = (0, import_react2.useMemo)(() => {
+    return isOpenAiAvailable ? "openai" : "mcp-ui";
+  }, [isOpenAiAvailable]);
+  const urlParams = (0, import_react2.useMemo)(() => {
+    const urlParams2 = new URLSearchParams(window?.location?.search);
+    if (urlParams2.has("mcpUseParams")) {
+      return JSON.parse(urlParams2.get("mcpUseParams"));
+    }
+    return {
+      toolInput: {},
+      toolOutput: {},
+      toolId: ""
+    };
+  }, [window?.location?.search]);
+  console.log(urlParams);
+  const toolInput = provider === "openai" ? useOpenAiGlobal("toolInput") : urlParams.toolInput;
+  const toolOutput = provider === "openai" ? useOpenAiGlobal("toolOutput") : urlParams.toolOutput;
+  const toolResponseMetadata = useOpenAiGlobal("toolResponseMetadata");
+  const widgetState = useOpenAiGlobal("widgetState");
+  const theme = useOpenAiGlobal("theme");
+  const displayMode = useOpenAiGlobal("displayMode");
+  const safeArea = useOpenAiGlobal("safeArea");
+  const maxHeight = useOpenAiGlobal("maxHeight");
+  const userAgent = useOpenAiGlobal("userAgent");
+  const locale = useOpenAiGlobal("locale");
+  const [localWidgetState, setLocalWidgetState] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
+    if (widgetState !== void 0) {
+      setLocalWidgetState(widgetState);
+    }
+  }, [widgetState]);
+  const callTool = (0, import_react2.useCallback)(
+    async (name, args) => {
+      if (!window.openai?.callTool) {
+        throw new Error("window.openai.callTool is not available");
+      }
+      return window.openai.callTool(name, args);
+    },
+    []
+  );
+  const sendFollowUpMessage = (0, import_react2.useCallback)(async (prompt) => {
+    if (!window.openai?.sendFollowUpMessage) {
+      throw new Error("window.openai.sendFollowUpMessage is not available");
+    }
+    return window.openai.sendFollowUpMessage({ prompt });
+  }, []);
+  const openExternal = (0, import_react2.useCallback)((href) => {
+    if (!window.openai?.openExternal) {
+      throw new Error("window.openai.openExternal is not available");
+    }
+    window.openai.openExternal({ href });
+  }, []);
+  const requestDisplayMode = (0, import_react2.useCallback)(
+    async (mode) => {
+      if (!window.openai?.requestDisplayMode) {
+        throw new Error("window.openai.requestDisplayMode is not available");
+      }
+      return window.openai.requestDisplayMode({ mode });
+    },
+    []
+  );
+  const setState = (0, import_react2.useCallback)(
+    async (state) => {
+      const newState = typeof state === "function" ? state(localWidgetState) : state;
+      if (!window.openai?.setWidgetState) {
+        throw new Error("window.openai.setWidgetState is not available");
+      }
+      setLocalWidgetState(newState);
+      return window.openai.setWidgetState(newState);
+    },
+    [localWidgetState]
+  );
+  return {
+    // Props and state (with defaults)
+    props: toolInput || defaultProps || {},
+    output: toolOutput ?? null,
+    metadata: toolResponseMetadata ?? null,
+    state: localWidgetState,
+    setState,
+    // Layout and theme (with safe defaults)
+    theme: theme || "light",
+    displayMode: displayMode || "inline",
+    safeArea: safeArea || { insets: { top: 0, bottom: 0, left: 0, right: 0 } },
+    maxHeight: maxHeight || 600,
+    userAgent: userAgent || {
+      device: { type: "desktop" },
+      capabilities: { hover: true, touch: false }
+    },
+    locale: locale || "en",
+    // Actions
+    callTool,
+    sendFollowUpMessage,
+    openExternal,
+    requestDisplayMode,
+    // Availability
+    isAvailable: isOpenAiAvailable
+  };
+}
+__name(useWidget, "useWidget");
+function useWidgetProps(defaultProps) {
+  const { props } = useWidget(defaultProps);
+  return props;
+}
+__name(useWidgetProps, "useWidgetProps");
+function useWidgetTheme() {
+  const { theme } = useWidget();
+  return theme;
+}
+__name(useWidgetTheme, "useWidgetTheme");
+function useWidgetState(defaultState) {
+  const { state, setState } = useWidget();
+  (0, import_react2.useEffect)(() => {
+    if (state === null && defaultState !== void 0 && window.openai?.setWidgetState) {
+      setState(defaultState);
+    }
+  }, []);
+  return [state, setState];
+}
+__name(useWidgetState, "useWidgetState");
+
 // index.ts
 var import_messages3 = require("@langchain/core/messages");
 // Annotate the CommonJS export names for ESM import in node:
@@ -5441,5 +5605,9 @@ var import_messages3 = require("@langchain/core/messages");
   setTelemetrySource,
   streamEventsToAISDK,
   streamEventsToAISDKWithTools,
-  useMcp
+  useMcp,
+  useWidget,
+  useWidgetProps,
+  useWidgetState,
+  useWidgetTheme
 });

package/dist/index.js

@@ -23,8 +23,12 @@ import {
   streamEventsToAISDKWithTools
 } from "./chunk-4SWVHFJH.js";
 import {
-  useMcp
-} from "./chunk-B5SNLEZM.js";
+  useMcp,
+  useWidget,
+  useWidgetProps,
+  useWidgetState,
+  useWidgetTheme
+} from "./chunk-JV7HAYUT.js";
 import {
   BrowserOAuthClientProvider,
   onMcpAuthorization
@@ -640,5 +644,9 @@ export {
   setTelemetrySource,
   streamEventsToAISDK,
   streamEventsToAISDKWithTools,
-  useMcp
+  useMcp,
+  useWidget,
+  useWidgetProps,
+  useWidgetState,
+  useWidgetTheme
 };

package/dist/src/react/index.cjs

@@ -22,7 +22,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var react_exports = {};
 __export(react_exports, {
   onMcpAuthorization: () => onMcpAuthorization,
-  useMcp: () => useMcp
+  useMcp: () => useMcp,
+  useWidget: () => useWidget,
+  useWidgetProps: () => useWidgetProps,
+  useWidgetState: () => useWidgetState,
+  useWidgetTheme: () => useWidgetTheme
 });
 module.exports = __toCommonJS(react_exports);
 
@@ -996,8 +1000,172 @@ async function onMcpAuthorization() {
   }
 }
 __name(onMcpAuthorization, "onMcpAuthorization");
+
+// src/react/useWidget.ts
+var import_react2 = require("react");
+
+// src/react/widget-types.ts
+var SET_GLOBALS_EVENT_TYPE = "openai:set_globals";
+
+// src/react/useWidget.ts
+function useOpenAiGlobal(key) {
+  return (0, import_react2.useSyncExternalStore)(
+    (onChange) => {
+      const handleSetGlobal = /* @__PURE__ */ __name((event) => {
+        const customEvent = event;
+        const value = customEvent.detail.globals[key];
+        if (value === void 0) {
+          return;
+        }
+        onChange();
+      }, "handleSetGlobal");
+      if (typeof window !== "undefined") {
+        window.addEventListener(
+          SET_GLOBALS_EVENT_TYPE,
+          handleSetGlobal
+        );
+      }
+      return () => {
+        if (typeof window !== "undefined") {
+          window.removeEventListener(
+            SET_GLOBALS_EVENT_TYPE,
+            handleSetGlobal
+          );
+        }
+      };
+    },
+    () => typeof window !== "undefined" && window.openai ? window.openai[key] : void 0
+  );
+}
+__name(useOpenAiGlobal, "useOpenAiGlobal");
+function useWidget(defaultProps) {
+  console.log(window?.location?.search, window.openai);
+  const isOpenAiAvailable = (0, import_react2.useMemo)(() => typeof window !== "undefined" && !!window.openai, []);
+  const provider = (0, import_react2.useMemo)(() => {
+    return isOpenAiAvailable ? "openai" : "mcp-ui";
+  }, [isOpenAiAvailable]);
+  const urlParams = (0, import_react2.useMemo)(() => {
+    const urlParams2 = new URLSearchParams(window?.location?.search);
+    if (urlParams2.has("mcpUseParams")) {
+      return JSON.parse(urlParams2.get("mcpUseParams"));
+    }
+    return {
+      toolInput: {},
+      toolOutput: {},
+      toolId: ""
+    };
+  }, [window?.location?.search]);
+  console.log(urlParams);
+  const toolInput = provider === "openai" ? useOpenAiGlobal("toolInput") : urlParams.toolInput;
+  const toolOutput = provider === "openai" ? useOpenAiGlobal("toolOutput") : urlParams.toolOutput;
+  const toolResponseMetadata = useOpenAiGlobal("toolResponseMetadata");
+  const widgetState = useOpenAiGlobal("widgetState");
+  const theme = useOpenAiGlobal("theme");
+  const displayMode = useOpenAiGlobal("displayMode");
+  const safeArea = useOpenAiGlobal("safeArea");
+  const maxHeight = useOpenAiGlobal("maxHeight");
+  const userAgent = useOpenAiGlobal("userAgent");
+  const locale = useOpenAiGlobal("locale");
+  const [localWidgetState, setLocalWidgetState] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
+    if (widgetState !== void 0) {
+      setLocalWidgetState(widgetState);
+    }
+  }, [widgetState]);
+  const callTool = (0, import_react2.useCallback)(
+    async (name, args) => {
+      if (!window.openai?.callTool) {
+        throw new Error("window.openai.callTool is not available");
+      }
+      return window.openai.callTool(name, args);
+    },
+    []
+  );
+  const sendFollowUpMessage = (0, import_react2.useCallback)(async (prompt) => {
+    if (!window.openai?.sendFollowUpMessage) {
+      throw new Error("window.openai.sendFollowUpMessage is not available");
+    }
+    return window.openai.sendFollowUpMessage({ prompt });
+  }, []);
+  const openExternal = (0, import_react2.useCallback)((href) => {
+    if (!window.openai?.openExternal) {
+      throw new Error("window.openai.openExternal is not available");
+    }
+    window.openai.openExternal({ href });
+  }, []);
+  const requestDisplayMode = (0, import_react2.useCallback)(
+    async (mode) => {
+      if (!window.openai?.requestDisplayMode) {
+        throw new Error("window.openai.requestDisplayMode is not available");
+      }
+      return window.openai.requestDisplayMode({ mode });
+    },
+    []
+  );
+  const setState = (0, import_react2.useCallback)(
+    async (state) => {
+      const newState = typeof state === "function" ? state(localWidgetState) : state;
+      if (!window.openai?.setWidgetState) {
+        throw new Error("window.openai.setWidgetState is not available");
+      }
+      setLocalWidgetState(newState);
+      return window.openai.setWidgetState(newState);
+    },
+    [localWidgetState]
+  );
+  return {
+    // Props and state (with defaults)
+    props: toolInput || defaultProps || {},
+    output: toolOutput ?? null,
+    metadata: toolResponseMetadata ?? null,
+    state: localWidgetState,
+    setState,
+    // Layout and theme (with safe defaults)
+    theme: theme || "light",
+    displayMode: displayMode || "inline",
+    safeArea: safeArea || { insets: { top: 0, bottom: 0, left: 0, right: 0 } },
+    maxHeight: maxHeight || 600,
+    userAgent: userAgent || {
+      device: { type: "desktop" },
+      capabilities: { hover: true, touch: false }
+    },
+    locale: locale || "en",
+    // Actions
+    callTool,
+    sendFollowUpMessage,
+    openExternal,
+    requestDisplayMode,
+    // Availability
+    isAvailable: isOpenAiAvailable
+  };
+}
+__name(useWidget, "useWidget");
+function useWidgetProps(defaultProps) {
+  const { props } = useWidget(defaultProps);
+  return props;
+}
+__name(useWidgetProps, "useWidgetProps");
+function useWidgetTheme() {
+  const { theme } = useWidget();
+  return theme;
+}
+__name(useWidgetTheme, "useWidgetTheme");
+function useWidgetState(defaultState) {
+  const { state, setState } = useWidget();
+  (0, import_react2.useEffect)(() => {
+    if (state === null && defaultState !== void 0 && window.openai?.setWidgetState) {
+      setState(defaultState);
+    }
+  }, []);
+  return [state, setState];
+}
+__name(useWidgetState, "useWidgetState");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   onMcpAuthorization,
-  useMcp
+  useMcp,
+  useWidget,
+  useWidgetProps,
+  useWidgetState,
+  useWidgetTheme
 });

package/dist/src/react/index.d.ts

@@ -6,4 +6,6 @@ export { useMcp } from './useMcp.js';
 export type { UseMcpOptions, UseMcpResult } from './types.js';
 export { onMcpAuthorization } from '../auth/callback.js';
 export type { Tool, Resource, ResourceTemplate, Prompt } from '@modelcontextprotocol/sdk/types.js';
+export { useWidget, useWidgetProps, useWidgetTheme, useWidgetState } from './useWidget.js';
+export type { UseWidgetResult, OpenAiGlobals, API, Theme, DisplayMode, DeviceType, SafeArea, SafeAreaInsets, UserAgent, CallToolResponse, UnknownObject, } from './widget-types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AACpC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAG7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAGxD,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AACpC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAG7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAGxD,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAA;AAGlG,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC1F,YAAY,EACV,eAAe,EACf,aAAa,EACb,GAAG,EACH,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAQ,EACR,cAAc,EACd,SAAS,EACT,gBAAgB,EAChB,aAAa,GACd,MAAM,mBAAmB,CAAA"}

package/dist/src/react/index.js

@@ -1,11 +1,19 @@
 import {
-  useMcp
-} from "../../chunk-B5SNLEZM.js";
+  useMcp,
+  useWidget,
+  useWidgetProps,
+  useWidgetState,
+  useWidgetTheme
+} from "../../chunk-JV7HAYUT.js";
 import {
   onMcpAuthorization
 } from "../../chunk-62GFHYCL.js";
 import "../../chunk-SHUYVCID.js";
 export {
   onMcpAuthorization,
-  useMcp
+  useMcp,
+  useWidget,
+  useWidgetProps,
+  useWidgetState,
+  useWidgetTheme
 };

package/dist/src/react/useWidget.d.ts

@@ -0,0 +1,54 @@
+/**
+ * React hook for OpenAI Apps SDK widget development
+ * Wraps window.openai API and adapts MCP UI props to toolInput
+ */
+import type { Theme, UnknownObject, UseWidgetResult } from './widget-types.js';
+/**
+ * React hook for building OpenAI Apps SDK widgets with MCP-use
+ *
+ * Provides type-safe access to the window.openai API and automatically
+ * maps MCP UI props to the Apps SDK toolInput format.
+ *
+ * @example
+ * ```tsx
+ * const MyWidget: React.FC = () => {
+ *   const { props, theme, callTool, sendFollowUpMessage } = useWidget<{
+ *     city: string;
+ *     temperature: number;
+ *   }>();
+ *
+ *   return (
+ *     <div data-theme={theme}>
+ *       <h1>{props.city}</h1>
+ *       <p>{props.temperature}°C</p>
+ *     </div>
+ *   );
+ * };
+ * ```
+ */
+export declare function useWidget<TProps extends UnknownObject = UnknownObject, TOutput extends UnknownObject = UnknownObject, TMetadata extends UnknownObject = UnknownObject, TState extends UnknownObject = UnknownObject>(defaultProps?: TProps): UseWidgetResult<TProps, TOutput, TMetadata, TState>;
+/**
+ * Hook to get just the widget props (most common use case)
+ * @example
+ * ```tsx
+ * const props = useWidgetProps<{ city: string; temperature: number }>();
+ * ```
+ */
+export declare function useWidgetProps<TProps extends UnknownObject = UnknownObject>(defaultProps?: TProps): TProps;
+/**
+ * Hook to get theme value
+ * @example
+ * ```tsx
+ * const theme = useWidgetTheme();
+ * ```
+ */
+export declare function useWidgetTheme(): Theme;
+/**
+ * Hook to get and update widget state
+ * @example
+ * ```tsx
+ * const [favorites, setFavorites] = useWidgetState<string[]>([]);
+ * ```
+ */
+export declare function useWidgetState<TState extends UnknownObject>(defaultState?: TState): readonly [TState | null, (state: TState | ((prev: TState | null) => TState)) => Promise<void>];
+//# sourceMappingURL=useWidget.d.ts.map

package/dist/src/react/useWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWidget.d.ts","sourceRoot":"","sources":["../../../src/react/useWidget.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAKV,KAAK,EACL,aAAa,EAEb,eAAe,EAChB,MAAM,mBAAmB,CAAA;AAyC1B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,SAAS,CACvB,MAAM,SAAS,aAAa,GAAG,aAAa,EAC5C,OAAO,SAAS,aAAa,GAAG,aAAa,EAC7C,SAAS,SAAS,aAAa,GAAG,aAAa,EAC/C,MAAM,SAAS,aAAa,GAAG,aAAa,EAC5C,YAAY,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,CAmI5E;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,MAAM,SAAS,aAAa,GAAG,aAAa,EACzE,YAAY,CAAC,EAAE,MAAM,GACpB,MAAM,CAGR;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,IAAI,KAAK,CAGtC;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,MAAM,SAAS,aAAa,EACzD,YAAY,CAAC,EAAE,MAAM,GACpB,SAAS,CAAC,MAAM,GAAG,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,MAAM,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,CAWhG"}