@apollo/client-ai-apps 0.6.4 → 0.7.0

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

@@ -1,46 +0,0 @@
-import { test, expect } from "vitest";
-import {
-  disableActEnvironment,
-  renderHookToSnapshotStream,
-} from "@testing-library/react-render-stream";
-import { Suspense } from "react";
-import { InMemoryCache } from "@apollo/client";
-import { App } from "@modelcontextprotocol/ext-apps";
-
-import { useApp } from "../useApp.js";
-import { ApolloClient } from "../../../core/ApolloClient.js";
-import {
-  mockApplicationManifest,
-  mockMcpHost,
-  spyOnConsole,
-} from "../../../../testing/internal/index.js";
-import { ApolloProvider } from "../../../../react/ApolloProvider.js";
-
-test("returns app instance created by ApolloClient", async () => {
-  using _ = spyOnConsole("debug");
-  const client = new ApolloClient({
-    cache: new InMemoryCache(),
-    manifest: mockApplicationManifest(),
-  });
-
-  using host = await mockMcpHost();
-  host.onCleanup(() => client.stop());
-
-  host.sendToolInput({ arguments: {} });
-  host.sendToolResult({
-    _meta: { toolName: "Test" },
-    content: [],
-    structuredContent: {},
-  });
-
-  using _disabledAct = disableActEnvironment();
-  const { takeSnapshot } = await renderHookToSnapshotStream(() => useApp(), {
-    wrapper: ({ children }) => (
-      <Suspense>
-        <ApolloProvider client={client}>{children}</ApolloProvider>
-      </Suspense>
-    ),
-  });
-
-  await expect(takeSnapshot()).resolves.toBeInstanceOf(App);
-});

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

@@ -1,95 +0,0 @@
-import { expect, test } from "vitest";
-import { InMemoryCache } from "@apollo/client";
-import {
-  graphqlToolResult,
-  minimalHostContextWithToolName,
-  mockApplicationManifest,
-  mockMcpHost,
-  spyOnConsole,
-} from "../../../../testing/internal/index.js";
-import { ApolloClient } from "../../../core/ApolloClient.js";
-import {
-  disableActEnvironment,
-  renderHookToSnapshotStream,
-} from "@testing-library/react-render-stream";
-import { useHostContext } from "../useHostContext.js";
-import { ApolloProvider } from "../../../../react/ApolloProvider.js";
-
-test("returns the host context from the host", async () => {
-  using _ = spyOnConsole("debug");
-  const client = new ApolloClient({
-    cache: new InMemoryCache(),
-    manifest: mockApplicationManifest(),
-  });
-
-  using host = await mockMcpHost({
-    hostContext: {
-      ...minimalHostContextWithToolName("GetProduct"),
-      theme: "light",
-    },
-  });
-  host.onCleanup(() => client.stop());
-
-  host.sendToolInput({ arguments: {} });
-  host.sendToolResult(graphqlToolResult({ data: { product: null } }));
-
-  using _disabledAct = disableActEnvironment();
-  const { takeSnapshot } = await renderHookToSnapshotStream(
-    () => useHostContext(),
-    {
-      wrapper: ({ children }) => (
-        <ApolloProvider client={client}>{children}</ApolloProvider>
-      ),
-    }
-  );
-
-  await expect(takeSnapshot()).resolves.toStrictEqual({
-    ...minimalHostContextWithToolName("GetProduct"),
-    theme: "light",
-  });
-
-  await expect(takeSnapshot).not.toRerender();
-});
-
-test("rerenders when the host context changes", async () => {
-  using _ = spyOnConsole("debug");
-  const client = new ApolloClient({
-    cache: new InMemoryCache(),
-    manifest: mockApplicationManifest(),
-  });
-
-  using host = await mockMcpHost({
-    hostContext: {
-      ...minimalHostContextWithToolName("GetProduct"),
-      theme: "light",
-    },
-  });
-  host.onCleanup(() => client.stop());
-
-  host.sendToolInput({ arguments: {} });
-  host.sendToolResult(graphqlToolResult({ data: { product: null } }));
-
-  using _disabledAct = disableActEnvironment();
-  const { takeSnapshot } = await renderHookToSnapshotStream(
-    () => useHostContext(),
-    {
-      wrapper: ({ children }) => (
-        <ApolloProvider client={client}>{children}</ApolloProvider>
-      ),
-    }
-  );
-
-  await expect(takeSnapshot()).resolves.toStrictEqual({
-    ...minimalHostContextWithToolName("GetProduct"),
-    theme: "light",
-  });
-
-  host.sendHostContextChanged({ theme: "dark" });
-
-  await expect(takeSnapshot()).resolves.toStrictEqual({
-    ...minimalHostContextWithToolName("GetProduct"),
-    theme: "dark",
-  });
-
-  await expect(takeSnapshot).not.toRerender();
-});

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

@@ -1,53 +0,0 @@
-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/__tests__/useToolInput.test.tsx

@@ -1,50 +0,0 @@
-import { test, expect } from "vitest";
-import {
-  disableActEnvironment,
-  renderHookToSnapshotStream,
-} from "@testing-library/react-render-stream";
-import { Suspense } from "react";
-import { InMemoryCache } from "@apollo/client";
-
-import { useToolInput } from "../useToolInput.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 the tool input from the MCP host", 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(
-    () => useToolInput(),
-    {
-      wrapper: ({ children }) => (
-        <Suspense>
-          <ApolloProvider client={client}>{children}</ApolloProvider>
-        </Suspense>
-      ),
-    }
-  );
-
-  await expect(takeSnapshot()).resolves.toEqual({ id: "1" });
-
-  await expect(takeSnapshot).not.toRerender();
-});

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

@@ -1,53 +0,0 @@
-import { test, expect } from "vitest";
-import {
-  disableActEnvironment,
-  renderHookToSnapshotStream,
-} from "@testing-library/react-render-stream";
-import { Suspense } from "react";
-import { InMemoryCache } from "@apollo/client";
-
-import { useToolMetadata } from "../useToolMetadata.js";
-import { ApolloClient } from "../../../core/ApolloClient.js";
-import {
-  mockApplicationManifest,
-  mockMcpHost,
-  spyOnConsole,
-} from "../../../../testing/internal/index.js";
-import { ApolloProvider } from "../../../../react/ApolloProvider.js";
-
-test("returns the tool metadata from the MCP host", async () => {
-  using _ = spyOnConsole("debug");
-  const client = new ApolloClient({
-    cache: new InMemoryCache(),
-    manifest: mockApplicationManifest(),
-  });
-
-  using host = await mockMcpHost();
-  host.onCleanup(() => client.stop());
-
-  host.sendToolInput({ arguments: {} });
-  host.sendToolResult({
-    _meta: { toolName: "TestTool", customField: "customValue" },
-    content: [],
-    structuredContent: {},
-  });
-
-  using _disabledAct = disableActEnvironment();
-  const { takeSnapshot } = await renderHookToSnapshotStream(
-    () => useToolMetadata(),
-    {
-      wrapper: ({ children }) => (
-        <Suspense>
-          <ApolloProvider client={client}>{children}</ApolloProvider>
-        </Suspense>
-      ),
-    }
-  );
-
-  await expect(takeSnapshot()).resolves.toEqual({
-    toolName: "TestTool",
-    customField: "customValue",
-  });
-
-  await expect(takeSnapshot).not.toRerender();
-});

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

@@ -1,50 +0,0 @@
-import { test, expect } from "vitest";
-import {
-  disableActEnvironment,
-  renderHookToSnapshotStream,
-} from "@testing-library/react-render-stream";
-import { Suspense } from "react";
-import { InMemoryCache } from "@apollo/client";
-
-import { useToolName } from "../useToolName.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 the tool name from the MCP host", 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: {} });
-  host.sendToolResult(graphqlToolResult({ data: { product: null } }));
-
-  using _disabledAct = disableActEnvironment();
-  const { takeSnapshot } = await renderHookToSnapshotStream(
-    () => useToolName(),
-    {
-      wrapper: ({ children }) => (
-        <Suspense>
-          <ApolloProvider client={client}>{children}</ApolloProvider>
-        </Suspense>
-      ),
-    }
-  );
-
-  await expect(takeSnapshot()).resolves.toBe("GetProduct");
-
-  await expect(takeSnapshot).not.toRerender();
-});

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

@@ -1,14 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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,10 +0,0 @@
-import type { ToolInput } from "../../../core/typeRegistration.js";
-import { useApolloClient } from "./useApolloClient.js";
-
-/**
- * @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/useToolMetadata.ts

@@ -1,5 +0,0 @@
-import { useApolloClient } from "./useApolloClient.js";
-
-export function useToolMetadata() {
-  return useApolloClient()["appManager"].toolMetadata;
-}

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

@@ -1,10 +0,0 @@
-import type { ToolName } from "../../../core/typeRegistration.js";
-import { useApolloClient } from "./useApolloClient.js";
-
-/**
- * @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,7 +0,0 @@
-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,139 +0,0 @@
-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";
-import type { DocumentNode, OperationVariables } from "@apollo/client";
-import { print } from "@apollo/client/utilities";
-import { cacheAsync, promiseWithResolvers } from "../../utilities";
-import type { ApolloMcpServerApps } from "../../core/types";
-
-type ExecuteQueryCallToolResult = Omit<CallToolResult, "structuredContent"> & {
-  structuredContent: FormattedExecutionResult;
-};
-
-/** @internal */
-export class McpAppManager {
-  readonly app: App;
-
-  #toolName: string | undefined;
-  #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 });
-  }
-
-  get toolName() {
-    return this.#toolName;
-  }
-
-  get toolMetadata() {
-    return this.#toolMetadata;
-  }
-
-  get toolInput() {
-    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>();
-
-    this.app.ontoolresult = (params) => {
-      toolResult.resolve(
-        params as unknown as ApolloMcpServerApps.CallToolResult
-      );
-    };
-
-    this.app.onhostcontextchanged = (params) => {
-      this.#hostContextCallbacks.forEach((cb) => cb(params));
-    };
-
-    await this.connectToHost();
-
-    // After a page refresh, OpenAI does not re-send `ui/notifications/tool-result`.
-    // Instead, the tool result is available immediately via `window.openai.toolOutput`.
-    // If it's already set, resolve the promise now rather than waiting for the
-    // notification that will never arrive.
-    if (window.openai.toolOutput !== null) {
-      toolResult.resolve({
-        structuredContent: window.openai.toolOutput,
-        content: [],
-      });
-    }
-
-    const { structuredContent } = await toolResult.promise;
-
-    this.#toolName = this.app.getHostContext()?.toolInfo?.tool.name;
-
-    // OpenAI is not consistent about sending `ui/notifications/tool-input`.
-    // Sometimes it doesn't send at all, other times it sends more than once
-    // before we get the tool result (which should always happen and at most
-    // once according to the spec). Rather than relying on the
-    // `ui/notifications/tool-input` notification to set the tool input value,
-    // we read from `window.openai.toolInput so that we have the most recent
-    // set value.
-    //
-    // When OpenAI fixes this issue and sends `ui/notifications/tool-input`
-    // consistently according to the MCP Apps specification, this can be
-    // reverted to use the `app.ontoolinput` callback.
-    this.#toolInput = window.openai.toolInput;
-
-    // OpenAI doesn't provide access to `_meta`, so we need to use
-    // window.openai.toolResponseMetadata directly
-    this.#toolMetadata = window.openai.toolResponseMetadata;
-
-    return {
-      ...structuredContent,
-      toolName: this.toolName,
-      args: this.toolInput,
-    };
-  });
-
-  close() {
-    return this.app.close();
-  }
-
-  async executeQuery({
-    query,
-    variables,
-  }: {
-    query: DocumentNode;
-    variables: OperationVariables | undefined;
-  }) {
-    const result = (await this.app.callServerTool({
-      name: "execute",
-      arguments: { query: print(query), variables },
-    })) as ExecuteQueryCallToolResult;
-
-    return result.structuredContent;
-  }
-
-  private async connectToHost() {
-    try {
-      return await this.app.connect(
-        new PostMessageTransport(window.parent, window.parent)
-      );
-    } catch (e) {
-      const error = e instanceof Error ? e : new Error("Failed to connect");
-
-      throw error;
-    }
-  }
-}

package/src/openai/link/ToolCallLink.ts

@@ -1,40 +0,0 @@
-import { ApolloLink, Observable } from "@apollo/client";
-import { from } from "rxjs";
-import type { ApolloClient as OpenAiApolloClient } from "../core/ApolloClient";
-
-/**
- * A terminating link that sends a GraphQL request through an agent tool call.
- * When providing a custom link chain to `ApolloClient`, `ApolloClient` will
- * validate that the terminating link is an instance of this link.
- *
- * @example Providing a custom link chain
- *
- * ```ts
- * import { ApolloLink } from "@apollo/client";
- * import { ApolloClient, ToolCallLink } from "@apollo/client-ai-apps";
- *
- * const link = ApolloLink.from([
- *   ...otherLinks,
- *   new ToolCallLink()
- * ]);
- *
- * const client = new ApolloClient({
- *   link,
- *   // ...
- * });
- * ```
- */
-export class ToolCallLink extends ApolloLink {
-  readonly name = "ToolCallLink";
-
-  request(operation: ApolloLink.Operation): Observable<ApolloLink.Result> {
-    const client = operation.client as OpenAiApolloClient;
-
-    return from(
-      client["appManager"].executeQuery({
-        query: operation.query,
-        variables: operation.variables,
-      })
-    );
-  }
-}