Vite and TanStack Start

init adds the Vite plugin to the existing configuration. Keep the app's other plugins:

import { defineConfig } from 'vite'
import { genie } from 'genie-react/vite'

export default defineConfig({
  plugins: [genie()],
})

Render Genie once near the app root to add memory, performance, plugin, and timeline tools. Place it inside the Query and Router providers when using automatic discovery:

import { Genie } from 'genie-react'

{
  import.meta.env.DEV && <Genie appName="Storefront" />
}

Genie reads the Query client from QueryClientProvider or the TanStack Router context. Pass clients directly when the component is outside those providers:

{
  import.meta.env.DEV && <Genie queryClient={queryClient} router={router} />
}

During production builds, the genie() plugin replaces this dedicated component import before Rollup resolves the app graph. Genie browser modules and protocol code therefore stay out of the production assets.

Check the setup

npx @genie-react/cli doctor --live
npx @genie-react/cli status

Keep the development server running and open the app before these calls. Continue when doctor reports ok:true and status shows the intended ready session. Inspect domains to confirm the collectors you need. Missing Query or Router domains usually mean the matching client was not discovered. A ready React session alone does not establish that those integrations are wired.

Next, name the tab and run a focused workflow.