@apollo/client-ai-apps 0.7.2 → 0.7.3

package/.github/workflows/pr.yaml

@@ -80,6 +80,41 @@ jobs:
         shell: bash
         run: npm test -- --coverage
 
+  integration-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24.x
+
+      - name: Install root dependencies
+        run: npm ci
+
+      - name: Install integration tests dependencies
+        run: npm ci
+        working-directory: integration-tests
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+        working-directory: integration-tests
+
+      - name: Run integration tests
+        run: npm test
+        working-directory: integration-tests
+
+      - name: Upload Playwright report
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: integration-tests/playwright-report
+          retention-days: 7
+
   arethetypeswrong:
     name: Are the types wrong
     runs-on: ubuntu-latest

package/.github/workflows/prep-release.yml

@@ -12,13 +12,14 @@ jobs:
   prepare-release:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       # We need to setup node because knope runs `npm run format` so we need to install prettier via npm
       - name: Set up Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version: 24.x
+          package-manager-cache: false
 
       - name: Install dependencies
         run: npm ci
@@ -28,7 +29,7 @@ jobs:
           git config --global user.name GitHub Actions
           git config user.email github-actions@github.com
 
-      - uses: knope-dev/action@v2.1.0
+      - uses: knope-dev/action@19617851f9f13ab2f27a05989c55efb18aca3675 # v2.1.2
         with:
           version: 0.22.0
 

package/.github/workflows/release.yaml

@@ -17,13 +17,16 @@ jobs:
     if: github.repository == 'apollographql/apollo-client-ai-apps' && (github.event.pull_request.merged == true && startsWith(github.event.pull_request.head.ref, 'release/'))
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
 
-      - name: Setup Node.js 20.x
-        uses: actions/setup-node@v4
         with:
-          node-version: ">=23.6.0"
+          node-version: 24.x
           registry-url: "https://registry.npmjs.org/"
+          package-manager-cache: false
+
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
@@ -40,7 +43,7 @@ jobs:
           git config --global user.name GitHub Actions
           git config user.email github-actions@github.com
 
-      - uses: knope-dev/action@v2.1.0
+      - uses: knope-dev/action@19617851f9f13ab2f27a05989c55efb18aca3675 # v2.1.2
         with:
           version: 0.22.0
 

package/.github/workflows/verify-changeset.yml

@@ -18,7 +18,7 @@ jobs:
       contents: read
     steps:
       - name: Verify changeset included
-        uses: actions/github-script@v7
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7.1.0
         with:
           script: |
             const dir = '.changeset/';
@@ -38,7 +38,7 @@ jobs:
             }
             core.setOutput('ok', ok ? 'true' : 'false');
       - name: Add or update changeset comment on failure
-        uses: actions/github-script@v7
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7.1.0
         if: failure()
         with:
           script: |
@@ -75,7 +75,7 @@ jobs:
             }
 
       - name: Add or update changeset comment on success
-        uses: actions/github-script@v7
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7.1.0
         if: success()
         with:
           script: |
@@ -116,7 +116,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Add or update comment to show skipped
-        uses: actions/github-script@v7
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7.1.0
         with:
           script: |
             const pr = context.payload.pull_request;

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.7.3 (2026-05-13)
+
+### Fixes
+
+#### Fix tool match when `@tool` doesn't use arguments
+
+Fix an issue when using `@tool` without arguments where `useHydratedVariables` doesn't match against the tool correctly which causes mismatches in intended query result.
+
 ## 0.7.2 (2026-04-17)
 
 ### Fixes

package/dist/utilities/getToolNamesFromDocument.d.ts

@@ -1,3 +1,3 @@
 import { type DocumentNode } from "graphql";
-export declare function getToolNamesFromDocument(document: DocumentNode): Set<string>;
+export declare function getToolNamesFromDocument(document: DocumentNode): Set<string | undefined>;
 //# sourceMappingURL=getToolNamesFromDocument.d.ts.map

package/dist/utilities/getToolNamesFromDocument.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getToolNamesFromDocument.d.ts","sourceRoot":"","sources":["../../src/utilities/getToolNamesFromDocument.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AAElD,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,YAAY,eAW9D"}
+{"version":3,"file":"getToolNamesFromDocument.d.ts","sourceRoot":"","sources":["../../src/utilities/getToolNamesFromDocument.ts"],"names":[],"mappings":"AACA,OAAO,EAA4B,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AAEtE,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,YAAY,2BAkB9D"}

package/dist/utilities/getToolNamesFromDocument.js

@@ -2,11 +2,20 @@ import { getOperationDefinition } from "@apollo/client/utilities/internal";
 import { Kind } from "graphql";
 export function getToolNamesFromDocument(document) {
     const operationDef = getOperationDefinition(document);
-    return new Set(operationDef?.directives
-        ?.filter((d) => d.name.value === "tool")
-        .flatMap((d) => {
-        const nameArg = d.arguments?.find((arg) => arg.name.value === "name");
-        return nameArg?.value.kind === Kind.STRING ? [nameArg.value.value] : [];
+    const operationName = operationDef?.name?.value;
+    const toolDirectives = operationDef?.directives?.filter((d) => d.name.value === "tool") ?? [];
+    if (toolDirectives.length === 1) {
+        return new Set([
+            getToolNameFromDirective(toolDirectives[0]) ?? operationName,
+        ]);
+    }
+    return new Set(toolDirectives.flatMap((d) => {
+        const name = getToolNameFromDirective(d);
+        return name ? [name] : [];
     }));
 }
+function getToolNameFromDirective(directive) {
+    const nameArg = directive.arguments?.find((arg) => arg.name.value === "name");
+    return nameArg?.value.kind === Kind.STRING ? nameArg.value.value : undefined;
+}
 //# sourceMappingURL=getToolNamesFromDocument.js.map

package/dist/utilities/getToolNamesFromDocument.js.map

@@ -1 +1 @@
-{"version":3,"file":"getToolNamesFromDocument.js","sourceRoot":"","sources":["../../src/utilities/getToolNamesFromDocument.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,IAAI,EAAqB,MAAM,SAAS,CAAC;AAElD,MAAM,UAAU,wBAAwB,CAAC,QAAsB;IAC7D,MAAM,YAAY,GAAG,sBAAsB,CAAC,QAAQ,CAAC,CAAC;IAEtD,OAAO,IAAI,GAAG,CACZ,YAAY,EAAE,UAAU;QACtB,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC;SACvC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;QACb,MAAM,OAAO,GAAG,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC;QACtE,OAAO,OAAO,EAAE,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1E,CAAC,CAAC,CACL,CAAC;AACJ,CAAC","sourcesContent":["import { getOperationDefinition } from \"@apollo/client/utilities/internal\";\nimport { Kind, type DocumentNode } from \"graphql\";\n\nexport function getToolNamesFromDocument(document: DocumentNode) {\n  const operationDef = getOperationDefinition(document);\n\n  return new Set(\n    operationDef?.directives\n      ?.filter((d) => d.name.value === \"tool\")\n      .flatMap((d) => {\n        const nameArg = d.arguments?.find((arg) => arg.name.value === \"name\");\n        return nameArg?.value.kind === Kind.STRING ? [nameArg.value.value] : [];\n      })\n  );\n}\n"]}
+{"version":3,"file":"getToolNamesFromDocument.js","sourceRoot":"","sources":["../../src/utilities/getToolNamesFromDocument.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,IAAI,EAAyC,MAAM,SAAS,CAAC;AAEtE,MAAM,UAAU,wBAAwB,CAAC,QAAsB;IAC7D,MAAM,YAAY,GAAG,sBAAsB,CAAC,QAAQ,CAAC,CAAC;IACtD,MAAM,aAAa,GAAG,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC;IAChD,MAAM,cAAc,GAClB,YAAY,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,IAAI,EAAE,CAAC;IAEzE,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAChC,OAAO,IAAI,GAAG,CAAC;YACb,wBAAwB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,IAAI,aAAa;SAC7D,CAAC,CAAC;IACL,CAAC;IAED,OAAO,IAAI,GAAG,CACZ,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;QAC3B,MAAM,IAAI,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC;QACzC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,CAAC,CAAC,CACH,CAAC;AACJ,CAAC;AAED,SAAS,wBAAwB,CAAC,SAAwB;IACxD,MAAM,OAAO,GAAG,SAAS,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC;IAC9E,OAAO,OAAO,EAAE,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;AAC/E,CAAC","sourcesContent":["import { getOperationDefinition } from \"@apollo/client/utilities/internal\";\nimport { Kind, type DirectiveNode, type DocumentNode } from \"graphql\";\n\nexport function getToolNamesFromDocument(document: DocumentNode) {\n  const operationDef = getOperationDefinition(document);\n  const operationName = operationDef?.name?.value;\n  const toolDirectives =\n    operationDef?.directives?.filter((d) => d.name.value === \"tool\") ?? [];\n\n  if (toolDirectives.length === 1) {\n    return new Set([\n      getToolNameFromDirective(toolDirectives[0]) ?? operationName,\n    ]);\n  }\n\n  return new Set(\n    toolDirectives.flatMap((d) => {\n      const name = getToolNameFromDirective(d);\n      return name ? [name] : [];\n    })\n  );\n}\n\nfunction getToolNameFromDirective(directive: DirectiveNode) {\n  const nameArg = directive.arguments?.find((arg) => arg.name.value === \"name\");\n  return nameArg?.value.kind === Kind.STRING ? nameArg.value.value : undefined;\n}\n"]}

package/integration-tests/docker-compose.yml

@@ -0,0 +1,30 @@
+services:
+  graphql:
+    build: ./graphql-server
+    ports:
+      - "4000:4000"
+    volumes:
+      - ./schema.graphql:/data/schema.graphql
+    healthcheck:
+      test:
+        [
+          "CMD-SHELL",
+          'node -e "fetch(''http://localhost:4000'', {method: ''POST'', headers: {''content-type'': ''application/json''}, body: JSON.stringify({query: ''{__typename}''})}).then(r => r.ok ? process.exit(0) : process.exit(1)).catch(() => process.exit(1))"',
+        ]
+      interval: 5s
+      timeout: 3s
+      retries: 5
+      start_period: 10s
+
+  mcp-server:
+    image: ghcr.io/apollographql/apollo-mcp-server:latest
+    ports:
+      - "8000:8000"
+    volumes:
+      - ./mcp-config.yaml:/config.yaml
+      - ./schema.graphql:/data/schema.graphql
+      - ./apps:/data/apps
+    command: ["/config.yaml"]
+    depends_on:
+      graphql:
+        condition: service_healthy

package/integration-tests/global-teardown.js

@@ -0,0 +1,9 @@
+import { execSync } from "child_process";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default function globalTeardown() {
+  execSync("docker compose down", { cwd: __dirname });
+}

package/integration-tests/graphql-server/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:22-slim
+
+WORKDIR /app
+
+COPY package.json ./
+RUN npm install
+
+COPY server.ts ./
+
+EXPOSE 4000
+
+CMD ["node_modules/.bin/tsx", "server.ts"]

package/integration-tests/graphql-server/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "integration-tests-graphql-server",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@apollo/server": "^5.5.0",
+    "graphql": "^16.12.0",
+    "tsx": "^4.21.0"
+  }
+}

package/integration-tests/graphql-server/server.ts

@@ -0,0 +1,22 @@
+import { readFileSync } from "node:fs";
+import { ApolloServer } from "@apollo/server";
+import { startStandaloneServer } from "@apollo/server/standalone";
+
+const typeDefs = readFileSync("/data/schema.graphql", "utf-8");
+
+const resolvers = {
+  Query: {
+    hello: () => "Hello, world!",
+    echo: (_: unknown, { message }: { message: string }) =>
+      `${message} (${message})`,
+    user: () => ({ address: "1234 Main St", fullName: "MCP User" }),
+  },
+};
+
+const server = new ApolloServer({ typeDefs, resolvers });
+
+const { url } = await startStandaloneServer(server, {
+  listen: { port: 4000, host: "0.0.0.0" },
+});
+
+console.log(`GraphQL server ready at ${url}`);

package/integration-tests/mcp-config.yaml

@@ -0,0 +1,29 @@
+endpoint: http://graphql:4000/
+
+schema:
+  source: local
+  path: /data/schema.graphql
+
+introspection:
+  introspect:
+    enabled: true
+  execute:
+    enabled: true
+
+transport:
+  type: streamable_http
+  port: 8000
+
+health_check:
+  enabled: true
+  path: /health
+
+cors:
+  enabled: true
+  allow_any_origin: true
+
+logging:
+  level: info
+
+overrides:
+  mutation_mode: all

package/integration-tests/mock-app/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mock App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/integration-tests/mock-app/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "mock-app",
+  "private": true,
+  "type": "module",
+  "version": "0.0.0",
+  "scripts": {
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@apollo/client": "^4.1.7",
+    "@apollo/client-ai-apps": "file:../..",
+    "@modelcontextprotocol/ext-apps": "^1.1.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.4",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.2",
+    "vite-plugin-singlefile": "^2.3.0"
+  }
+}

package/integration-tests/mock-app/src/App.tsx

@@ -0,0 +1,23 @@
+import { useToolInfo } from "@apollo/client-ai-apps/react";
+import { Hello } from "./tools/Hello";
+import { Echo } from "./tools/Echo";
+import { Private } from "./tools/Private";
+import { SemiPrivate } from "./tools/SemiPrivate";
+
+export function App() {
+  const toolInfo = useToolInfo();
+
+  switch (toolInfo?.toolName) {
+    case "Hello":
+      return <Hello />;
+    case "Echo":
+      return <Echo />;
+    case "Private":
+      return <Private />;
+    case "SemiPrivate":
+      return <SemiPrivate />;
+    default:
+      // @ts-expect-error type should be never
+      throw new Error(`Unknown tool: ${toolInfo?.toolName}`);
+  }
+}

package/integration-tests/mock-app/src/main.tsx

@@ -0,0 +1,22 @@
+import { StrictMode, Suspense } from "react";
+import { createRoot } from "react-dom/client";
+import { InMemoryCache } from "@apollo/client";
+import { ApolloClient } from "@apollo/client-ai-apps";
+import { ApolloProvider } from "@apollo/client-ai-apps/react";
+import manifest from "../.application-manifest.json";
+import { App } from "./App.tsx";
+
+const client = new ApolloClient({
+  cache: new InMemoryCache(),
+  manifest,
+});
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <Suspense fallback={<p>Loading…</p>}>
+      <ApolloProvider client={client}>
+        <App />
+      </ApolloProvider>
+    </Suspense>
+  </StrictMode>
+);

package/integration-tests/mock-app/src/tools/Echo.tsx

@@ -0,0 +1,33 @@
+import { gql, type TypedDocumentNode } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
+import { createHydrationUtils } from "@apollo/client-ai-apps/react";
+
+interface Data {
+  echo: string;
+}
+
+interface Variables {
+  message: string;
+}
+
+const ECHO_QUERY: TypedDocumentNode<Data, Variables> = gql`
+  "Echos the message back to the user"
+  query Echo($message: String!) @tool(name: "Echo") {
+    echo(message: $message)
+  }
+`;
+
+const { useHydratedVariables } = createHydrationUtils(ECHO_QUERY);
+
+export function Echo() {
+  const [variables] = useHydratedVariables({
+    message: "This should be unused",
+  });
+  const { data, dataState } = useQuery(ECHO_QUERY, { variables });
+
+  if (dataState !== "complete") {
+    return <div>Loading...</div>;
+  }
+
+  return <div data-testid="echo">{data.echo}</div>;
+}

package/integration-tests/mock-app/src/tools/Hello.tsx

@@ -0,0 +1,19 @@
+import { gql, type TypedDocumentNode } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
+
+interface HelloQueryData {
+  hello: string;
+}
+
+const HELLO_QUERY: TypedDocumentNode<HelloQueryData> = gql`
+  "Returns a greeting"
+  query Hello @tool {
+    hello
+  }
+`;
+
+export function Hello() {
+  const { data } = useQuery(HELLO_QUERY);
+
+  return <h1 data-testid="greeting">{data?.hello}</h1>;
+}

package/integration-tests/mock-app/src/tools/Private.tsx

@@ -0,0 +1,34 @@
+import { gql, type TypedDocumentNode } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
+
+interface Data {
+  user: {
+    address: string;
+    fullName: string;
+  };
+}
+
+const PRIVATE_QUERY: TypedDocumentNode<Data, Record<string, never>> = gql`
+  "Returns private user information"
+  query Private @tool {
+    user @private {
+      fullName
+      address
+    }
+  }
+`;
+
+export function Private() {
+  const { data, dataState } = useQuery(PRIVATE_QUERY);
+
+  if (dataState !== "complete") {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <div data-testid="fullName">{data.user.fullName}</div>
+      <div data-testid="address">{data.user.address}</div>
+    </div>
+  );
+}

package/integration-tests/mock-app/src/tools/SemiPrivate.tsx

@@ -0,0 +1,34 @@
+import { gql, type TypedDocumentNode } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
+
+interface Data {
+  user: {
+    address: string;
+    fullName: string;
+  };
+}
+
+const SEMI_PRIVATE_QUERY: TypedDocumentNode<Data, Record<string, never>> = gql`
+  "Returns user information with a private field"
+  query SemiPrivate @tool {
+    user {
+      fullName
+      address @private
+    }
+  }
+`;
+
+export function SemiPrivate() {
+  const { data, dataState } = useQuery(SEMI_PRIVATE_QUERY);
+
+  if (dataState !== "complete") {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <div data-testid="fullName">{data.user.fullName}</div>
+      <div data-testid="address">{data.user.address}</div>
+    </div>
+  );
+}

package/integration-tests/mock-app/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "extends": "@apollo/client-ai-apps/tsconfig/core",
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "types": ["vite/client"],
+    "baseUrl": ".",
+    "paths": {
+      /* Prevent in-editor TypeScript issues by using the types from the root installed version */
+      "@apollo/client": ["../node_modules/@apollo/client"],
+      "@apollo/client/*": ["../node_modules/@apollo/client/*"],
+      "vite": ["../node_modules/vite"],
+      "vite/*": ["../node_modules/vite/*"]
+    }
+  },
+  "include": ["src", "vite.config.ts", ".apollo-client-ai-apps/types"]
+}

package/integration-tests/mock-app/vite.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { viteSingleFile } from "vite-plugin-singlefile";
+import { apolloClientAiApps } from "@apollo/client-ai-apps/vite";
+
+export default defineConfig({
+  build: {
+    emptyOutDir: true,
+  },
+  resolve: {
+    dedupe: ["react", "react-dom", "@apollo/client"],
+  },
+  plugins: [
+    apolloClientAiApps({
+      targets: ["mcp"],
+      appsOutDir: "../apps",
+      schema: "../schema.graphql",
+    }),
+    react(),
+    viteSingleFile(),
+  ],
+});