mcp-app-studio 0.3.2

package/dist/index.js

@@ -0,0 +1,358 @@
+import {
+  imageBlock,
+  textBlock
+} from "./chunk-KRCGOYZ5.js";
+import {
+  ChatGPTBridge
+} from "./chunk-L2RRNF7V.js";
+import {
+  MCPBridge
+} from "./chunk-QO43ZGJI.js";
+import {
+  CHATGPT_CAPABILITIES,
+  MCP_CAPABILITIES,
+  hasFeature
+} from "./chunk-4LAH4JH6.js";
+
+// src/universal/detect.ts
+var MCP_MARKERS = {
+  URL_PARAM: "mcp-host",
+  WINDOW_PROP: "__MCP_HOST__",
+  DATA_ATTR: "data-mcp-host"
+};
+var DEBUG_KEY = "__CHATGPT_APP_DEBUG__";
+function isDebugMode() {
+  if (typeof window === "undefined") return false;
+  return window[DEBUG_KEY] === true;
+}
+function debugLog(message, data) {
+  if (!isDebugMode()) return;
+  console.log(`[mcp-app-studio] ${message}`, data ?? "");
+}
+function detectPlatformDetailed() {
+  const checks = {
+    windowOpenai: false,
+    mcpUrlParam: false,
+    mcpWindowProp: false,
+    mcpDataAttr: false
+  };
+  if (typeof window === "undefined") {
+    debugLog("detectPlatform: No window object (SSR/Node.js)");
+    return { platform: "unknown", detectedBy: null, checks };
+  }
+  if (window["openai"]) {
+    checks.windowOpenai = true;
+    debugLog("detectPlatform: Found window.openai", { platform: "chatgpt" });
+    return { platform: "chatgpt", detectedBy: "window.openai", checks };
+  }
+  try {
+    const params = new URLSearchParams(window.location.search);
+    if (params.has(MCP_MARKERS.URL_PARAM)) {
+      checks.mcpUrlParam = true;
+      debugLog("detectPlatform: Found MCP URL param", {
+        param: MCP_MARKERS.URL_PARAM,
+        platform: "mcp"
+      });
+      return { platform: "mcp", detectedBy: `URL param: ${MCP_MARKERS.URL_PARAM}`, checks };
+    }
+  } catch {
+    debugLog("detectPlatform: URL parsing failed");
+  }
+  if (MCP_MARKERS.WINDOW_PROP in window) {
+    checks.mcpWindowProp = true;
+    debugLog("detectPlatform: Found MCP window property", {
+      prop: MCP_MARKERS.WINDOW_PROP,
+      platform: "mcp"
+    });
+    return { platform: "mcp", detectedBy: `window.${MCP_MARKERS.WINDOW_PROP}`, checks };
+  }
+  try {
+    const frameElement = window.frameElement;
+    if (frameElement?.hasAttribute(MCP_MARKERS.DATA_ATTR)) {
+      checks.mcpDataAttr = true;
+      debugLog("detectPlatform: Found MCP data attribute", {
+        attr: MCP_MARKERS.DATA_ATTR,
+        platform: "mcp"
+      });
+      return { platform: "mcp", detectedBy: `iframe: ${MCP_MARKERS.DATA_ATTR}`, checks };
+    }
+  } catch {
+    debugLog("detectPlatform: Frame element access failed (cross-origin)");
+  }
+  debugLog("detectPlatform: No platform markers found", { checks });
+  return { platform: "unknown", detectedBy: null, checks };
+}
+function detectPlatform() {
+  return detectPlatformDetailed().platform;
+}
+function isChatGPT() {
+  return detectPlatform() === "chatgpt";
+}
+function isMCP() {
+  return detectPlatform() === "mcp";
+}
+function enableDebugMode() {
+  if (typeof window !== "undefined") {
+    window[DEBUG_KEY] = true;
+    console.log("[mcp-app-studio] Debug mode enabled. Platform detection will log to console.");
+  }
+}
+function disableDebugMode() {
+  if (typeof window !== "undefined") {
+    window[DEBUG_KEY] = false;
+  }
+}
+
+// src/universal/provider.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var UniversalContext = createContext(null);
+var PlatformContext = createContext("unknown");
+function UniversalProvider({
+  children,
+  appInfo,
+  appCapabilities
+}) {
+  const [bridge, setBridge] = useState(null);
+  const [platform, setPlatform] = useState("unknown");
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    const detected = detectPlatform();
+    setPlatform(detected);
+    let newBridge;
+    if (detected === "chatgpt") {
+      newBridge = new ChatGPTBridge();
+    } else if (detected === "mcp") {
+      newBridge = new MCPBridge(appInfo, appCapabilities);
+    } else {
+      setReady(true);
+      return;
+    }
+    newBridge.connect().then(() => {
+      setBridge(newBridge);
+      setReady(true);
+    });
+  }, [appInfo, appCapabilities]);
+  if (!ready) return null;
+  return /* @__PURE__ */ jsx(PlatformContext.Provider, { value: platform, children: /* @__PURE__ */ jsx(UniversalContext.Provider, { value: bridge, children }) });
+}
+function useUniversalBridge() {
+  return useContext(UniversalContext);
+}
+function usePlatform() {
+  return useContext(PlatformContext);
+}
+
+// src/universal/hooks.tsx
+import { useEffect as useEffect2, useState as useState2, useCallback } from "react";
+function useHostContext() {
+  const bridge = useUniversalBridge();
+  const [context, setContext] = useState2(
+    bridge?.getHostContext() ?? null
+  );
+  useEffect2(() => {
+    if (!bridge) return;
+    return bridge.onHostContextChanged((ctx) => {
+      setContext(
+        (prev) => prev ? { ...prev, ...ctx } : ctx
+      );
+    });
+  }, [bridge]);
+  return context;
+}
+function useTheme() {
+  const context = useHostContext();
+  return context?.theme ?? "light";
+}
+function useCapabilities() {
+  const bridge = useUniversalBridge();
+  return bridge?.capabilities ?? null;
+}
+function useToolInput() {
+  const bridge = useUniversalBridge();
+  const [input, setInput] = useState2(null);
+  useEffect2(() => {
+    if (!bridge) return;
+    return bridge.onToolInput((args) => setInput(args));
+  }, [bridge]);
+  return input;
+}
+function useToolInputPartial() {
+  const bridge = useUniversalBridge();
+  const platform = usePlatform();
+  const [input, setInput] = useState2(null);
+  useEffect2(() => {
+    if (!bridge || platform !== "mcp") return;
+    if (!bridge.onToolInputPartial) return;
+    return bridge.onToolInputPartial((args) => setInput(args));
+  }, [bridge, platform]);
+  return input;
+}
+function useToolResult() {
+  const bridge = useUniversalBridge();
+  const [result, setResult] = useState2(null);
+  useEffect2(() => {
+    if (!bridge) return;
+    return bridge.onToolResult(setResult);
+  }, [bridge]);
+  return result;
+}
+function useDisplayMode() {
+  const bridge = useUniversalBridge();
+  const context = useHostContext();
+  const mode = context?.displayMode ?? "inline";
+  const setMode = useCallback(
+    async (newMode) => {
+      if (!bridge) return;
+      await bridge.requestDisplayMode(newMode);
+    },
+    [bridge]
+  );
+  return [mode, setMode];
+}
+function useCallTool() {
+  const bridge = useUniversalBridge();
+  return useCallback(
+    async (name, args) => {
+      if (!bridge) {
+        throw new Error(
+          "Bridge not available. Make sure your component is wrapped with <UniversalProvider>."
+        );
+      }
+      return bridge.callTool(name, args);
+    },
+    [bridge]
+  );
+}
+function useOpenLink() {
+  const bridge = useUniversalBridge();
+  return useCallback(
+    async (url) => {
+      if (!bridge) {
+        throw new Error(
+          "Bridge not available. Make sure your component is wrapped with <UniversalProvider>."
+        );
+      }
+      return bridge.openLink(url);
+    },
+    [bridge]
+  );
+}
+function useSendMessage() {
+  const bridge = useUniversalBridge();
+  return useCallback(
+    async (text) => {
+      if (!bridge?.sendMessage) {
+        throw new Error(
+          "sendMessage not available. This feature may not be supported on the current platform."
+        );
+      }
+      return bridge.sendMessage({
+        role: "user",
+        content: [{ type: "text", text }]
+      });
+    },
+    [bridge]
+  );
+}
+function useUpdateModelContext() {
+  const bridge = useUniversalBridge();
+  const platform = usePlatform();
+  return useCallback(
+    async (ctx) => {
+      if (platform !== "mcp") {
+        console.warn(
+          "useUpdateModelContext: This feature is only available on MCP hosts. On ChatGPT, consider using useWidgetState instead."
+        );
+        return;
+      }
+      if (!bridge?.updateModelContext) {
+        throw new Error(
+          "updateModelContext not available on the current bridge."
+        );
+      }
+      return bridge.updateModelContext(ctx);
+    },
+    [bridge, platform]
+  );
+}
+function useWidgetState() {
+  const bridge = useUniversalBridge();
+  const platform = usePlatform();
+  const [state, setState] = useState2(() => {
+    if (platform !== "chatgpt" || !bridge?.getWidgetState) return null;
+    return bridge.getWidgetState();
+  });
+  const setWidgetState = useCallback(
+    (newState) => {
+      if (platform !== "chatgpt") {
+        console.warn(
+          "useWidgetState: This feature is only available on ChatGPT. On MCP hosts, consider using useUpdateModelContext instead."
+        );
+        return;
+      }
+      if (!bridge?.setWidgetState) return;
+      bridge.setWidgetState(newState);
+      setState(newState);
+    },
+    [bridge, platform]
+  );
+  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);
+        return;
+      }
+      if (!bridge?.sendLog) return;
+      bridge.sendLog(level, data);
+    },
+    [bridge, platform]
+  );
+}
+function useFeature(feature) {
+  const capabilities = useCapabilities();
+  return hasFeature(capabilities, feature);
+}
+export {
+  CHATGPT_CAPABILITIES,
+  MCP_CAPABILITIES,
+  UniversalProvider,
+  detectPlatform,
+  detectPlatformDetailed,
+  disableDebugMode,
+  enableDebugMode,
+  hasFeature,
+  imageBlock,
+  isChatGPT,
+  isMCP,
+  textBlock,
+  useCallTool,
+  useCapabilities,
+  useDisplayMode,
+  useFeature,
+  useHostContext,
+  useLog,
+  useOpenLink,
+  usePlatform,
+  useSendMessage,
+  useTheme,
+  useToolInput,
+  useToolInputPartial,
+  useToolResult,
+  useUniversalBridge,
+  useUpdateModelContext,
+  useWidgetState
+};

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

@@ -0,0 +1,158 @@
+import { ExtendedBridge, HostCapabilities, HostContext, ToolInputCallback, ToolResultCallback, HostContextChangedCallback, ToolResult, DisplayMode, ChatMessage } from '../../core/index.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface ChatGPTGlobals {
+    theme: "light" | "dark";
+    locale: string;
+    displayMode: "pip" | "inline" | "fullscreen";
+    previousDisplayMode: "pip" | "inline" | "fullscreen" | null;
+    maxHeight: number;
+    toolInput: Record<string, unknown>;
+    toolOutput: Record<string, unknown> | null;
+    toolResponseMetadata: Record<string, unknown> | null;
+    widgetState: Record<string, unknown> | null;
+    userAgent: {
+        device: {
+            type: "mobile" | "tablet" | "desktop" | "resizable";
+        };
+        capabilities: {
+            hover: boolean;
+            touch: boolean;
+        };
+    };
+    safeArea: {
+        insets: {
+            top: number;
+            bottom: number;
+            left: number;
+            right: number;
+        };
+    };
+    view: {
+        mode: "modal" | "inline";
+        params: Record<string, unknown> | null;
+    } | null;
+    userLocation: {
+        city?: string;
+        region?: string;
+        country?: string;
+        timezone?: string;
+        longitude?: number;
+        latitude?: number;
+    } | null;
+}
+declare global {
+    interface Window {
+        openai?: ChatGPTGlobals & {
+            callTool(name: string, args: Record<string, unknown>): Promise<unknown>;
+            setWidgetState(state: Record<string, unknown> | null): void;
+            requestDisplayMode(args: {
+                mode: string;
+            }): Promise<{
+                mode: string;
+            }>;
+            notifyIntrinsicHeight(height: number): void;
+            requestClose(): void;
+            sendFollowUpMessage(args: {
+                prompt: string;
+            }): Promise<void>;
+            openExternal(payload: {
+                href: string;
+            }): void;
+            uploadFile(file: File): Promise<{
+                fileId: string;
+            }>;
+            getFileDownloadUrl(args: {
+                fileId: string;
+            }): Promise<{
+                downloadUrl: string;
+            }>;
+            requestModal(options: unknown): Promise<void>;
+        };
+    }
+}
+
+declare class ChatGPTBridge implements ExtendedBridge {
+    readonly platform: "chatgpt";
+    readonly capabilities: HostCapabilities;
+    private toolInputCallbacks;
+    private toolResultCallbacks;
+    private contextCallbacks;
+    private lastContext;
+    private connected;
+    private get openai();
+    connect(): Promise<void>;
+    private buildHostContext;
+    private mapDeviceType;
+    private handleGlobalsChange;
+    getHostContext(): HostContext | null;
+    onToolInput(callback: ToolInputCallback): () => void;
+    onToolResult(callback: ToolResultCallback): () => void;
+    onHostContextChanged(callback: HostContextChangedCallback): () => void;
+    callTool(name: string, args: Record<string, unknown>): Promise<ToolResult>;
+    openLink(url: string): Promise<void>;
+    requestDisplayMode(mode: DisplayMode): Promise<DisplayMode>;
+    sendSizeChanged(size: {
+        width?: number;
+        height?: number;
+    }): void;
+    sendMessage(message: ChatMessage): Promise<void>;
+    setWidgetState(state: Record<string, unknown> | null): void;
+    getWidgetState(): Record<string, unknown> | null;
+    uploadFile(file: File): Promise<{
+        fileId: string;
+    }>;
+    getFileDownloadUrl(fileId: string): Promise<{
+        downloadUrl: string;
+    }>;
+    requestClose(): void;
+    requestModal(options: {
+        title?: string;
+        params?: Record<string, unknown>;
+        anchor?: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
+    }): Promise<void>;
+}
+
+declare function ChatGPTProvider({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element | null;
+declare function useHostContext(): HostContext | null;
+declare function useTheme(): "light" | "dark";
+declare function useToolInput<T = Record<string, unknown>>(): T | null;
+declare function useToolResult(): ToolResult | null;
+declare function useDisplayMode(): [
+    DisplayMode,
+    (mode: DisplayMode) => Promise<void>
+];
+declare function useWidgetState<T = Record<string, unknown>>(): [
+    T | null,
+    (state: T | null) => void
+];
+declare function useCallTool(): (name: string, args: Record<string, unknown>) => Promise<ToolResult>;
+declare function useOpenLink(): (url: string) => Promise<void>;
+declare function useSendMessage(): (text: string) => Promise<void>;
+declare function useUploadFile(): (file: File) => Promise<{
+    fileId: string;
+}>;
+declare function useGetFileDownloadUrl(): (fileId: string) => Promise<{
+    downloadUrl: string;
+}>;
+declare function useRequestClose(): () => void;
+declare function useRequestModal(): (options: {
+    title?: string;
+    params?: Record<string, unknown>;
+    anchor?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}) => Promise<void>;
+
+export { ChatGPTBridge, type ChatGPTGlobals, ChatGPTProvider, useCallTool, useDisplayMode, useGetFileDownloadUrl, useHostContext, useOpenLink, useRequestClose, useRequestModal, useSendMessage, useTheme, useToolInput, useToolResult, useUploadFile, useWidgetState };

package/dist/platforms/chatgpt/index.js

@@ -0,0 +1,149 @@
+import {
+  ChatGPTBridge
+} from "../../chunk-L2RRNF7V.js";
+import "../../chunk-4LAH4JH6.js";
+
+// src/platforms/chatgpt/hooks.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useCallback
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var ChatGPTContext = createContext(null);
+function ChatGPTProvider({ children }) {
+  const [bridge] = useState(() => new ChatGPTBridge());
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    bridge.connect().then(() => setReady(true));
+  }, [bridge]);
+  if (!ready) return null;
+  return /* @__PURE__ */ jsx(ChatGPTContext.Provider, { value: bridge, children });
+}
+function useChatGPTBridge() {
+  const bridge = useContext(ChatGPTContext);
+  if (!bridge) {
+    throw new Error("useChatGPT* hooks must be used within ChatGPTProvider");
+  }
+  return bridge;
+}
+function useHostContext() {
+  const bridge = useChatGPTBridge();
+  const [context, setContext] = useState(
+    bridge.getHostContext()
+  );
+  useEffect(() => {
+    return bridge.onHostContextChanged((ctx) => {
+      setContext((prev) => ({ ...prev, ...ctx }));
+    });
+  }, [bridge]);
+  return context;
+}
+function useTheme() {
+  const context = useHostContext();
+  return context?.theme ?? "light";
+}
+function useToolInput() {
+  const bridge = useChatGPTBridge();
+  const [input, setInput] = useState(null);
+  useEffect(() => {
+    return bridge.onToolInput((args) => setInput(args));
+  }, [bridge]);
+  return input;
+}
+function useToolResult() {
+  const bridge = useChatGPTBridge();
+  const [result, setResult] = useState(null);
+  useEffect(() => {
+    return bridge.onToolResult(setResult);
+  }, [bridge]);
+  return result;
+}
+function useDisplayMode() {
+  const bridge = useChatGPTBridge();
+  const context = useHostContext();
+  const mode = context?.displayMode ?? "inline";
+  const setMode = useCallback(
+    async (newMode) => {
+      await bridge.requestDisplayMode(newMode);
+    },
+    [bridge]
+  );
+  return [mode, setMode];
+}
+function useWidgetState() {
+  const bridge = useChatGPTBridge();
+  const [state, setState] = useState(
+    bridge.getWidgetState()
+  );
+  const setWidgetState = useCallback(
+    (newState) => {
+      bridge.setWidgetState(newState);
+      setState(newState);
+    },
+    [bridge]
+  );
+  return [state, setWidgetState];
+}
+function useCallTool() {
+  const bridge = useChatGPTBridge();
+  return useCallback(
+    (name, args) => bridge.callTool(name, args),
+    [bridge]
+  );
+}
+function useOpenLink() {
+  const bridge = useChatGPTBridge();
+  return useCallback((url) => bridge.openLink(url), [bridge]);
+}
+function useSendMessage() {
+  const bridge = useChatGPTBridge();
+  return useCallback(
+    (text) => bridge.sendMessage({
+      role: "user",
+      content: [{ type: "text", text }]
+    }),
+    [bridge]
+  );
+}
+function useUploadFile() {
+  const bridge = useChatGPTBridge();
+  return useCallback((file) => bridge.uploadFile(file), [bridge]);
+}
+function useGetFileDownloadUrl() {
+  const bridge = useChatGPTBridge();
+  return useCallback(
+    (fileId) => bridge.getFileDownloadUrl(fileId),
+    [bridge]
+  );
+}
+function useRequestClose() {
+  const bridge = useChatGPTBridge();
+  return useCallback(() => bridge.requestClose(), [bridge]);
+}
+function useRequestModal() {
+  const bridge = useChatGPTBridge();
+  return useCallback(
+    (options) => bridge.requestModal(options),
+    [bridge]
+  );
+}
+export {
+  ChatGPTBridge,
+  ChatGPTProvider,
+  useCallTool,
+  useDisplayMode,
+  useGetFileDownloadUrl,
+  useHostContext,
+  useOpenLink,
+  useRequestClose,
+  useRequestModal,
+  useSendMessage,
+  useTheme,
+  useToolInput,
+  useToolResult,
+  useUploadFile,
+  useWidgetState
+};

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

@@ -0,0 +1,37 @@
+import { A as AppCapabilities } from '../../bridge-BOSEqpaS.js';
+export { M as MCPBridge, a as MCPBridgeOptions } from '../../bridge-BOSEqpaS.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { HostContext, ToolResult, DisplayMode, ContentBlock } from '../../core/index.js';
+import '@modelcontextprotocol/ext-apps';
+
+interface MCPProviderProps {
+    children: ReactNode;
+    appInfo?: {
+        name: string;
+        version: string;
+    };
+    appCapabilities?: AppCapabilities;
+}
+declare function MCPProvider({ children, appInfo, appCapabilities, }: MCPProviderProps): react_jsx_runtime.JSX.Element | null;
+declare function useHostContext(): HostContext | null;
+declare function useTheme(): "light" | "dark";
+declare function useToolInput<T = Record<string, unknown>>(): T | null;
+declare function useToolInputPartial<T = Record<string, unknown>>(): T | null;
+declare function useToolResult(): ToolResult | null;
+declare function useToolCancellation(callback: (reason: string) => void): void;
+declare function useTeardown(callback: () => Promise<void> | void): void;
+declare function useDisplayMode(): [
+    DisplayMode,
+    (mode: DisplayMode) => Promise<void>
+];
+declare function useCallTool(): (name: string, args: Record<string, unknown>) => Promise<ToolResult>;
+declare function useOpenLink(): (url: string) => Promise<void>;
+declare function useSendMessage(): (text: string) => Promise<void>;
+declare function useUpdateModelContext(): (ctx: {
+    content?: ContentBlock[];
+    structuredContent?: Record<string, unknown>;
+}) => Promise<void>;
+declare function useLog(): (level: "debug" | "info" | "warning" | "error", data: string) => void;
+
+export { AppCapabilities, MCPProvider, type MCPProviderProps, useCallTool, useDisplayMode, useHostContext, useLog, useOpenLink, useSendMessage, useTeardown, useTheme, useToolCancellation, useToolInput, useToolInputPartial, useToolResult, useUpdateModelContext };