@apollo/client-ai-apps 0.5.4 → 0.6.1

package/src/mcp/react/hooks/__tests__/useToolInfo.test.tsx

@@ -0,0 +1,53 @@
+import { test, expect } from "vitest";
+import {
+  disableActEnvironment,
+  renderHookToSnapshotStream,
+} from "@testing-library/react-render-stream";
+import { Suspense } from "react";
+import { InMemoryCache } from "@apollo/client";
+
+import { useToolInfo } from "../useToolInfo.js";
+import { ApolloClient } from "../../../core/ApolloClient.js";
+import {
+  graphqlToolResult,
+  minimalHostContextWithToolName,
+  mockApplicationManifest,
+  mockMcpHost,
+  spyOnConsole,
+} from "../../../../testing/internal/index.js";
+import { ApolloProvider } from "../../../../react/ApolloProvider.js";
+
+test("returns tool name and input combined", async () => {
+  using _ = spyOnConsole("debug");
+  const client = new ApolloClient({
+    cache: new InMemoryCache(),
+    manifest: mockApplicationManifest(),
+  });
+
+  using host = await mockMcpHost({
+    hostContext: minimalHostContextWithToolName("GetProduct"),
+  });
+  host.onCleanup(() => client.stop());
+
+  host.sendToolInput({ arguments: { id: "1" } });
+  host.sendToolResult(graphqlToolResult({ data: { product: null } }));
+
+  using _disabledAct = disableActEnvironment();
+  const { takeSnapshot } = await renderHookToSnapshotStream(
+    () => useToolInfo(),
+    {
+      wrapper: ({ children }) => (
+        <Suspense>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
+        </Suspense>
+      ),
+    }
+  );
+
+  await expect(takeSnapshot()).resolves.toEqual({
+    toolName: "GetProduct",
+    toolInput: { id: "1" },
+  });
+
+  await expect(takeSnapshot).not.toRerender();
+});

package/src/mcp/react/hooks/useHostContext.ts

@@ -0,0 +1,14 @@
+import { useCallback, useSyncExternalStore } from "react";
+import { useApolloClient } from "./useApolloClient";
+
+export function useHostContext() {
+  const appManager = useApolloClient()["appManager"];
+
+  return useSyncExternalStore(
+    useCallback(
+      (update) => appManager.onHostContextChanged(update),
+      [appManager]
+    ),
+    () => appManager.app.getHostContext()
+  );
+}

package/src/mcp/react/hooks/useToolInfo.ts

@@ -0,0 +1,13 @@
+import type { ToolInfo } from "../../../core/typeRegistration.js";
+import { useApolloClient } from "./useApolloClient.js";
+
+export function useToolInfo(): ToolInfo | undefined {
+  const appManager = useApolloClient()["appManager"];
+  const toolName = appManager.toolName;
+
+  if (!toolName) {
+    return;
+  }
+
+  return { toolName, toolInput: appManager.toolInput };
+}

package/src/mcp/react/hooks/useToolInput.ts

@@ -1,5 +1,10 @@
+import type { ToolInput } from "../../../core/typeRegistration.js";
 import { useApolloClient } from "./useApolloClient.js";
 
-export function useToolInput() {
+/**
+ * @deprecated Please use the `useToolInfo` hook. `useToolInput` will be removed
+ * in the next major version.
+ */
+export function useToolInput(): ToolInput | undefined {
   return useApolloClient()["appManager"].toolInput;
 }

package/src/mcp/react/hooks/useToolName.ts

@@ -1,5 +1,10 @@
+import type { ToolName } from "../../../core/typeRegistration.js";
 import { useApolloClient } from "./useApolloClient.js";
 
-export function useToolName() {
+/**
+ * @deprecated Please use the `useToolInfo` hook. `useToolName` will be removed
+ * in the next major version.
+ */
+export function useToolName(): ToolName | undefined {
   return useApolloClient()["appManager"].toolName;
 }

package/src/mcp/react/index.ts

@@ -1,5 +1,7 @@
 export { useApp } from "./hooks/useApp.js";
+export { useHostContext } from "./hooks/useHostContext.js";
 export { useToolName } from "./hooks/useToolName.js";
 export { useToolMetadata } from "./hooks/useToolMetadata.js";
 export { useToolInput } from "./hooks/useToolInput.js";
+export { useToolInfo } from "./hooks/useToolInfo.js";
 export { createHydrationUtils } from "./hooks/createHydrationUtils.js";

package/src/openai/core/McpAppManager.ts

@@ -1,4 +1,8 @@
-import { App, PostMessageTransport } from "@modelcontextprotocol/ext-apps";
+import {
+  App,
+  PostMessageTransport,
+  type McpUiHostContextChangedNotification,
+} from "@modelcontextprotocol/ext-apps";
 import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
 import type { ApplicationManifest } from "../../types/application-manifest";
 import type { FormattedExecutionResult } from "graphql";
@@ -19,6 +23,10 @@ export class McpAppManager {
   #toolMetadata: Record<string, unknown> | null = null;
   #toolInput: Record<string, unknown> | undefined;
 
+  #hostContextCallbacks = new Set<
+    (params: McpUiHostContextChangedNotification["params"]) => void
+  >();
+
   constructor(manifest: ApplicationManifest) {
     this.app = new App({ name: manifest.name, version: manifest.appVersion });
   }
@@ -35,6 +43,15 @@ export class McpAppManager {
     return this.#toolInput;
   }
 
+  onHostContextChanged(
+    cb: (params: McpUiHostContextChangedNotification["params"]) => void
+  ) {
+    this.#hostContextCallbacks.add(cb);
+    return () => {
+      this.#hostContextCallbacks.delete(cb);
+    };
+  }
+
   connect = cacheAsync(async () => {
     let toolResult = promiseWithResolvers<ApolloMcpServerApps.CallToolResult>();
 
@@ -44,6 +61,10 @@ export class McpAppManager {
       );
     };
 
+    this.app.onhostcontextchanged = (params) => {
+      this.#hostContextCallbacks.forEach((cb) => cb(params));
+    };
+
     await this.connectToHost();
 
     const { structuredContent } = await toolResult.promise;

package/src/openai/react/hooks/__tests__/useToolInfo.test.tsx

@@ -0,0 +1,92 @@
+import { afterEach, expect, test, vi } from "vitest";
+import {
+  graphqlToolResult,
+  minimalHostContextWithToolName,
+  mockApplicationManifest,
+  mockMcpHost,
+  spyOnConsole,
+  stubOpenAiGlobals,
+} from "../../../../testing/internal/index.js";
+import {
+  disableActEnvironment,
+  renderHookToSnapshotStream,
+} from "@testing-library/react-render-stream";
+import { useToolInfo } from "../useToolInfo.js";
+import { ApolloClient } from "../../../core/ApolloClient.js";
+import { InMemoryCache } from "@apollo/client";
+import { Suspense } from "react";
+import { ApolloProvider } from "../../../../react/ApolloProvider.js";
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+test("returns tool name and input combined", async () => {
+  using _ = spyOnConsole("debug");
+  stubOpenAiGlobals({ toolResponseMetadata: {}, toolInput: { id: "1" } });
+  const client = new ApolloClient({
+    cache: new InMemoryCache(),
+    manifest: mockApplicationManifest(),
+  });
+
+  using host = await mockMcpHost({
+    hostContext: minimalHostContextWithToolName("GetProduct"),
+  });
+  host.onCleanup(() => client.stop());
+
+  host.sendToolInput({ arguments: { id: "1" } });
+  host.sendToolResult(graphqlToolResult({ data: { product: null } }));
+
+  using _disabledAct = disableActEnvironment();
+  const { takeSnapshot } = await renderHookToSnapshotStream(
+    () => useToolInfo(),
+    {
+      wrapper: ({ children }) => (
+        <Suspense>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
+        </Suspense>
+      ),
+    }
+  );
+
+  await expect(takeSnapshot()).resolves.toEqual({
+    toolName: "GetProduct",
+    toolInput: { id: "1" },
+  });
+  await expect(takeSnapshot).not.toRerender();
+});
+
+test("returns undefined toolInput when toolInput is not provided", async () => {
+  using _ = spyOnConsole("debug");
+  stubOpenAiGlobals({ toolResponseMetadata: {} });
+  const client = new ApolloClient({
+    cache: new InMemoryCache(),
+    manifest: mockApplicationManifest(),
+  });
+
+  using host = await mockMcpHost({
+    hostContext: minimalHostContextWithToolName("GetProduct"),
+  });
+  host.onCleanup(() => client.stop());
+
+  host.sendToolInput({ arguments: {} });
+  host.sendToolResult(graphqlToolResult({ data: { product: null } }));
+
+  using _disabledAct = disableActEnvironment();
+  const { takeSnapshot } = await renderHookToSnapshotStream(
+    () => useToolInfo(),
+    {
+      wrapper: ({ children }) => (
+        <Suspense>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
+        </Suspense>
+      ),
+    }
+  );
+
+  await expect(takeSnapshot()).resolves.toEqual({
+    toolName: "GetProduct",
+    toolInput: undefined,
+  });
+  await expect(takeSnapshot).not.toRerender();
+});

package/src/openai/react/hooks/useHostContext.ts

@@ -0,0 +1,14 @@
+import { useCallback, useSyncExternalStore } from "react";
+import { useApolloClient } from "./useApolloClient";
+
+export function useHostContext() {
+  const appManager = useApolloClient()["appManager"];
+
+  return useSyncExternalStore(
+    useCallback(
+      (update) => appManager.onHostContextChanged(update),
+      [appManager]
+    ),
+    () => appManager.app.getHostContext()
+  );
+}

package/src/openai/react/hooks/useToolInfo.ts

@@ -0,0 +1,13 @@
+import type { ToolInfo } from "../../../core/typeRegistration.js";
+import { useApolloClient } from "./useApolloClient.js";
+
+export function useToolInfo(): ToolInfo | undefined {
+  const appManager = useApolloClient()["appManager"];
+  const toolName = appManager.toolName;
+
+  if (!toolName) {
+    return;
+  }
+
+  return { toolName, toolInput: appManager.toolInput };
+}

package/src/openai/react/hooks/useToolInput.ts

@@ -1,5 +1,10 @@
+import type { ToolInput } from "../../../core/typeRegistration.js";
 import { useApolloClient } from "./useApolloClient.js";
 
-export function useToolInput() {
+/**
+ * @deprecated Please use the `useToolInfo` hook. `useToolInput` will be removed
+ * in the next major version.
+ */
+export function useToolInput(): ToolInput | undefined {
   return useApolloClient()["appManager"].toolInput;
 }

package/src/openai/react/hooks/useToolName.ts

@@ -1,5 +1,10 @@
+import type { ToolName } from "../../../core/typeRegistration.js";
 import { useApolloClient } from "./useApolloClient.js";
 
-export const useToolName = () => {
+/**
+ * @deprecated Please use the `useToolInfo` hook. `useToolName` will be removed
+ * in the next major version.
+ */
+export const useToolName = (): ToolName | undefined => {
   return useApolloClient()["appManager"].toolName;
 };

package/src/openai/react/index.ts

@@ -1,6 +1,8 @@
 export { useApp } from "./hooks/useApp.js";
+export { useHostContext } from "./hooks/useHostContext.js";
 export { useToolName } from "./hooks/useToolName.js";
 export { useToolMetadata } from "./hooks/useToolMetadata.js";
 export { useToolInput } from "./hooks/useToolInput.js";
+export { useToolInfo } from "./hooks/useToolInfo.js";
 export { createHydrationUtils } from "./hooks/createHydrationUtils.js";
 export { useWidgetState } from "./hooks/useWidgetState.js";

package/src/react/index.mcp.ts

@@ -1,7 +1,9 @@
 export * from "./index.js";
 export {
   useApp,
+  useHostContext,
   useToolInput,
+  useToolInfo,
   createHydrationUtils,
   useToolMetadata,
   useToolName,

package/src/react/index.openai.ts

@@ -1,7 +1,9 @@
 export * from "./index.js";
 export {
   useApp,
+  useHostContext,
   useToolInput,
+  useToolInfo,
   createHydrationUtils,
   useToolMetadata,
   useToolName,

package/src/react/index.ts

@@ -9,6 +9,13 @@ export type { Reactive } from "./reactive.js";
 export const useApp =
   missingHook<typeof import("./index.mcp.js").useApp>("useApp");
 
+export const useHostContext =
+  missingHook<typeof import("./index.mcp.js").useHostContext>("useHostContext");
+
+/**
+ * @deprecated Please use the `useToolInfo` hook. `useToolInput` will be removed
+ * in the next major version.
+ */
 export const useToolInput =
   missingHook<typeof import("./index.mcp.js").useToolInput>("useToolInput");
 
@@ -17,9 +24,16 @@ export const useToolMetadata =
     "useToolMetadata"
   );
 
+/**
+ * @deprecated Please use the `useToolInfo` hook. `useToolName` will be removed
+ * in the next major version.
+ */
 export const useToolName =
   missingHook<typeof import("./index.mcp.js").useToolName>("useToolName");
 
+export const useToolInfo =
+  missingHook<typeof import("./index.mcp.js").useToolInfo>("useToolInfo");
+
 /** @experimental */
 export const createHydrationUtils = missingHook<
   typeof import("./index.mcp.js").createHydrationUtils

package/src/testing/internal/mcp/mockMcpHost.ts

@@ -2,6 +2,7 @@ import {
   LATEST_PROTOCOL_VERSION,
   type McpUiHostCapabilities,
   type McpUiHostContext,
+  type McpUiHostContextChangedNotification,
   type McpUiToolResultNotification,
   type McpUiToolInputNotification,
 } from "@modelcontextprotocol/ext-apps";
@@ -15,6 +16,9 @@ import { invariant, promiseWithResolvers } from "../../../utilities/index.js";
 export interface MockMcpHost extends Disposable {
   sendToolResult(params: McpUiToolResultNotification["params"]): Promise<void>;
   sendToolInput(params: McpUiToolInputNotification["params"]): Promise<void>;
+  sendHostContextChanged(
+    params: McpUiHostContextChangedNotification["params"]
+  ): Promise<void>;
   mockToolCall(
     name: string,
     handler: (params: CallToolRequest["params"]) => CallToolResult
@@ -166,6 +170,14 @@ export async function mockMcpHost(
         params,
       });
     },
+    async sendHostContextChanged(params) {
+      await initialized;
+      window.postMessage({
+        jsonrpc: "2.0",
+        method: "ui/notifications/host-context-changed",
+        params,
+      });
+    },
     mockToolCall(name, handler) {
       if (toolCallHandlers.has(name)) {
         console.warn(

package/src/testing/internal/utilities/mockApplicationManifest.ts

@@ -29,6 +29,7 @@ export function mockApplicationManifest(
     ],
     resource: "index.html",
     csp: {
+      baseUriDomains: [],
       resourceDomains: [],
       connectDomains: [],
       frameDomains: [],

package/src/tsconfig/core/tsconfig.json

@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
+    "allowArbitraryExtensions": true,
+    "resolveJsonModule": true,
     "moduleSuffixes": [".mcp", ".openai", ""]
   }
 }

package/src/tsconfig/mcp/tsconfig.json

@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
+    "allowArbitraryExtensions": true,
+    "resolveJsonModule": true,
     "customConditions": ["mcp"],
     "moduleSuffixes": [".mcp", ""]
   }

package/src/tsconfig/openai/tsconfig.json

@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
+    "allowArbitraryExtensions": true,
+    "resolveJsonModule": true,
     "customConditions": ["openai"],
     "types": ["@apollo/client-ai-apps/openai/globals"],
     "moduleSuffixes": [".openai", ""]

package/src/types/application-manifest.ts

@@ -48,6 +48,7 @@ export type ManifestExtraInput = {
 };
 
 export type ManifestCsp = {
+  baseUriDomains: string[];
   connectDomains: string[];
   frameDomains: string[];
   redirectDomains: string[];