Setup AI Mocking packages

[gwardwell]

This PR adds new packages to the Apollo Client repo for AI Mocking.

• @apollo/client-ai — This package provides tooling to mock API responses using AI
• @apollo/client-ai-vercel-adapter — This package provides a Vercel SDK adapter to use with the @apollo/client-ai tools. This separation ensures the core AI tools are provider agnostic.

Use

AIMockedProvider

You can set up your client app to use mock data by using the AIMockedProvider (similar to the MockProvider, only without static mocks):

// Main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client';

import { AIMockedProvider } from "@apollo/client-ai";
import { VercelAIAdapter } from "@apollo/client-ai-vercel-adapter";

import App from './App.tsx'

const adapter = new VercelAIAdapter({
  systemPrompt: "Customize your AI responses at the system level...",
  model: "gpt-4o-mini",
});

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <AIMockedProvider adapter={adapter} systemPrompt={systemPrompt} >
      <App />
    </AIMockedProvider>
  </StrictMode>,
)

This provider uses the AIMockLink to intercept the GraphQL operations performed by Apollo Client and instead fulfill them using AI.

AIMockLink

You can plug AIMockLink directly into your Apollo Client as well, bypassing the AIMockedProvider component:

import { ApolloClient } from "@apollo/client";
import { InMemoryCache as Cache } from "@apollo/client/cache";

import { AIMockLink } from "@apollo/client-ai";
import { VercelAIAdapter } from "@apollo/client-ai-vercel-adapter";

const adapter = new VercelAIAdapter({
  systemPrompt: "Customize your AI responses at the system level...",
  model: "gpt-4o-mini",
});

const client = new ApolloClient({
  cache: new Cache(),
  link: new AIMockLink({
      adapter,
  })
});

VercelAIAdapter

The VercelAIAdapter creates an AI adapter for the Vercel AI SDK. It supports choosing the model you want to use for generating mock data:

import { VercelAIAdapter } from "@apollo/client-ai-vercel-adapter";

const adapter = new VercelAIAdapter({
  model: "gpt-4o-mini",
  systemPrompt: "Customize your AI responses at the system level...",
});

When model is provided as a string, the user will need to refer to the Vercel AI SDK provider docs to see what the ENV variable for the specific API key for their provider needs to be. For example, OpenAI looks for the OPENAI_API_KEY env variable:

import { VercelAIAdapter } from "@apollo/client-ai-vercel-adapter";

// The API Key is loaded from the `OPENAI_API_KEY` env variable
const adapter = new VercelAIAdapter({
  model: "gpt-4o-mini",
  systemPrompt: "Customize your AI responses at the system level...",
});

Users can also configure a specific provider object and pass it in, which would allow them to more directly configure the API key as an option. For example:

import { VercelAIAdapter } from "@apollo/client-ai-vercel-adapter";
import { createOpenAI } from '@ai-sdk/openai';

const openai = createOpenAI({
  apiKey: "asdf...",
});

const adapter = new VercelAIAdapter({
  model: openai("gpt-4o-mini"),
  systemPrompt: "Customize your AI responses at the system level...",
});

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5bac744

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[apollo-librarian]

✅ Docs preview ready

The preview is ready to be viewed. View the preview

File Changes

0 new, 8 changed, 0 removed

* (developer-tools)/react/(latest)/index.mdx
* (developer-tools)/react/(latest)/api/core/ApolloClient.mdx
* (developer-tools)/react/(latest)/api/react/skipToken.mdx
* (developer-tools)/react/(latest)/data/file-uploads.mdx
* (developer-tools)/react/(latest)/data/queries.mdx
* (developer-tools)/react/(latest)/integrations/integrations.mdx
* (developer-tools)/react/(latest)/migrating/apollo-client-4-migration.mdx
* (developer-tools)/react/(latest)/networking/authentication.mdx

Build ID: 8d84e66893719eda5df1b2fd
Build Logs: View logs

URL: https://www.apollographql.com/docs/deploy-preview/8d84e66893719eda5df1b2fd

[pkg-pr-new]

npm i https://pkg.pr.new/apollographql/apollo-client/@apollo/client@12854

commit: 5bac744

[github-actions]

size-limit report 📦

Path	Size
import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client" (CJS)	42.9 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client" (production) (CJS)	37.8 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client"	32.84 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client" (production)	27.03 KB (0%)
import { ApolloProvider } from "@apollo/client/react"	5.91 KB (0%)
import { ApolloProvider } from "@apollo/client/react" (production)	970 B (0%)
import { useQuery } from "@apollo/client/react"	7.22 KB (0%)
import { useQuery } from "@apollo/client/react" (production)	2.23 KB (0%)
import { useLazyQuery } from "@apollo/client/react"	7.1 KB (0%)
import { useLazyQuery } from "@apollo/client/react" (production)	2.14 KB (0%)
import { useMutation } from "@apollo/client/react"	6.46 KB (0%)
import { useMutation } from "@apollo/client/react" (production)	1.48 KB (0%)
import { useSubscription } from "@apollo/client/react"	6.77 KB (0%)
import { useSubscription } from "@apollo/client/react" (production)	1.79 KB (0%)
import { useSuspenseQuery } from "@apollo/client/react"	8.56 KB (0%)
import { useSuspenseQuery } from "@apollo/client/react" (production)	3.62 KB (0%)
import { useBackgroundQuery } from "@apollo/client/react"	8.32 KB (0%)
import { useBackgroundQuery } from "@apollo/client/react" (production)	3.38 KB (0%)
import { useLoadableQuery } from "@apollo/client/react"	8.28 KB (0%)
import { useLoadableQuery } from "@apollo/client/react" (production)	3.36 KB (0%)
import { useReadQuery } from "@apollo/client/react"	6.58 KB (0%)
import { useReadQuery } from "@apollo/client/react" (production)	1.63 KB (0%)
import { useFragment } from "@apollo/client/react"	6.68 KB (0%)
import { useFragment } from "@apollo/client/react" (production)	1.71 KB (0%)