mcp-use 1.5.0-canary.0 → 1.5.0-canary.1

package/dist/index.js

@@ -24,14 +24,17 @@ import {
   PROMPTS
 } from "./chunk-WERYJ6PF.js";
 import {
-  WidgetDebugger,
-  WidgetFullscreenWrapper,
+  ErrorBoundary,
+  Image,
+  McpUseProvider,
+  ThemeProvider,
+  WidgetControls,
   useMcp,
   useWidget,
   useWidgetProps,
   useWidgetState,
   useWidgetTheme
-} from "./chunk-RE7EYFDV.js";
+} from "./chunk-5XVM4A23.js";
 import {
   BaseMCPClient,
   BrowserOAuthClientProvider,
@@ -1440,7 +1443,9 @@ export {
   BrowserOAuthClientProvider,
   ConnectMCPServerTool,
   E2BCodeExecutor,
+  ErrorBoundary,
   HttpConnector,
+  Image,
   LINEAR_OAUTH_CONFIG,
   LangChainAdapter,
   ListMCPServersTool,
@@ -1448,6 +1453,7 @@ export {
   MCPAgent,
   MCPClient,
   MCPSession,
+  McpUseProvider,
   OAuthHelper,
   ObservabilityManager,
   PROMPTS,
@@ -1456,10 +1462,10 @@ export {
   ServerManager,
   StdioConnector,
   Telemetry,
+  ThemeProvider,
   VMCodeExecutor,
   WebSocketConnector,
-  WidgetDebugger,
-  WidgetFullscreenWrapper,
+  WidgetControls,
   createOAuthMCPConfig,
   createReadableStreamFromGenerator,
   isVMAvailable,

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

@@ -0,0 +1,24 @@
+import React from "react";
+/**
+ * ErrorBoundary that catches React errors and displays a friendly error message
+ *
+ * This component catches JavaScript errors anywhere in the child component tree,
+ * logs those errors, and displays a fallback UI instead of crashing the entire app.
+ */
+export declare class ErrorBoundary extends React.Component<{
+    children: React.ReactNode;
+}, {
+    hasError: boolean;
+    error: Error | null;
+}> {
+    constructor(props: {
+        children: React.ReactNode;
+    });
+    static getDerivedStateFromError(error: Error): {
+        hasError: boolean;
+        error: Error;
+    };
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+}
+//# sourceMappingURL=ErrorBoundary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/react/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;GAKG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,SAAS,CAChD;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,EAC7B;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;CAAE,CAC3C;gBACa,KAAK,EAAE;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;IAKhD,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK;;;;IAI5C,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS;IAI1D,MAAM;CAcP"}

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

@@ -0,0 +1,11 @@
+import React from "react";
+/**
+ * Image component that automatically handles absolute paths using the MCP public URL.
+ *
+ * If the src starts with /, it will be prefixed with the MCP public URL (e.g. http://localhost:3000/mcp-use/public).
+ * If the src is already absolute (starts with http or data:), it will be used as is.
+ *
+ * @param props Standard img props
+ */
+export declare const Image: React.FC<React.ImgHTMLAttributes<globalThis.HTMLImageElement>>;
+//# sourceMappingURL=Image.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/react/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAC1B,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAqCrD,CAAC"}

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

@@ -0,0 +1,46 @@
+import React from "react";
+interface McpUseProviderProps {
+    children: React.ReactNode;
+    /**
+     * Enable debug button in WidgetControls component
+     * @default false
+     */
+    debugger?: boolean;
+    /**
+     * Enable view controls (fullscreen/pip) in WidgetControls component
+     * - `true` = show both pip and fullscreen buttons
+     * - `"pip"` = show only pip button
+     * - `"fullscreen"` = show only fullscreen button
+     * @default false
+     */
+    viewControls?: boolean | "pip" | "fullscreen";
+    /**
+     * Automatically notify OpenAI about container height changes for auto-sizing
+     * Uses ResizeObserver to monitor the children container and calls window.openai.notifyIntrinsicHeight()
+     * @default false
+     */
+    autoSize?: boolean;
+}
+/**
+ * Unified provider component that combines all common React setup for mcp-use widgets.
+ *
+ * Includes:
+ * - StrictMode (always)
+ * - ThemeProvider (always)
+ * - BrowserRouter with automatic basename calculation (always)
+ * - WidgetControls (if debugger={true} or viewControls is set)
+ * - ErrorBoundary (always)
+ * - Auto-sizing (if autoSize={true})
+ *
+ * @example
+ * ```tsx
+ * <McpUseProvider debugger viewControls autoSize>
+ *   <AppsSDKUIProvider linkComponent={Link}>
+ *     <div>My widget content</div>
+ *   </AppsSDKUIProvider>
+ * </McpUseProvider>
+ * ```
+ */
+export declare function McpUseProvider({ children, debugger: enableDebugger, viewControls, autoSize, }: McpUseProviderProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=McpUseProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"McpUseProvider.d.ts","sourceRoot":"","sources":["../../../src/react/McpUseProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAwB1E,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,YAAY,CAAC;IAC9C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,EAAE,cAAsB,EAChC,YAAoB,EACpB,QAAgB,GACjB,EAAE,mBAAmB,qBAkIrB"}

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

@@ -0,0 +1,14 @@
+import React from "react";
+/**
+ * ThemeProvider that manages dark mode class on document root
+ *
+ * Priority:
+ * 1. useWidget theme (from OpenAI Apps SDK)
+ * 2. System preference (prefers-color-scheme: dark)
+ *
+ * Sets the "dark" class on document.documentElement when dark mode is active
+ */
+export declare const ThemeProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=ThemeProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/react/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAGpE;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CA4CjE,CAAC"}

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

@@ -0,0 +1,44 @@
+/**
+ * Wrapper component that adds control buttons for widget debugging and view controls.
+ * Combines debug button and view controls (fullscreen/pip) with shared hover logic.
+ */
+import React from "react";
+type Position = "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right";
+interface WidgetControlsProps {
+    children: React.ReactNode;
+    className?: string;
+    position?: Position;
+    attachTo?: HTMLElement | null;
+    showLabels?: boolean;
+    /**
+     * Enable debug button to display widget debug information
+     * @default false
+     */
+    debugger?: boolean;
+    /**
+     * Enable fullscreen and pip view controls
+     * - `true` = show both pip and fullscreen buttons
+     * - `"pip"` = show only pip button
+     * - `"fullscreen"` = show only fullscreen button
+     * @default false
+     */
+    viewControls?: boolean | "pip" | "fullscreen";
+}
+/**
+ * Wrapper component that adds control buttons for widget debugging and view controls.
+ * All buttons share the same hover logic and are rendered together.
+ *
+ * @example
+ * ```tsx
+ * const MyWidget: React.FC = () => {
+ *   return (
+ *     <WidgetControls debugger viewControls position="top-right">
+ *       <div>My widget content</div>
+ *     </WidgetControls>
+ *   );
+ * };
+ * ```
+ */
+export declare function WidgetControls({ children, className, position, attachTo, showLabels, debugger: enableDebugger, viewControls, }: WidgetControlsProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=WidgetControls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetControls.d.ts","sourceRoot":"","sources":["../../../src/react/WidgetControls.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,KAAK,QAAQ,GACT,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,cAAc,GACd,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,YAAY,CAAC;CAC/C;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAc,EACd,QAAsB,EACtB,QAAQ,EACR,UAAiB,EACjB,QAAQ,EAAE,cAAsB,EAChC,YAAoB,GACrB,EAAE,mBAAmB,qBAmrBrB"}