Provide targeting attributes

Hypertune is uniquely architected to let you define targeting attributes at the:

• root level

• individual flag level

And provide them during:

• SDK initialization

• local flag evaluation

• a mix of both

Provide targeting attributes during SDK initialization

To provide targeting attributes during SDK initialization, use an initialization query.

Provide targeting attributes during local flag evaluation

On the server, you'll typically provide targeting attributes when locally evaluating the root flag, passing it the context argument you defined in your schema. You'll get back the Root SDK node which will have type-safe methods to evaluate all your individual flags. In the browser, this is managed by the generated <HypertuneProvider> component.

Server

src/lib/getHypertune.ts

import { createSource } from "../generated/hypertune";

const hypertuneSource = createSource({
  token: process.env.HYPERTUNE_TOKEN!,
});

export default async function getHypertune() {
  // Get flag updates in serverless environments
  // await hypertuneSource.initIfNeeded();

  return hypertuneSource.root({
    args: {
      context: {
        environment:
          process.env.NODE_ENV === "development"
            ? "development"
            : "production",
        user: { id: "1", name: "Test", email: "[e-mail]" },
      },
    },
  });
}

Browser

src/components/AppHypertuneProvider.tsx

import { HypertuneProvider } from "../generated/hypertune.react";

export default function AppHypertuneProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <HypertuneProvider
      createSourceOptions={{
        token: import.meta.env.VITE_HYPERTUNE_TOKEN!,
      }}
      rootArgs={{
        context: {
          environment:
            process.env.NODE_ENV === "development"
              ? "development"
              : "production",
          user: { id: "1", name: "Test", email: "[e-mail]" },
        },
      }}
    >
      {children}
    </HypertuneProvider>
  );
}

Provide flag-specific targeting attributes

You can also provide flag-specific targeting attributes when evaluating individual flags:

hypertune.upgradeCopy({ args: { selectedPlan }, fallback: "Upgrade your plan" });