5. Follow-along: Apollo Client for AI apps
1m

Follow-along: Apollo Client setup

Let's go through the steps to set up for AI apps.

Before you start: git checkout

git checkout 35af37e6c3963f98b4067ff5f70c832bdaab74fc

We'll go through each section of what has been done in this commit but you do NOT need to do these steps manually.

In the future, this will be replaced by a single Vite template command, which is why we're not going to go through the steps manually! It's still helpful to understand what's going on under the hood.

Task!

1) Install @apollo/client-ai-apps

npm install @apollo/client-ai-apps

2) Configure Vite

Open up vite.config.ts. We've added more to the plugins and the build instructions.

vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { apolloClientAiApps, devTarget } from "@apollo/client-ai-apps/vite";
import { viteSingleFile } from "vite-plugin-singlefile";
import { mcpInspector } from "@mcpjam/inspector/vite";


const target = devTarget(process.env.TARGET);


// https://vite.dev/config/
export default defineConfig({
  build: {
    emptyOutDir: true,
    watch: process.argv.includes("--watch")
      ? { exclude: [".application-manifest.json"] }
      : undefined,
  },
  plugins: [
    apolloClientAiApps({
      targets: ["mcp", "openai"],
      devTarget: target,
      appsOutDir: "../../apps",
      schema: "../../schema.graphql",
    }),
    react(),
    mcpInspector({
      server: {
        name: "Flyby MCP Server",
        url: `http://localhost:8000/mcp?app=flyby&appTarget=${target}`,
      },
      defaultTab: "app-builder",
      cspMode: "permissive",
    }),
    viteSingleFile(),
  ],
});

2a) Plugin: apolloClientAiApps

vite.config.ts
apolloClientAiApps({
  targets: ["mcp", "openai"],
  devTarget: target,
  appsOutDir: "../../apps",
  schema: "../../schema.graphql",
}),
  • targets: The possible targets to build for. We're building for MCP and OpenAI.
  • devTarget: The target to build for in development.
  • appsOutDir: The directory to output the built apps to.
  • schema: The schema to use for the apps.

When this plugin runs, it will:

  • Look through the app for tagged with @tool (we'll add these later)
  • Generate a manifest of the and output them to the appsOutDir directory.

2b) Plugin: mcpInspector

vite.config.ts
mcpInspector({
  server: {
    name: "Flyby MCP Server",
    url: `http://localhost:8000/mcp?app=flyby&appTarget=${target}`,
  },
  defaultTab: "app-builder",
  cspMode: "permissive",
}),

This plugin will:

  • Start the MCP Jam Inspector with the MCP Server details. We'll need to run the MCP Server separately (using the start_mcp.sh script).
  • Set the default tab to app-builder and set the CSP mode to permissive.

3) Configure TypeScript for AI apps

This is in dev/flyby/tsconfig.app.json. It brings in the types we need for our .

4) Initialize Apollo Client with MCP Apps

Open up dev/flyby/src/index.tsx.

We've switched the imports so ApolloClient and ApolloProvider come from @apollo/client-ai-apps and @apollo/client-ai-apps/react.

Instead of the app connecting to the API directly, it uses the application manifest.

Up next

In the next lesson, we'll add the @tool to our so that the application manifest will pick them up. We'll also route the UI based on the tool that is selected.

Previous