mcp-app-studio 0.5.1 → 0.6.0

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import { Platform, ExtendedBridge, ToolResult, HostCapabilities, DisplayMode, FeatureKey, HostContext, ContentBlock } from './core/index.js';
-export { AudioContentBlock, CHATGPT_CAPABILITIES, ChatMessage, ContainerDimensions, ContentBlockAnnotations, ContentBlockIcon, HostBridge, HostContextChangedCallback, HostStyles, ImageContentBlock, MCP_CAPABILITIES, ResourceContentBlock, ResourceLinkContentBlock, TeardownCallback, TextContentBlock, Theme, ToolCancelledCallback, ToolInputCallback, ToolInputPartialCallback, ToolResultCallback, hasFeature, imageBlock, textBlock } from './core/index.js';
+export { AudioContentBlock, ChatMessage, ContainerDimensions, ContentBlockAnnotations, ContentBlockIcon, HostBridge, HostContextChangedCallback, HostStyles, ImageContentBlock, MCP_CAPABILITIES, ResourceContentBlock, ResourceLinkContentBlock, TeardownCallback, TextContentBlock, Theme, ToolCancelledCallback, ToolInputCallback, ToolInputPartialCallback, ToolResultCallback, hasFeature, imageBlock, textBlock } from './core/index.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { A as AppCapabilities } from './bridge-BXW_-p2R.js';
+import { A as AppCapabilities } from './bridge-BKLezf-H.js';
 import '@modelcontextprotocol/ext-apps';
 
 /**
@@ -39,17 +39,18 @@ declare function detectPlatformDetailed(): DetectionResult;
 /**
  * Detects the current platform the widget is running on.
  *
- * Detection priority:
- * 1. `window.openai` exists → ChatGPT
- * 2. URL has `?mcp-host` param → MCP
- * 3. `window.__MCP_HOST__` exists → MCP
- * 4. iframe has `data-mcp-host` attribute → MCP
- * 5. None of the above → unknown
+ * Host detection:
+ * - URL has `?mcp-host` param → MCP
+ * - `window.__MCP_HOST__` exists → MCP
+ * - iframe has `data-mcp-host` attribute → MCP
+ * - None of the above → unknown
+ *
+ * Note: `window.openai` is a ChatGPT-only *extensions* layer, not the MCP host protocol.
  *
  * **Debugging tip:** Set `window.__MCP_APP_STUDIO_DEBUG__ = true` before
  * loading your widget to see detailed detection logs in the console.
  *
- * @returns The detected platform: "chatgpt", "mcp", or "unknown"
+ * @returns The detected platform: "mcp" or "unknown"
  *
  * @example
  * ```ts
@@ -61,16 +62,16 @@ declare function detectPlatformDetailed(): DetectionResult;
  */
 declare function detectPlatform(): Platform;
 /**
- * Returns true if running inside ChatGPT.
+ * Returns true if ChatGPT-only extensions are available (`window.openai`).
  *
  * @example
  * ```ts
- * if (isChatGPT()) {
- *   // Use ChatGPT-specific features
+ * if (hasChatGPTExtensions()) {
+ *   // Use ChatGPT-only extensions (e.g. widgetState, file upload)
  * }
  * ```
  */
-declare function isChatGPT(): boolean;
+declare function hasChatGPTExtensions(): boolean;
 /**
  * Returns true if running inside an MCP host (e.g., Claude Desktop).
  *
@@ -209,10 +210,10 @@ declare function useCapabilities(): HostCapabilities | null;
  */
 declare function useToolInput<T = Record<string, unknown>>(): T | null;
 /**
- * Returns partial tool input as it's being streamed (MCP only).
+ * Returns partial tool input as it's being streamed (host-dependent).
  * Useful for showing real-time feedback as the user types.
  *
- * **Platform support:** MCP only. Returns null on ChatGPT.
+ * **Host support:** MCP Apps hosts that stream partial input. Returns null otherwise.
  *
  * @typeParam T - The expected shape of the tool input
  * @returns Partial tool input, or null
@@ -370,26 +371,19 @@ declare function useOpenLink(): (url: string) => Promise<void>;
  */
 declare function useSendMessage(): (text: string) => Promise<void>;
 /**
- * Returns a function to update the model's context (MCP only).
+ * Returns a function to update the model-visible context.
  * Use this to provide additional context to the AI model.
  *
- * **Platform support:** MCP only. Logs a warning on ChatGPT.
- *
  * @returns Async function to update model context
  *
  * @example
  * ```tsx
  * function DataViewer({ data }: { data: object }) {
  *   const updateContext = useUpdateModelContext();
- *   const platform = usePlatform();
  *
  *   useEffect(() => {
- *     if (platform === 'mcp') {
- *       updateContext({
- *         structuredContent: { currentData: data }
- *       });
- *     }
- *   }, [data, platform, updateContext]);
+ *     updateContext({ structuredContent: { currentData: data } });
+ *   }, [data, updateContext]);
  *
  *   return <pre>{JSON.stringify(data, null, 2)}</pre>;
  * }
@@ -400,10 +394,9 @@ declare function useUpdateModelContext(): (ctx: {
     structuredContent?: Record<string, unknown>;
 }) => Promise<void>;
 /**
- * Returns persisted widget state and a setter (ChatGPT only).
+ * Returns persisted widget state and a setter (ChatGPT extensions only).
  * State is preserved across page refreshes and conversation turns.
- *
- * **Platform support:** ChatGPT only. Logs a warning on MCP.
+ * Requires `window.openai` (feature-detected by the SDK).
  *
  * @typeParam T - The shape of your widget state
  * @returns Tuple of [state, setState]
@@ -438,10 +431,8 @@ declare function useWidgetState<T = Record<string, unknown>>(): [
     (state: T | null) => void
 ];
 /**
- * Returns a function for structured logging (MCP only).
- * Logs are sent to the MCP host for debugging and monitoring.
- *
- * **Platform support:** MCP only. Falls back to console.log on other platforms.
+ * Returns a function for structured logging when the current host supports it.
+ * Falls back to `console.log` otherwise.
  *
  * @returns Log function that accepts level and message
  *
@@ -505,4 +496,94 @@ declare function useLog(): (level: "debug" | "info" | "warning" | "error", data:
  */
 declare function useFeature(feature: FeatureKey): boolean;
 
-export { ContentBlock, type DetectionResult, DisplayMode, ExtendedBridge, FeatureKey, HostCapabilities, HostContext, Platform, ToolResult, UniversalProvider, type UniversalProviderProps, detectPlatform, detectPlatformDetailed, disableDebugMode, enableDebugMode, isChatGPT, isMCP, useCallTool, useCapabilities, useDisplayMode, useFeature, useHostContext, useLog, useOpenLink, usePlatform, useSendMessage, useTheme, useToolInput, useToolInputPartial, useToolResult, useUniversalBridge, useUpdateModelContext, useWidgetState };
+/**
+ * ChatGPT-only extensions.
+ *
+ * ChatGPT is an MCP Apps host (standard `ui/*` bridge). It may also expose
+ * optional extras via `window.openai` (widget state, file APIs, host modals…).
+ *
+ * This module intentionally treats `window.openai` as an *optional* layer:
+ * - Never required for MCP Apps interoperability
+ * - Always feature-detected before use
+ */
+type ChatGPTExtensions = {
+    theme?: "light" | "dark";
+    locale?: string;
+    displayMode?: "pip" | "inline" | "fullscreen";
+    previousDisplayMode?: "pip" | "inline" | "fullscreen" | null;
+    maxHeight?: number;
+    safeArea?: {
+        insets: {
+            top: number;
+            bottom: number;
+            left: number;
+            right: number;
+        };
+    };
+    userAgent?: Record<string, unknown>;
+    view?: {
+        mode: "modal" | "inline";
+        params: Record<string, unknown> | null;
+    } | null;
+    userLocation?: Record<string, unknown> | null;
+    toolInput?: Record<string, unknown>;
+    toolOutput?: Record<string, unknown> | null;
+    toolResponseMetadata?: Record<string, unknown> | null;
+    widgetState?: Record<string, unknown> | null;
+    setWidgetState?: (state: Record<string, unknown> | null) => void;
+    callTool?: (name: string, args: Record<string, unknown>) => Promise<unknown>;
+    sendFollowUpMessage?: (args: {
+        prompt: string;
+    }) => Promise<void>;
+    openExternal?: (payload: {
+        href: string;
+    }) => void;
+    notifyIntrinsicHeight?: (height: number) => void;
+    requestDisplayMode?: (args: {
+        mode: string;
+    }) => Promise<{
+        mode: string;
+    }>;
+    uploadFile?: (file: File) => Promise<{
+        fileId: string;
+    }>;
+    getFileDownloadUrl?: (args: {
+        fileId: string;
+    }) => Promise<{
+        downloadUrl: string;
+    }>;
+    setOpenInAppUrl?: (args: {
+        href: string;
+    }) => void;
+    requestCheckout?: (...args: unknown[]) => unknown;
+    requestClose?: () => void;
+    requestModal?: (options: Record<string, unknown>) => Promise<void>;
+};
+/**
+ * Wraps an MCP-first bridge with ChatGPT-only extensions when `window.openai`
+ * exists.
+ *
+ * Note: this function mutates `bridge` in-place so class instances preserve
+ * prototype methods.
+ *
+ * The returned bridge:
+ * - Delegates all MCP behavior to `bridge`
+ * - Adds ChatGPT-only helpers (widget state, file APIs, modals) when available
+ *
+ * @param bridge - Base MCP bridge to extend.
+ * @returns The same `bridge` instance with ChatGPT-only extensions attached
+ * when available.
+ */
+declare function withChatGPTExtensions(bridge: ExtendedBridge): ExtendedBridge;
+declare global {
+    interface Window {
+        /**
+         * ChatGPT-only extension layer. Optional.
+         *
+         * Prefer using the MCP Apps bridge (`ui/*`) for core functionality.
+         */
+        openai?: ChatGPTExtensions;
+    }
+}
+
+export { type ChatGPTExtensions, ContentBlock, type DetectionResult, DisplayMode, ExtendedBridge, FeatureKey, HostCapabilities, HostContext, Platform, ToolResult, UniversalProvider, type UniversalProviderProps, detectPlatform, detectPlatformDetailed, disableDebugMode, enableDebugMode, hasChatGPTExtensions, isMCP, useCallTool, useCapabilities, useDisplayMode, useFeature, useHostContext, useLog, useOpenLink, usePlatform, useSendMessage, useTheme, useToolInput, useToolInputPartial, useToolResult, useUniversalBridge, useUpdateModelContext, useWidgetState, withChatGPTExtensions };

package/dist/index.js

@@ -2,17 +2,13 @@ import {
   imageBlock,
   textBlock
 } from "./chunk-KRCGOYZ5.js";
-import {
-  ChatGPTBridge
-} from "./chunk-EPZCYA26.js";
 import {
   MCPBridge
-} from "./chunk-2OPSDEPI.js";
+} from "./chunk-IEZAKOIG.js";
 import {
-  CHATGPT_CAPABILITIES,
   MCP_CAPABILITIES,
   hasFeature
-} from "./chunk-4LAH4JH6.js";
+} from "./chunk-QNH5NSRH.js";
 
 // src/universal/detect.ts
 var MCP_MARKERS = {
@@ -42,8 +38,7 @@ function detectPlatformDetailed() {
   }
   if (window["openai"]) {
     checks.windowOpenai = true;
-    debugLog("detectPlatform: Found window.openai", { platform: "chatgpt" });
-    return { platform: "chatgpt", detectedBy: "window.openai", checks };
+    debugLog("detectPlatform: Found window.openai (extensions)");
   }
   try {
     const params = new URLSearchParams(window.location.search);
@@ -97,8 +92,9 @@ function detectPlatformDetailed() {
 function detectPlatform() {
   return detectPlatformDetailed().platform;
 }
-function isChatGPT() {
-  return detectPlatform() === "chatgpt";
+function hasChatGPTExtensions() {
+  if (typeof window === "undefined") return false;
+  return Boolean(window["openai"]);
 }
 function isMCP() {
   return detectPlatform() === "mcp";
@@ -124,6 +120,48 @@ import {
   useEffect,
   useState
 } from "react";
+
+// src/extensions/chatgpt.ts
+function getChatGPTExtensions() {
+  if (typeof window === "undefined") return null;
+  const openai = window["openai"];
+  if (!openai || typeof openai !== "object") return null;
+  return openai;
+}
+function withExtensionsCapabilities(base, openai) {
+  return {
+    ...base,
+    widgetState: typeof openai.setWidgetState === "function",
+    fileUpload: typeof openai.uploadFile === "function",
+    fileDownload: typeof openai.getFileDownloadUrl === "function",
+    closeWidget: typeof openai.requestClose === "function",
+    modal: typeof openai.requestModal === "function"
+  };
+}
+function withChatGPTExtensions(bridge) {
+  const openai = getChatGPTExtensions();
+  if (!openai) return bridge;
+  bridge.capabilities = withExtensionsCapabilities(bridge.capabilities, openai);
+  if (typeof openai.setWidgetState === "function") {
+    bridge.setWidgetState = (state) => openai.setWidgetState?.(state);
+  }
+  bridge.getWidgetState = () => openai.widgetState ?? null;
+  if (typeof openai.uploadFile === "function") {
+    bridge.uploadFile = (file) => openai.uploadFile(file);
+  }
+  if (typeof openai.getFileDownloadUrl === "function") {
+    bridge.getFileDownloadUrl = (fileId) => openai.getFileDownloadUrl({ fileId });
+  }
+  if (typeof openai.requestClose === "function") {
+    bridge.requestClose = () => openai.requestClose?.();
+  }
+  if (typeof openai.requestModal === "function") {
+    bridge.requestModal = (options) => openai.requestModal(options);
+  }
+  return bridge;
+}
+
+// src/universal/provider.tsx
 import { jsx } from "react/jsx-runtime";
 var UniversalContext = createContext(null);
 var PlatformContext = createContext("unknown");
@@ -137,24 +175,25 @@ function UniversalProvider({
   const [ready, setReady] = useState(false);
   useEffect(() => {
     let cancelled = false;
-    const detected = detectPlatform();
-    setPlatform(detected);
-    let newBridge;
-    if (detected === "chatgpt") {
-      newBridge = new ChatGPTBridge();
-    } else if (detected === "mcp") {
-      newBridge = new MCPBridge(appInfo, appCapabilities);
-    } else {
+    const detectedPlatform = detectPlatform();
+    if (detectedPlatform !== "mcp") {
+      setBridge(null);
+      setPlatform("unknown");
       setReady(true);
       return;
     }
+    const newBridge = withChatGPTExtensions(
+      new MCPBridge(appInfo, appCapabilities)
+    );
     newBridge.connect().then(() => {
       if (cancelled) return;
       setBridge(newBridge);
+      setPlatform("mcp");
       setReady(true);
     }).catch((error) => {
       if (cancelled) return;
       console.error("[mcp-app-studio] Bridge connection failed:", error);
+      setPlatform("unknown");
       setReady(true);
     });
     return () => {
@@ -225,13 +264,11 @@ function useToolInput() {
 }
 function useToolInputPartial() {
   const bridge = useUniversalBridge();
-  const platform = usePlatform();
   const [input, setInput] = useState2(null);
   useEffect2(() => {
-    if (!bridge || platform !== "mcp") return;
-    if (!bridge.onToolInputPartial) return;
+    if (!bridge?.onToolInputPartial) return;
     return bridge.onToolInputPartial((args) => setInput(args));
-  }, [bridge, platform]);
+  }, [bridge]);
   return input;
 }
 function useToolResult() {
@@ -312,64 +349,51 @@ function useSendMessage() {
 }
 function useUpdateModelContext() {
   const bridge = useUniversalBridge();
-  const platform = usePlatform();
   return useCallback(
     async (ctx) => {
-      if (platform !== "mcp") {
+      if (!bridge?.updateModelContext) {
         console.warn(
-          "useUpdateModelContext: This feature is only available on MCP hosts. On ChatGPT, consider using useWidgetState instead."
+          "useUpdateModelContext: updateModelContext not available on the current host."
         );
         return;
       }
-      if (!bridge?.updateModelContext) {
-        throw new Error(
-          "updateModelContext not available on the current bridge."
-        );
-      }
       return bridge.updateModelContext(ctx);
     },
-    [bridge, platform]
+    [bridge]
   );
 }
 function useWidgetState() {
   const bridge = useUniversalBridge();
-  const platform = usePlatform();
   const [state, setState] = useState2(() => {
-    if (platform !== "chatgpt" || !bridge?.getWidgetState) return null;
+    if (!bridge?.getWidgetState) return null;
     return bridge.getWidgetState();
   });
   const setWidgetState = useCallback(
     (newState) => {
-      if (platform !== "chatgpt") {
+      if (!bridge?.setWidgetState) {
         console.warn(
-          "useWidgetState: This feature is only available on ChatGPT. On MCP hosts, consider using useUpdateModelContext instead."
+          "useWidgetState: widget state is not available on the current host."
         );
         return;
       }
-      if (!bridge?.setWidgetState) return;
       bridge.setWidgetState(newState);
       setState(newState);
     },
-    [bridge, platform]
+    [bridge]
   );
   return [state, setWidgetState];
 }
 function useLog() {
   const bridge = useUniversalBridge();
-  const platform = usePlatform();
   return useCallback(
     (level, data) => {
-      if (platform !== "mcp") {
-        console.warn(
-          "useLog: Structured logging is only available on MCP hosts. Falling back to console.log."
-        );
-        console.log(`[${level}]`, data);
+      if (bridge?.sendLog) {
+        bridge.sendLog(level, data);
         return;
       }
-      if (!bridge?.sendLog) return;
-      bridge.sendLog(level, data);
+      console.log(`[${level}]`, data);
     },
-    [bridge, platform]
+    [bridge]
   );
 }
 function useFeature(feature) {
@@ -377,16 +401,15 @@ function useFeature(feature) {
   return hasFeature(capabilities, feature);
 }
 export {
-  CHATGPT_CAPABILITIES,
   MCP_CAPABILITIES,
   UniversalProvider,
   detectPlatform,
   detectPlatformDetailed,
   disableDebugMode,
   enableDebugMode,
+  hasChatGPTExtensions,
   hasFeature,
   imageBlock,
-  isChatGPT,
   isMCP,
   textBlock,
   useCallTool,
@@ -404,5 +427,6 @@ export {
   useToolResult,
   useUniversalBridge,
   useUpdateModelContext,
-  useWidgetState
+  useWidgetState,
+  withChatGPTExtensions
 };

package/dist/platforms/mcp/index.d.ts

@@ -1,5 +1,5 @@
-import { A as AppCapabilities } from '../../bridge-BXW_-p2R.js';
-export { M as MCPBridge, a as MCPBridgeOptions } from '../../bridge-BXW_-p2R.js';
+import { A as AppCapabilities } from '../../bridge-BKLezf-H.js';
+export { M as MCPBridge, a as MCPBridgeOptions } from '../../bridge-BKLezf-H.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { ToolResult, DisplayMode, HostContext, ContentBlock } from '../../core/index.js';

package/dist/platforms/mcp/index.js

@@ -1,7 +1,7 @@
 import {
   MCPBridge
-} from "../../chunk-2OPSDEPI.js";
-import "../../chunk-4LAH4JH6.js";
+} from "../../chunk-IEZAKOIG.js";
+import "../../chunk-QNH5NSRH.js";
 
 // src/platforms/mcp/hooks.tsx
 import {
@@ -23,7 +23,17 @@ function MCPProvider({
   const [bridge] = useState(() => new MCPBridge(appInfo, appCapabilities));
   const [ready, setReady] = useState(false);
   useEffect(() => {
-    bridge.connect().then(() => setReady(true));
+    let cancelled = false;
+    bridge.connect().catch((error) => {
+      if (cancelled) return;
+      console.error("[mcp-app-studio] Bridge connection failed:", error);
+    }).finally(() => {
+      if (cancelled) return;
+      setReady(true);
+    });
+    return () => {
+      cancelled = true;
+    };
   }, [bridge]);
   if (!ready) return null;
   return /* @__PURE__ */ jsx(MCPContext.Provider, { value: bridge, children });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mcp-app-studio",
-  "version": "0.5.1",
-  "description": "Build interactive apps for AI assistants (ChatGPT, Claude, MCP hosts)",
+  "version": "0.6.0",
+  "description": "Build interactive apps for MCP Apps hosts (ChatGPT, Claude Desktop, etc.)",
   "keywords": [
     "chatgpt",
     "openai",
@@ -42,12 +42,6 @@
         "default": "./dist/core/index.js"
       }
     },
-    "./chatgpt": {
-      "import": {
-        "types": "./dist/platforms/chatgpt/index.d.ts",
-        "default": "./dist/platforms/chatgpt/index.js"
-      }
-    },
     "./mcp": {
       "import": {
         "types": "./dist/platforms/mcp/index.d.ts",
@@ -82,9 +76,11 @@
     "@modelcontextprotocol/ext-apps": "^1.0.1",
     "@types/node": "^25.2.0",
     "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.0",
     "@types/tar": "^6.1.13",
     "@vitest/coverage-v8": "^4.0.18",
     "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "tsup": "^8.5.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",