skybridge 0.0.0-dev.55ae9f7 → 0.0.0-dev.570aaaa

package/dist/src/web/hooks/use-mcp-app-bridge.d.ts

@@ -0,0 +1,24 @@
+import type { McpUiHostContext, McpUiInitializeRequest } from "@modelcontextprotocol/ext-apps";
+type McpAppInitializationOptions = Pick<McpUiInitializeRequest["params"], "appInfo">;
+export declare class McpAppBridge {
+    context: McpUiHostContext | null;
+    private listeners;
+    private pendingRequests;
+    private nextId;
+    private initialized;
+    private appInitializationOptions;
+    private requestTimeout;
+    constructor(options: McpAppInitializationOptions, requestTimeout?: number);
+    subscribe: (key: keyof McpUiHostContext) => (onChange: () => void) => () => boolean | undefined;
+    cleanup(): void;
+    private request;
+    private emit;
+    private setContext;
+    private init;
+    private handleMessage;
+    private connect;
+    private notify;
+}
+export declare function getMcpHost(options?: Partial<McpAppInitializationOptions>, requestTimeout?: number): McpAppBridge;
+export declare function useMcpAppBridge<K extends keyof McpUiHostContext>(key: K, options?: Partial<McpAppInitializationOptions>, requestTimeout?: number): McpUiHostContext[K] | undefined;
+export {};

package/dist/src/web/hooks/use-mcp-app-bridge.js

@@ -0,0 +1,119 @@
+import { useSyncExternalStore } from "react";
+const LATEST_PROTOCOL_VERSION = "2025-11-21";
+export class McpAppBridge {
+    context = null;
+    listeners = new Map();
+    pendingRequests = new Map();
+    nextId = 1;
+    initialized;
+    appInitializationOptions;
+    requestTimeout;
+    constructor(options, requestTimeout = 10_000) {
+        this.requestTimeout = requestTimeout;
+        this.initialized = false;
+        this.appInitializationOptions = {
+            appInfo: options.appInfo,
+            appCapabilities: {},
+            protocolVersion: LATEST_PROTOCOL_VERSION,
+        };
+    }
+    subscribe = (key) => (onChange) => {
+        this.listeners.set(key, new Set([...(this.listeners.get(key) || []), onChange]));
+        this.init();
+        return () => this.listeners.get(key)?.delete(onChange);
+    };
+    cleanup() {
+        window.removeEventListener("message", this.handleMessage);
+        this.pendingRequests.clear();
+        this.listeners.clear();
+    }
+    request({ method, params, }) {
+        const id = this.nextId++;
+        const { promise, resolve, reject } = Promise.withResolvers();
+        this.pendingRequests.set(id, {
+            resolve: resolve,
+            reject,
+        });
+        window.parent.postMessage({ jsonrpc: "2.0", id, method, params }, "*");
+        setTimeout(() => {
+            reject(new Error("Request timed out"));
+            this.pendingRequests.delete(id);
+        }, this.requestTimeout);
+        return promise;
+    }
+    emit(key) {
+        this.listeners.get(key)?.forEach((listener) => {
+            listener();
+        });
+    }
+    setContext(context) {
+        if (context == null)
+            return;
+        this.context = context;
+        for (const key of Object.keys(context)) {
+            this.emit(key);
+        }
+    }
+    init() {
+        if (this.initialized)
+            return;
+        this.initialized = true;
+        if (typeof window === "undefined" || window.parent === window) {
+            return;
+        }
+        window.addEventListener("message", this.handleMessage);
+        this.connect();
+    }
+    handleMessage = (event) => {
+        const data = event.data;
+        if (data?.jsonrpc !== "2.0")
+            return;
+        const request = this.pendingRequests.get(data.id);
+        if (request) {
+            this.pendingRequests.delete(data.id);
+            if (data.error) {
+                request.reject(new Error(data.error.message));
+                return;
+            }
+            request.resolve(data.result);
+            return;
+        }
+        if (data.method === "ui/notifications/host-context-changed") {
+            this.setContext({ ...this.context, ...data.params });
+        }
+    };
+    async connect() {
+        try {
+            const result = await this.request({
+                method: "ui/initialize",
+                params: this.appInitializationOptions,
+            });
+            this.setContext(result.hostContext);
+            this.notify({ method: "ui/notifications/initialized" });
+        }
+        catch (err) {
+            console.error(err);
+        }
+    }
+    notify(notification) {
+        window.parent.postMessage({ jsonrpc: "2.0", ...notification }, "*");
+    }
+}
+let instance = null;
+const defaultOptions = {
+    appInfo: { name: "skybridge-app", version: "0.0.1" },
+};
+export function getMcpHost(options, requestTimeout) {
+    if (instance && (options || requestTimeout)) {
+        console.warn("getMcpHost: options and requestTimeout ignored, instance already exists");
+    }
+    if (!instance) {
+        instance = new McpAppBridge({ ...defaultOptions, ...options }, requestTimeout);
+    }
+    return instance;
+}
+export function useMcpAppBridge(key, options, requestTimeout) {
+    const host = getMcpHost(options, requestTimeout);
+    return useSyncExternalStore(host.subscribe(key), () => host.context?.[key]);
+}
+//# sourceMappingURL=use-mcp-app-bridge.js.map

package/dist/src/web/hooks/use-mcp-app-bridge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mcp-app-bridge.js","sourceRoot":"","sources":["../../../../src/web/hooks/use-mcp-app-bridge.ts"],"names":[],"mappings":"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"}

package/dist/src/web/hooks/use-mcp-app-bridge.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/web/hooks/use-mcp-app-bridge.test.js

@@ -0,0 +1,62 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+describe("useMcpAppBridge", () => {
+    let mockPostMessage;
+    const importModule = async () => {
+        return import("./use-mcp-app-bridge.js");
+    };
+    beforeEach(() => {
+        vi.resetModules();
+        mockPostMessage = vi.fn();
+        Object.defineProperty(window, "parent", {
+            value: { postMessage: mockPostMessage },
+            writable: true,
+            configurable: true,
+        });
+    });
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+    it("should return the theme value from host context", async () => {
+        const { useMcpAppBridge } = await importModule();
+        const { result } = renderHook(() => useMcpAppBridge("theme"));
+        const initCall = mockPostMessage.mock.calls.find((call) => call[0].method === "ui/initialize");
+        if (initCall) {
+            act(() => {
+                window.dispatchEvent(new MessageEvent("message", {
+                    data: {
+                        jsonrpc: "2.0",
+                        id: initCall[0].id,
+                        result: {
+                            protocolVersion: "2025-06-18",
+                            hostInfo: { name: "test-host", version: "1.0.0" },
+                            hostCapabilities: {},
+                            hostContext: { theme: "light" },
+                        },
+                    },
+                }));
+            });
+        }
+        await waitFor(() => {
+            expect(result.current).toBe("light");
+        });
+    });
+    it("should reject the request after timeout", async () => {
+        vi.useFakeTimers();
+        const consoleErrorSpy = vi
+            .spyOn(console, "error")
+            .mockImplementation(() => { });
+        const { useMcpAppBridge, getMcpHost } = await importModule();
+        const bridge = getMcpHost({ appInfo: { name: "test", version: "1.0.0" } }, 100);
+        renderHook(() => useMcpAppBridge("theme"));
+        expect(mockPostMessage).toHaveBeenCalledWith(expect.objectContaining({ method: "ui/initialize" }), "*");
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(100);
+        });
+        expect(consoleErrorSpy).toHaveBeenCalledWith(new Error("Request timed out"));
+        consoleErrorSpy.mockRestore();
+        vi.useRealTimers();
+        bridge.cleanup();
+    });
+});
+//# sourceMappingURL=use-mcp-app-bridge.test.js.map

package/dist/src/web/hooks/use-mcp-app-bridge.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mcp-app-bridge.test.js","sourceRoot":"","sources":["../../../../src/web/hooks/use-mcp-app-bridge.test.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skybridge",
-  "version": "0.0.0-dev.55ae9f7",
+  "version": "0.0.0-dev.570aaaa",
   "description": "Skybridge is a framework for building ChatGPT apps",
   "type": "module",
   "files": [
@@ -52,6 +52,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "2.3.8",
+    "@modelcontextprotocol/ext-apps": "^0.2.2",
     "@modelcontextprotocol/sdk": "^1.24.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",