@apollo/client-ai-apps 0.2.4 → 0.3.0

package/src/apollo_client/client.test.ts

@@ -2,6 +2,9 @@ import { expect, test, describe, vi } from "vitest";
 import { ExtendedApolloClient } from "./client";
 import { ApplicationManifest } from "../types/application-manifest";
 import { parse } from "graphql";
+import { ApolloLink, HttpLink, InMemoryCache } from "@apollo/client";
+import { ApolloClient } from "..";
+import { ToolCallLink } from "./link/ToolCallLink";
 
 describe("Client Basics", () => {
   test("Should execute tool call when client.query is called", async () => {
@@ -34,7 +37,8 @@ describe("Client Basics", () => {
       format: "apollo-ai-app-manifest",
       version: "1",
       name: "the-store",
-      description: "An online store selling a variety of high quality products across many different categories.",
+      description:
+        "An online store selling a variety of high quality products across many different categories.",
       hash: "f6a24922f6ad6ed8c2aa57baf3b8242ae5f38a09a6df3f2693077732434c4256",
       operations: [
         {
@@ -44,20 +48,32 @@ describe("Client Basics", () => {
           body: "query Product($id: ID!) {\n  product(id: $id) {\n    id\n    title\n    rating\n    price\n    description\n    images\n    __typename\n  }\n}",
           variables: { id: "ID" },
           prefetch: false,
-          tools: [{ name: "Get Product", description: "Shows the details page for a specific product." }],
+          tools: [
+            {
+              name: "Get Product",
+              description: "Shows the details page for a specific product.",
+            },
+          ],
         },
       ],
       resource: "index.html",
     };
 
     const client = new ExtendedApolloClient({
+      cache: new InMemoryCache(),
       manifest: manifest as ApplicationManifest,
     });
 
     const variables = { id: "1" };
-    await client.query({ query: parse(manifest.operations[0].body), variables });
+    await client.query({
+      query: parse(manifest.operations[0].body),
+      variables,
+    });
 
-    expect(window.openai.callTool).toBeCalledWith("execute", { query: manifest.operations[0].body, variables });
+    expect(window.openai.callTool).toBeCalledWith("execute", {
+      query: manifest.operations[0].body,
+      variables,
+    });
     expect(client.extract()).toMatchInlineSnapshot(`
       {
         "Product:1": {
@@ -110,7 +126,8 @@ describe("prefetchData", () => {
       format: "apollo-ai-app-manifest",
       version: "1",
       name: "the-store",
-      description: "An online store selling a variety of high quality products across many different categories.",
+      description:
+        "An online store selling a variety of high quality products across many different categories.",
       hash: "f6a24922f6ad6ed8c2aa57baf3b8242ae5f38a09a6df3f2693077732434c4256",
       operations: [
         {
@@ -120,13 +137,19 @@ describe("prefetchData", () => {
           body: "query Product($id: ID!) {\n  product(id: $id) {\n    id\n    title\n    rating\n    price\n    description\n    images\n    __typename\n  }\n}",
           variables: { id: "ID" },
           prefetch: false,
-          tools: [{ name: "Get Product", description: "Shows the details page for a specific product." }],
+          tools: [
+            {
+              name: "Get Product",
+              description: "Shows the details page for a specific product.",
+            },
+          ],
         },
       ],
       resource: "index.html",
     };
 
     const client = new ExtendedApolloClient({
+      cache: new InMemoryCache(),
       manifest: manifest as ApplicationManifest,
     });
     await client.prefetchData();
@@ -184,7 +207,8 @@ describe("prefetchData", () => {
       format: "apollo-ai-app-manifest",
       version: "1",
       name: "the-store",
-      description: "An online store selling a variety of high quality products across many different categories.",
+      description:
+        "An online store selling a variety of high quality products across many different categories.",
       hash: "f6a24922f6ad6ed8c2aa57baf3b8242ae5f38a09a6df3f2693077732434c4256",
       operations: [
         {
@@ -195,13 +219,19 @@ describe("prefetchData", () => {
           variables: {},
           prefetch: true,
           prefetchID: "__anonymous",
-          tools: [{ name: "Top Products", description: "Shows the currently highest rated products." }],
+          tools: [
+            {
+              name: "Top Products",
+              description: "Shows the currently highest rated products.",
+            },
+          ],
         },
       ],
       resource: "index.html",
     };
 
     const client = new ExtendedApolloClient({
+      cache: new InMemoryCache(),
       manifest: manifest as ApplicationManifest,
     });
     await client.prefetchData();
@@ -273,7 +303,8 @@ describe("prefetchData", () => {
       format: "apollo-ai-app-manifest",
       version: "1",
       name: "the-store",
-      description: "An online store selling a variety of high quality products across many different categories.",
+      description:
+        "An online store selling a variety of high quality products across many different categories.",
       hash: "f6a24922f6ad6ed8c2aa57baf3b8242ae5f38a09a6df3f2693077732434c4256",
       operations: [
         {
@@ -283,7 +314,12 @@ describe("prefetchData", () => {
           body: "query Product($id: ID!) {\n  product(id: $id) {\n    id\n    title\n    rating\n    price\n    description\n    images\n    __typename\n  }\n}",
           variables: { id: "ID" },
           prefetch: false,
-          tools: [{ name: "Get Product", description: "Shows the details page for a specific product." }],
+          tools: [
+            {
+              name: "Get Product",
+              description: "Shows the details page for a specific product.",
+            },
+          ],
         },
         {
           id: "cd0d52159b9003e791de97c6a76efa03d34fe00cee278d1a3f4bfcec5fb3e1e6",
@@ -293,13 +329,19 @@ describe("prefetchData", () => {
           variables: {},
           prefetch: true,
           prefetchID: "__anonymous",
-          tools: [{ name: "Top Products", description: "Shows the currently highest rated products." }],
+          tools: [
+            {
+              name: "Top Products",
+              description: "Shows the currently highest rated products.",
+            },
+          ],
         },
       ],
       resource: "index.html",
     };
 
     const client = new ExtendedApolloClient({
+      cache: new InMemoryCache(),
       manifest: manifest as ApplicationManifest,
     });
     await client.prefetchData();
@@ -367,7 +409,8 @@ describe("prefetchData", () => {
       format: "apollo-ai-app-manifest",
       version: "1",
       name: "the-store",
-      description: "An online store selling a variety of high quality products across many different categories.",
+      description:
+        "An online store selling a variety of high quality products across many different categories.",
       hash: "f6a24922f6ad6ed8c2aa57baf3b8242ae5f38a09a6df3f2693077732434c4256",
       operations: [
         {
@@ -377,13 +420,19 @@ describe("prefetchData", () => {
           body: "query Product($id: ID!) {\n  product(id: $id) {\n    id\n    title\n    rating\n    price\n    description\n    images\n    __typename\n  }\n}",
           variables: { id: "ID" },
           prefetch: false,
-          tools: [{ name: "Get Product", description: "Shows the details page for a specific product." }],
+          tools: [
+            {
+              name: "Get Product",
+              description: "Shows the details page for a specific product.",
+            },
+          ],
         },
       ],
       resource: "index.html",
     };
 
     const client = new ExtendedApolloClient({
+      cache: new InMemoryCache(),
       manifest: manifest as ApplicationManifest,
     });
     await client.prefetchData();
@@ -409,3 +458,167 @@ describe("prefetchData", () => {
     `);
   });
 });
+
+describe("custom links", () => {
+  test("allows for custom links provided to the constructor", async () => {
+    vi.stubGlobal("openai", {
+      toolInput: {},
+      toolOutput: {},
+      toolResponseMetadata: {
+        toolName: "the-store--Get Product",
+      },
+      callTool: vi.fn(async (name: string, args: Record<string, unknown>) => {
+        return {
+          structuredContent: {
+            data: {
+              product: {
+                id: "1",
+                title: "Pen",
+                rating: 5,
+                price: 1.0,
+                description: "Awesome pen",
+                images: [],
+                __typename: "Product",
+              },
+            },
+          },
+        };
+      }),
+    });
+
+    const manifest = createManifest();
+    const linkHandler = vi.fn<ApolloLink.RequestHandler>((operation, forward) =>
+      forward(operation)
+    );
+
+    const client = new ApolloClient({
+      manifest,
+      cache: new InMemoryCache(),
+      link: ApolloLink.from([new ApolloLink(linkHandler), new ToolCallLink()]),
+    });
+
+    const variables = { id: "1" };
+    const query = parse(manifest.operations[0].body);
+
+    await expect(client.query({ query, variables })).resolves.toStrictEqual({
+      data: {
+        product: {
+          id: "1",
+          title: "Pen",
+          rating: 5,
+          price: 1.0,
+          description: "Awesome pen",
+          images: [],
+          __typename: "Product",
+        },
+      },
+    });
+
+    expect(linkHandler).toHaveBeenCalledOnce();
+    expect(linkHandler).toHaveBeenCalledWith(
+      expect.objectContaining({ query, variables, operationType: "query" }),
+      expect.any(Function)
+    );
+  });
+
+  test("enforces ToolCallLink as terminating link", async () => {
+    const manifest = createManifest();
+    const expectedError = new Error(
+      "The terminating link must be a `ToolCallLink`. If you are using a `split` link, ensure the `right` branch uses a `ToolCallLink` as the terminating link."
+    );
+
+    expect(() => {
+      new ApolloClient({
+        manifest,
+        cache: new InMemoryCache(),
+        link: new HttpLink(),
+      });
+    }).toThrow(expectedError);
+
+    expect(() => {
+      new ApolloClient({
+        manifest,
+        cache: new InMemoryCache(),
+        link: new ApolloLink(),
+      });
+    }).toThrow(expectedError);
+
+    expect(() => {
+      new ApolloClient({
+        manifest,
+        cache: new InMemoryCache(),
+        link: ApolloLink.from([new ApolloLink(), new HttpLink()]),
+      });
+    }).toThrow(expectedError);
+
+    expect(() => {
+      new ApolloClient({
+        manifest,
+        cache: new InMemoryCache(),
+        link: ApolloLink.split(() => true, new ApolloLink(), new HttpLink()),
+      });
+    }).toThrow(expectedError);
+
+    expect(() => {
+      new ApolloClient({
+        manifest,
+        cache: new InMemoryCache(),
+        link: ApolloLink.split(() => true, new ToolCallLink(), new HttpLink()),
+      });
+    }).toThrow(expectedError);
+
+    // Allow you to use a custom terminating link for `split` links if the
+    // custom link is the `left` branch link.
+    expect(() => {
+      new ApolloClient({
+        manifest,
+        cache: new InMemoryCache(),
+        link: ApolloLink.split(() => true, new HttpLink(), new ToolCallLink()),
+      });
+    }).not.toThrow(expectedError);
+
+    expect(() => {
+      new ApolloClient({
+        manifest,
+        cache: new InMemoryCache(),
+        link: ApolloLink.split(
+          () => true,
+          new ToolCallLink(),
+          new ToolCallLink()
+        ),
+      });
+    }).not.toThrow();
+  });
+});
+
+function createManifest(
+  overrides?: Partial<ApplicationManifest>
+): ApplicationManifest {
+  return {
+    format: "apollo-ai-app-manifest",
+    version: "1",
+    name: "the-store",
+    description:
+      "An online store selling a variety of high quality products across many different categories.",
+    hash: "f6a24922f6ad6ed8c2aa57baf3b8242ae5f38a09a6df3f2693077732434c4256",
+    operations: [
+      {
+        id: "c43af26552874026c3fb346148c5795896aa2f3a872410a0a2621cffee25291c",
+        name: "Product",
+        type: "query",
+        body: "query Product($id: ID!) {\n  product(id: $id) {\n    id\n    title\n    rating\n    price\n    description\n    images\n    __typename\n  }\n}",
+        variables: { id: "ID" },
+        prefetch: false,
+        tools: [
+          {
+            name: "Get Product",
+            description: "Shows the details page for a specific product.",
+          },
+        ],
+      },
+    ],
+    resource: "index.html",
+    csp: { resourceDomains: [], connectDomains: [] },
+    ...overrides,
+  };
+}

package/src/apollo_client/client.ts

@@ -1,12 +1,12 @@
-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 type { ApolloLink } from "@apollo/client";
+import { ApolloClient } from "@apollo/client";
 import { DocumentTransform } from "@apollo/client";
 import { removeDirectivesFromDocument } from "@apollo/client/utilities/internal";
 import { parse } from "graphql";
+import { __DEV__ } from "@apollo/client/utilities/environment";
 import "../types/openai";
 import { ApplicationManifest } from "../types/application-manifest";
+import { ToolCallLink } from "./link/ToolCallLink";
 
 // TODO: In the future if/when we support PQs again, do pqLink.concat(toolCallLink)
 // Commenting this out for now.
@@ -16,27 +16,9 @@ import { ApplicationManifest } from "../types/application-manifest";
 //   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"> & {
+// This allows us to extend the options with the "manifest" option AND make link optional (it is normally required)
+type ExtendedApolloClientOptions = Omit<ApolloClient.Options, "link"> & {
   link?: ApolloClient.Options["link"];
-  cache?: ApolloClient.Options["cache"];
   manifest: ApplicationManifest;
 };
 
@@ -44,12 +26,21 @@ export class ExtendedApolloClient extends ApolloClient {
   manifest: ApplicationManifest;
 
   constructor(options: ExtendedApolloClientOptions) {
+    const link = options.link ?? new ToolCallLink();
+
+    if (__DEV__) {
+      validateTerminatingLink(link);
+    }
+
     super({
-      link: toolCallLink,
-      cache: options.cache ?? new InMemoryCache(),
+      ...options,
+      link,
       // 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)!;
+        return removeDirectivesFromDocument(
+          [{ name: "prefetch" }, { name: "tool" }],
+          document
+        )!;
       }),
     });
 
@@ -59,7 +50,11 @@ export class ExtendedApolloClient extends ApolloClient {
   async prefetchData() {
     // Write prefetched data to the cache
     this.manifest.operations.forEach((operation) => {
-      if (operation.prefetch && operation.prefetchID && window.openai.toolOutput.prefetch?.[operation.prefetchID]) {
+      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,
@@ -69,13 +64,18 @@ export class ExtendedApolloClient extends ApolloClient {
       // 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
+          (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),
+          (obj, key) =>
+            operation.variables[key] ?
+              { ...obj, [key]: window.openai.toolInput[key] }
+            : obj,
           {}
         );
 
@@ -88,3 +88,17 @@ export class ExtendedApolloClient extends ApolloClient {
     });
   }
 }
+
+function validateTerminatingLink(link: ApolloLink) {
+  let terminatingLink = link;
+
+  while (terminatingLink.right) {
+    terminatingLink = terminatingLink.right;
+  }
+
+  if (terminatingLink.constructor.name !== "ToolCallLink") {
+    throw new Error(
+      "The terminating link must be a `ToolCallLink`. If you are using a `split` link, ensure the `right` branch uses a `ToolCallLink` as the terminating link."
+    );
+  }
+}

package/src/apollo_client/link/ToolCallLink.ts

@@ -0,0 +1,49 @@
+import { ApolloLink, Observable } from "@apollo/client";
+import { from, map } from "rxjs";
+import {
+  fallbackHttpConfig,
+  selectHttpOptionsAndBody,
+} from "@apollo/client/link/http";
+
+/**
+ * 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 Provding 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 {
+  request(operation: ApolloLink.Operation): Observable<ApolloLink.Result> {
+    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 from(window.openai.callTool("execute", { query, variables })).pipe(
+      map((result) => ({ data: result.structuredContent.data }))
+    );
+  }
+}

package/src/apollo_client/provider.tsx

@@ -26,7 +26,13 @@ export const ExtendedApolloProvider = ({
     if (window.openai?.toolOutput) {
       window.dispatchEvent(new CustomEvent(SET_GLOBALS_EVENT_TYPE));
     }
-  }, [setHasPreloaded]);
 
-  return hasPreloaded ? <ApolloProvider client={client}>{children}</ApolloProvider> : null;
+    return () => {
+      window.removeEventListener(SET_GLOBALS_EVENT_TYPE, prefetchData);
+    };
+  }, []);
+
+  return hasPreloaded ?
+      <ApolloProvider client={client}>{children}</ApolloProvider>
+    : null;
 };

package/src/hooks/useCallTool.ts

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

package/src/hooks/useOpenAiGlobal.test.ts

@@ -17,7 +17,9 @@ test("Should update value when globals are updated and event it triggered", asyn
     });
     window.dispatchEvent(
       new CustomEvent(SET_GLOBALS_EVENT_TYPE, {
-        detail: { globals: { toolResponseMetadata: { toolName: "my-other-tool" } } },
+        detail: {
+          globals: { toolResponseMetadata: { toolName: "my-other-tool" } },
+        },
       })
     );
   });

package/src/hooks/useOpenAiGlobal.ts

@@ -1,7 +1,13 @@
 import { useSyncExternalStore } from "react";
-import { SET_GLOBALS_EVENT_TYPE, SetGlobalsEvent, OpenAiGlobals } from "../types/openai";
+import {
+  SET_GLOBALS_EVENT_TYPE,
+  SetGlobalsEvent,
+  OpenAiGlobals,
+} from "../types/openai";
 
-export function useOpenAiGlobal<K extends keyof OpenAiGlobals>(key: K): OpenAiGlobals[K] {
+export function useOpenAiGlobal<K extends keyof OpenAiGlobals>(
+  key: K
+): OpenAiGlobals[K] {
   return useSyncExternalStore(
     (onChange) => {
       const handleSetGlobal = (event: SetGlobalsEvent) => {

package/src/hooks/useSendFollowUpMessage.test.ts

@@ -9,5 +9,7 @@ test("Should set display mode when returned function is called", async () => {
   const sendFollowUpMessage = useSendFollowUpMessage();
   await sendFollowUpMessage("Do a cool thing!");
 
-  expect(window.openai.sendFollowUpMessage).toBeCalledWith({ prompt: "Do a cool thing!" });
+  expect(window.openai.sendFollowUpMessage).toBeCalledWith({
+    prompt: "Do a cool thing!",
+  });
 });

package/src/hooks/useToolEffect.test.tsx

@@ -7,9 +7,13 @@ test("Should trigger effect when tool name matches toolResponseMetadata", async
     toolResponseMetadata: { toolName: "my-app--my-tool" },
   });
   const navigate = vi.fn();
-  const wrapper = ({ children }: { children: any }) => <ToolUseProvider appName="my-app">{children}</ToolUseProvider>;
+  const wrapper = ({ children }: { children: any }) => (
+    <ToolUseProvider appName="my-app">{children}</ToolUseProvider>
+  );
 
-  renderHook(() => useToolEffect("my-tool", () => navigate(), [navigate]), { wrapper });
+  renderHook(() => useToolEffect("my-tool", () => navigate(), [navigate]), {
+    wrapper,
+  });
 
   expect(navigate).toBeCalled();
 });
@@ -19,9 +23,17 @@ test("Should trigger effect when one of multiple tool name matches toolResponseM
     toolResponseMetadata: { toolName: "my-app--my-tool" },
   });
   const navigate = vi.fn();
-  const wrapper = ({ children }: { children: any }) => <ToolUseProvider appName="my-app">{children}</ToolUseProvider>;
+  const wrapper = ({ children }: { children: any }) => (
+    <ToolUseProvider appName="my-app">{children}</ToolUseProvider>
+  );
 
-  renderHook(() => useToolEffect(["my-tool", "my-similar-tool"], () => navigate(), [navigate]), { wrapper });
+  renderHook(
+    () =>
+      useToolEffect(["my-tool", "my-similar-tool"], () => navigate(), [
+        navigate,
+      ]),
+    { wrapper }
+  );
 
   expect(navigate).toBeCalled();
 });
@@ -31,9 +43,13 @@ test("Should not trigger effect when tool name does not match toolResponseMetada
     toolResponseMetadata: { toolName: "my-app--my-other-tool" },
   });
   const navigate = vi.fn();
-  const wrapper = ({ children }: { children: any }) => <ToolUseProvider appName="my-app">{children}</ToolUseProvider>;
+  const wrapper = ({ children }: { children: any }) => (
+    <ToolUseProvider appName="my-app">{children}</ToolUseProvider>
+  );
 
-  renderHook(() => useToolEffect("my-tool", () => navigate(), [navigate]), { wrapper });
+  renderHook(() => useToolEffect("my-tool", () => navigate(), [navigate]), {
+    wrapper,
+  });
 
   expect(navigate).not.toBeCalled();
 });
@@ -44,7 +60,7 @@ test("Should throw an error when used outside of a ToolUseProvider", async () =>
   });
   const navigate = vi.fn();
 
-  expect(() => renderHook(() => useToolEffect("my-tool", () => navigate(), [navigate]))).toThrowError(
-    "useToolEffect must be used within ToolUseProvider"
-  );
+  expect(() =>
+    renderHook(() => useToolEffect("my-tool", () => navigate(), [navigate]))
+  ).toThrowError("useToolEffect must be used within ToolUseProvider");
 });