TanStack Start

VITE_MIRAFIVE_KEY=mf_…
MIRAFIVE_SECRET_KEY=mf_…

import { miraMiddleware } from '@mirafive/sdk-tanstack/start'
import { createStart } from '@tanstack/react-start'

const mirafive = miraMiddleware()

export const startInstance = createStart(() => ({
  requestMiddleware: [mirafive],
}))

import { MiraProvider } from '@mirafive/sdk-tanstack'
import { createRootRoute, HeadContent, Outlet, Scripts } from '@tanstack/react-router'
import type { ReactNode } from 'react'

export const Route = createRootRoute({
  shellComponent: RootDocument,
  component: RootComponent,
})

function RootComponent() {
  return (
    <MiraProvider websiteKey={import.meta.env.VITE_MIRAFIVE_KEY}>
      <Outlet />
    </MiraProvider>
  )
}

function RootDocument({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  )
}

import { createServerFn } from '@tanstack/react-start'

export const installCheck = createServerFn({ method: 'POST' }).handler(async ({ context }) => {
  return context.mira.send([{ name: '$install_check' }])
})

import { useMira } from '@mirafive/sdk-tanstack'

export function SignupButton() {
  const mira = useMira()

  return <button onClick={() => mira.track('signup_clicked', { plan: 'pro' })}>Sign up</button>
}

import { createServerFn } from '@tanstack/react-start'

export const trackSignup = createServerFn({ method: 'POST' })
  .validator((data: { userId: string }) => data)
  .handler(async ({ context, data }) => {
    context.mira.track('signup', { userId: data.userId, properties: { plan: 'pro' } })
  })

import { miraMiddleware } from '@mirafive/sdk-tanstack/start'
import { createStart } from '@tanstack/react-start'
import { waitUntil } from 'cloudflare:workers'

const mirafive = miraMiddleware({ waitUntil })

export const startInstance = createStart(() => ({
  requestMiddleware: [mirafive],
}))

import { identity } from '@mirafive/sdk-browser/identity'
import { MiraProvider } from '@mirafive/sdk-tanstack'
import { Outlet } from '@tanstack/react-router'

function RootComponent() {
  return (
    <MiraProvider websiteKey={import.meta.env.VITE_MIRAFIVE_KEY} mode="full" plugins={[identity()]}>
      <Outlet />
    </MiraProvider>
  )
}

const mira = useMira()

// From your consent manager's callback:
mira.consent({ statistics: true, experiments: true, targeting: false })

// After login:
mira.identify(user.id, { plan: user.plan })

// After logout:
mira.reset()

import { createServerFn } from '@tanstack/react-start'

export const getFlagBootstrap = createServerFn({ method: 'GET' }).handler(async ({ context }) => {
  // Your own pseudonymous user id, when someone is signed in.
  const flags = await context.flagsFor({ userId: undefined })

  return flags.bootstrap()
})

import { flags } from '@mirafive/sdk-browser/flags'
import { MiraProvider } from '@mirafive/sdk-tanstack'
import { createRootRoute, HeadContent, Outlet, Scripts } from '@tanstack/react-router'
import type { ReactNode } from 'react'

import { getFlagBootstrap } from '../flags'

export const Route = createRootRoute({
  // The bootstrap only matters for the first server render.
  loader: () => getFlagBootstrap(),
  staleTime: Infinity,
  shellComponent: RootDocument,
  component: RootComponent,
})

function RootComponent() {
  const bootstrap = Route.useLoaderData()

  return (
    <MiraProvider websiteKey={import.meta.env.VITE_MIRAFIVE_KEY} bootstrap={bootstrap} plugins={[flags()]}>
      <Outlet />
    </MiraProvider>
  )
}

function RootDocument({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  )
}

import { useFlag, useFlagConfig } from '@mirafive/sdk-tanstack'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/checkout')({ component: Checkout })

function Checkout() {
  const newCheckout = useFlag('new-checkout', false)
  const { max } = useFlagConfig('limits', { max: 1 })

  return <h1>{newCheckout === true ? `New checkout, up to ${max}` : 'Checkout'}</h1>
}

import { MiraProvider } from '@mirafive/sdk-tanstack'
import { createRouter, RouterProvider } from '@tanstack/react-router'
import { createRoot } from 'react-dom/client'

import { routeTree } from './routeTree.gen'

const router = createRouter({ routeTree })

createRoot(document.getElementById('root')!).render(
  <MiraProvider websiteKey={import.meta.env.VITE_MIRAFIVE_KEY}>
    <RouterProvider router={router} />
  </MiraProvider>,
)

import { MiraProvider, useFlag, useFlagConfig, useMira, useTrackOnMount } from '@mirafive/sdk-tanstack'
import type { FlagBootstrap, MiraProviderProps } from '@mirafive/sdk-tanstack'

import { miraMiddleware, MiraFlagsScript } from '@mirafive/sdk-tanstack/start'
import type { FlagUnit, MiraContext, MiraMiddlewareOptions, UserFlags } from '@mirafive/sdk-tanstack/start'

Add MIRA FIVE analytics and feature flags to this TanStack Start app with @mirafive/sdk-tanstack.
Docs: https://docs.mirafive.io/sdks/tanstack-start.md

1. Install @mirafive/sdk-tanstack, @mirafive/sdk-react, @mirafive/sdk-browser and @mirafive/sdk-server
   with the project's package manager.
2. Add to .env and the deployment's environment:
     VITE_MIRAFIVE_KEY=<website key, mf_…>
     MIRAFIVE_SECRET_KEY=<secret key of a server source>
   Never prefix the secret key with VITE_ and never read it in a component.
3. In src/start.ts (create it if missing, keep existing middleware): const mirafive = miraMiddleware()
   at module scope, with miraMiddleware from '@mirafive/sdk-tanstack/start', then
   createStart(() => ({ requestMiddleware: [mirafive] })). Never create it inside the factory.
   On Cloudflare Workers or Vercel pass the platform's waitUntil: miraMiddleware({ waitUntil }).
4. In src/routes/__root.tsx wrap the Outlet in
   <MiraProvider websiteKey={import.meta.env.VITE_MIRAFIVE_KEY}> from '@mirafive/sdk-tanstack'.
   It counts pageviews on every navigation; do not add router subscriptions.
5. Track in components with useMira().track(name, properties) or useTrackOnMount(name, properties).
   Track on the server inside createServerFn handlers with context.mira.track(name, { userId, properties }).
6. For flags: a server function returning (await context.flagsFor({ userId })).bootstrap(), called from
   the root route's loader with staleTime: Infinity. Pass bootstrap={bootstrap} plugins={[flags()]} to
   MiraProvider (flags from '@mirafive/sdk-browser/flags'). Do not add <MiraFlagsScript> as well.
   Read flags with useFlag(key, fallback) and useFlagConfig(key, fallback).
7. Keep the default consentless mode, which needs no consent banner. Only if the app already has a
   consent manager and needs user ids: add identity() from '@mirafive/sdk-browser/identity' to
   plugins, set mode="full", and call useMira().consent({ statistics, experiments, targeting })
   from its callback.
8. Verify: run vite build; on a deployed page check the network tab for
   POST https://events.mirafive.io/v1/batch/<key> answering 202. Server side, a server function running
   await context.mira.send([{ name: '$install_check' }]) resolves with reason 'install_check'.
   Report what you changed.
Do not add other analytics libraries, cookies or consent banners.