@apollo/client-ai-apps 0.2.4 → 0.3.1

package/src/vite/application_manifest_plugin.ts

@@ -35,7 +35,9 @@ const getRawValue = (node: ValueNode): any => {
         return acc;
       }, {});
     default:
-      throw new Error(`Error when parsing directive values: unexpected type '${node.kind}'`);
+      throw new Error(
+        `Error when parsing directive values: unexpected type '${node.kind}'`
+      );
   }
 };
 
@@ -48,7 +50,9 @@ const getTypedDirectiveArgument = (
     return undefined;
   }
 
-  let argument = directiveArguments.find((directiveArgument) => directiveArgument.name.value === argumentName);
+  let argument = directiveArguments.find(
+    (directiveArgument) => directiveArgument.name.value === argumentName
+  );
 
   if (!argument) {
     return undefined;
@@ -80,39 +84,66 @@ export const ApplicationManifestPlugin = () => {
   const client = new ApolloClient({
     cache: clientCache,
     link: new ApolloLink((operation) => {
-      const body = print(removeClientDirective(sortTopLevelDefinitions(operation.query)));
+      const body = print(
+        removeClientDirective(sortTopLevelDefinitions(operation.query))
+      );
       const name = operation.operationName;
       const variables = (
-        operation.query.definitions.find((d) => d.kind === "OperationDefinition") as OperationDefinitionNode
+        operation.query.definitions.find(
+          (d) => d.kind === "OperationDefinition"
+        ) as OperationDefinitionNode
       ).variableDefinitions?.reduce(
-        (obj, varDef) => ({ ...obj, [varDef.variable.name.value]: getTypeName(varDef.type) }),
+        (obj, varDef) => ({
+          ...obj,
+          [varDef.variable.name.value]: getTypeName(varDef.type),
+        }),
         {}
       );
       const type = (
-        operation.query.definitions.find((d) => d.kind === "OperationDefinition") as OperationDefinitionNode
+        operation.query.definitions.find(
+          (d) => d.kind === "OperationDefinition"
+        ) as OperationDefinitionNode
       ).operation;
       const prefetch = (
-        operation.query.definitions.find((d) => d.kind === "OperationDefinition") as OperationDefinitionNode
+        operation.query.definitions.find(
+          (d) => d.kind === "OperationDefinition"
+        ) as OperationDefinitionNode
       ).directives?.some((d) => d.name.value === "prefetch");
       const id = createHash("sha256").update(body).digest("hex");
       // TODO: For now, you can only have 1 operation marked as prefetch. In the future, we'll likely support more than 1, and the "prefetchId" will be defined on the `@prefetch` itself as an argument
       const prefetchID = prefetch ? "__anonymous" : undefined;
 
       const tools = (
-        operation.query.definitions.find((d) => d.kind === "OperationDefinition") as OperationDefinitionNode
+        operation.query.definitions.find(
+          (d) => d.kind === "OperationDefinition"
+        ) as OperationDefinitionNode
       ).directives
         ?.filter((d) => d.name.value === "tool")
         .map((directive) => {
-          const name = getTypedDirectiveArgument("name", Kind.STRING, directive.arguments);
-          const description = getTypedDirectiveArgument("description", Kind.STRING, directive.arguments);
-          const extraInputs = getTypedDirectiveArgument("extraInputs", Kind.LIST, directive.arguments);
+          const name = getTypedDirectiveArgument(
+            "name",
+            Kind.STRING,
+            directive.arguments
+          );
+          const description = getTypedDirectiveArgument(
+            "description",
+            Kind.STRING,
+            directive.arguments
+          );
+          const extraInputs = getTypedDirectiveArgument(
+            "extraInputs",
+            Kind.LIST,
+            directive.arguments
+          );
 
           if (!name) {
             throw new Error("'name' argument must be supplied for @tool");
           }
 
           if (!description) {
-            throw new Error("'description' argument must be supplied for @tool");
+            throw new Error(
+              "'description' argument must be supplied for @tool"
+            );
           }
 
           return {
@@ -122,7 +153,9 @@ export const ApplicationManifestPlugin = () => {
           };
         });
 
-      return Observable.of({ data: { id, name, type, body, variables, prefetch, prefetchID, tools } });
+      return Observable.of({
+        data: { id, name, type, body, variables, prefetch, prefetchID, tools },
+      });
     }),
   });
 
@@ -146,16 +179,27 @@ export const ApplicationManifestPlugin = () => {
 
     const operations = [];
     for (const source of sources) {
-      const type = (source.node.definitions.find((d) => d.kind === "OperationDefinition") as OperationDefinitionNode)
-        .operation;
+      const type = (
+        source.node.definitions.find(
+          (d) => d.kind === "OperationDefinition"
+        ) as OperationDefinitionNode
+      ).operation;
 
       let result;
       if (type === "query") {
-        result = await client.query({ query: source.node, fetchPolicy: "no-cache" });
+        result = await client.query({
+          query: source.node,
+          fetchPolicy: "no-cache",
+        });
       } else if (type === "mutation") {
-        result = await client.mutate({ mutation: source.node, fetchPolicy: "no-cache" });
+        result = await client.mutate({
+          mutation: source.node,
+          fetchPolicy: "no-cache",
+        });
       } else {
-        throw new Error("Found an unsupported operation type. Only Query and Mutation are supported.");
+        throw new Error(
+          "Found an unsupported operation type. Only Query and Mutation are supported."
+        );
       }
       operations.push(result.data);
     }
@@ -168,7 +212,9 @@ export const ApplicationManifestPlugin = () => {
   };
 
   const generateManifest = async () => {
-    const operations = Array.from(cache.values()).flatMap((entry) => entry.operations);
+    const operations = Array.from(cache.values()).flatMap(
+      (entry) => entry.operations
+    );
     if (operations.filter((o) => o.prefetch).length > 1) {
       throw new Error(
         "Found multiple operations marked as `@prefetch`. You can only mark 1 operation with `@prefetch`."
@@ -199,7 +245,9 @@ export const ApplicationManifestPlugin = () => {
       name: packageJson.name,
       description: packageJson.description,
       hash: createHash("sha256").update(Date.now().toString()).digest("hex"),
-      operations: Array.from(cache.values()).flatMap((entry) => entry.operations),
+      operations: Array.from(cache.values()).flatMap(
+        (entry) => entry.operations
+      ),
       resource,
       csp: {
         connectDomains: packageJson.csp?.connectDomains ?? [],
@@ -208,7 +256,11 @@ export const ApplicationManifestPlugin = () => {
     };
 
     // Always write to build directory so the MCP server picks it up
-    const dest = path.resolve(root, config.build.outDir, ".application-manifest.json");
+    const dest = path.resolve(
+      root,
+      config.build.outDir,
+      ".application-manifest.json"
+    );
     mkdirSync(path.dirname(dest), { recursive: true });
     writeFileSync(dest, JSON.stringify(manifest));
 
@@ -279,8 +331,14 @@ export function sortTopLevelDefinitions(query: DocumentNode): DocumentNode {
     // non-executable definitions don't have to have names (even though any
     // DocumentNode actually passed here should only have executable
     // definitions).
-    const aName = a.kind === "OperationDefinition" || a.kind === "FragmentDefinition" ? a.name?.value ?? "" : "";
-    const bName = b.kind === "OperationDefinition" || b.kind === "FragmentDefinition" ? b.name?.value ?? "" : "";
+    const aName =
+      a.kind === "OperationDefinition" || a.kind === "FragmentDefinition" ?
+        (a.name?.value ?? "")
+      : "";
+    const bName =
+      b.kind === "OperationDefinition" || b.kind === "FragmentDefinition" ?
+        (b.name?.value ?? "")
+      : "";
 
     // Sort by name ascending.
     if (aName < bName) {
@@ -306,7 +364,9 @@ function removeClientDirective(doc: DocumentNode) {
     OperationDefinition(node) {
       return {
         ...node,
-        directives: node.directives?.filter((d) => d.name.value !== "prefetch" && d.name.value !== "tool"),
+        directives: node.directives?.filter(
+          (d) => d.name.value !== "prefetch" && d.name.value !== "tool"
+        ),
       };
     },
   });

package/vitest-setup.ts

@@ -1 +1,2 @@
 import "@testing-library/jest-dom/vitest";
+import "./src/testing/internal/matchers";

package/dist/apollo_client/client.d.ts

@@ -1,14 +0,0 @@
-import { ApolloClient } from "@apollo/client";
-import "../types/openai";
-import { ApplicationManifest } from "../types/application-manifest";
-type ExtendedApolloClientOptions = Omit<ApolloClient.Options, "link" | "cache"> & {
-    link?: ApolloClient.Options["link"];
-    cache?: ApolloClient.Options["cache"];
-    manifest: ApplicationManifest;
-};
-export declare class ExtendedApolloClient extends ApolloClient {
-    manifest: ApplicationManifest;
-    constructor(options: ExtendedApolloClientOptions);
-    prefetchData(): Promise<void>;
-}
-export {};

package/dist/apollo_client/provider.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-import { ExtendedApolloClient } from "./client";
-export declare const ExtendedApolloProvider: ({ children, client, }: React.PropsWithChildren<{
-    client: ExtendedApolloClient;
-}>) => React.JSX.Element;

package/src/apollo_client/client.ts

@@ -1,90 +0,0 @@
-import { ApolloClient, ApolloLink, InMemoryCache } from "@apollo/client";
-import * as Observable from "rxjs";
-import { selectHttpOptionsAndBody } from "@apollo/client/link/http";
-import { fallbackHttpConfig } from "@apollo/client/link/http";
-import { DocumentTransform } from "@apollo/client";
-import { removeDirectivesFromDocument } from "@apollo/client/utilities/internal";
-import { parse } from "graphql";
-import "../types/openai";
-import { ApplicationManifest } from "../types/application-manifest";
-
-// TODO: In the future if/when we support PQs again, do pqLink.concat(toolCallLink)
-// Commenting this out for now.
-//  import { sha256 } from "crypto-hash";
-// import { PersistedQueryLink } from "@apollo/client/link/persisted-queries";
-// const pqLink = new PersistedQueryLink({
-//   sha256: (queryString) => sha256(queryString),
-// });
-
-// Normally, ApolloClient uses an HttpLink and sends the graphql request over HTTP
-// In our case, we're are sending the graphql request over the "execute" tool call
-const toolCallLink = new ApolloLink((operation) => {
-  const context = operation.getContext();
-  const contextConfig = {
-    http: context.http,
-    options: context.fetchOptions,
-    credentials: context.credentials,
-    headers: context.headers,
-  };
-  const { query, variables } = selectHttpOptionsAndBody(operation, fallbackHttpConfig, contextConfig).body;
-
-  return Observable.from(window.openai.callTool("execute", { query, variables })).pipe(
-    Observable.map((result) => ({ data: result.structuredContent.data }))
-  );
-});
-
-// This allows us to extend the options with the "manifest" option AND make link/cache optional (they are normally required)
-type ExtendedApolloClientOptions = Omit<ApolloClient.Options, "link" | "cache"> & {
-  link?: ApolloClient.Options["link"];
-  cache?: ApolloClient.Options["cache"];
-  manifest: ApplicationManifest;
-};
-
-export class ExtendedApolloClient extends ApolloClient {
-  manifest: ApplicationManifest;
-
-  constructor(options: ExtendedApolloClientOptions) {
-    super({
-      link: toolCallLink,
-      cache: options.cache ?? new InMemoryCache(),
-      // Strip out the prefetch/tool directives so they don't get sent with the operation to the server
-      documentTransform: new DocumentTransform((document) => {
-        return removeDirectivesFromDocument([{ name: "prefetch" }, { name: "tool" }], document)!;
-      }),
-    });
-
-    this.manifest = options.manifest;
-  }
-
-  async prefetchData() {
-    // Write prefetched data to the cache
-    this.manifest.operations.forEach((operation) => {
-      if (operation.prefetch && operation.prefetchID && window.openai.toolOutput.prefetch?.[operation.prefetchID]) {
-        this.writeQuery({
-          query: parse(operation.body),
-          data: window.openai.toolOutput.prefetch[operation.prefetchID].data,
-        });
-      }
-
-      // If this operation has the tool that matches up with the tool that was executed, write the tool result to the cache
-      if (
-        operation.tools?.find(
-          (tool) => `${this.manifest.name}--${tool.name}` === window.openai.toolResponseMetadata.toolName
-        )
-      ) {
-        // We need to include the variables that were used as part of the tool call so that we get a proper cache entry
-        // However, we only want to include toolInput's that were graphql operation (ignore extraInputs)
-        const variables = Object.keys(window.openai.toolInput).reduce(
-          (obj, key) => (operation.variables[key] ? { ...obj, [key]: window.openai.toolInput[key] } : obj),
-          {}
-        );
-
-        this.writeQuery({
-          query: parse(operation.body),
-          data: window.openai.toolOutput.result.data,
-          variables,
-        });
-      }
-    });
-  }
-}

package/src/hooks/useCallTool.ts

@@ -1,8 +0,0 @@
-type UseCallToolResult = <K>(toolId: string, variables?: Record<string, unknown> | undefined) => Promise<K>;
-
-export const useCallTool = (): UseCallToolResult => {
-  const callTool = async (toolId: string, variables: Record<string, unknown> | undefined = {}) =>
-    await window.openai?.callTool(toolId, variables);
-
-  return callTool;
-};

package/src/hooks/useToolEffect.tsx

@@ -1,41 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useToolName } from "./useToolName";
-import { useToolInput } from "./useToolInput";
-
-type ToolUseState = {
-  appName: string;
-  hasNavigated: boolean;
-  setHasNavigated: (v: boolean) => void;
-};
-
-const ToolUseContext = React.createContext<ToolUseState | null>(null);
-
-export function ToolUseProvider({ children, appName }: { children: any; appName: string }) {
-  const [hasNavigated, setHasNavigated] = useState(false);
-
-  return (
-    <ToolUseContext.Provider value={{ hasNavigated, setHasNavigated, appName }}>{children}</ToolUseContext.Provider>
-  );
-}
-
-export const useToolEffect = (
-  toolName: string | string[],
-  effect: (toolInput: any) => void,
-  deps: React.DependencyList = []
-) => {
-  const ctx = React.useContext(ToolUseContext);
-  const fullToolName = useToolName();
-  const toolInput = useToolInput();
-  if (!ctx) throw new Error("useToolEffect must be used within ToolUseProvider");
-
-  const toolNames = Array.isArray(toolName) ? toolName : [toolName];
-
-  useEffect(() => {
-    const matches = toolNames.some((name) => fullToolName === `${ctx.appName}--${name}`);
-
-    if (!ctx.hasNavigated && matches) {
-      effect(toolInput);
-      ctx.setHasNavigated(true);
-    }
-  }, [ctx.hasNavigated, ctx.setHasNavigated, ctx.appName, toolNames, fullToolName, toolInput, ...deps]);
-};