Hypertune

The @flags-sdk/hypertune package provides a managed Hypertune provider for the Flags SDK.

Learn more about Adapters

Getting started

Install the required dependencies:

pnpm i hypertune flags server-only @flags-sdk/hypertune @vercel/edge-config

Set up Hypertune environment variables based on your framework and app structure:

.env.local

NEXT_PUBLIC_HYPERTUNE_TOKEN=token
HYPERTUNE_FRAMEWORK=nextApp
HYPERTUNE_OUTPUT_DIRECTORY_PATH=generated

Read more about type-safe client generation on docs.hypertune.com.

Run Hypertune's code generation with npx hypertune.

Use the generated code to declare your feature flags with createHypertuneAdapter:

flags.ts

import { createHypertuneAdapter } from '@flags-sdk/hypertune'
import { type Identify } from 'flags'
import { dedupe, flag } from 'flags/next'
/** Generated with `npx hypertune` */
import {
  createSource,
  flagFallbacks,
  vercelFlagDefinitions as flagDefinitions,
  type Context,
  type FlagValues,
} from './generated/hypertune'
 
const identify: Identify<Context> = dedupe(
  async ({ headers, cookies }) => {
    return {
      environment: process.env.NODE_ENV,
      user: {
        id: 'e23cc9a8-0287-40aa-8500-6802df91e56a',
        name: 'Example User',
        email: 'user@example.com',
      },
    }
  }
)
 
const hypertuneAdapter = createHypertuneAdapter<
  FlagValues,
  Context
>({ createSource, flagFallbacks, flagDefinitions, identify })
 
export const exampleFlag = flag(
  hypertuneAdapter.declarations.exampleFlag
)

Then use it in your framework:

app/page.tsx

import { exampleFlag } from '@/flags'
 
export default async function Page() {
  const exampleFlagValue = await exampleFlag()
 
  return <div>Example Flag: {String(exampleFlagValue)}</div>
}

Flags Explorer

You can inform the Flags Explorer about your Hypertune flags with a .well-known/vercel/flags route.

This lets you view and override your Hypertune flags using the Flags Explorer.

app/.well-known/vercel/flags/route.ts

import { createFlagsDiscoveryEndpoint } from 'flags/next'
/** Generated with `npx hypertune` */
import { vercelFlagDefinitions } from '../../../../generated/hypertune'
 
export const GET = createFlagsDiscoveryEndpoint(() => {
  return { definitions: vercelFlagDefinitions }
})

Learn more about the Flags Explorer

How to configure Edge Config

If Hypertune is syncing to Vercel Edge Config, you can configure that through environment variables or through the adapter.

.env.local

EXPERIMENTATION_CONFIG="https://edge-config.vercel.com/ecfg_xyz?token=abc"
EXPERIMENTATION_CONFIG_ITEM_KEY="hypertune_99999"

flags.ts

import { VercelEdgeConfigInitDataProvider } from 'hypertune'
import { createClient } from "@vercel/edge-config"
 
const hypertuneAdapter = createHypertuneAdapter<
  FlagValues,
  Context
>({
  // ... previous initialization code
  createSourceOptions: {
    initDataProvider: new VercelEdgeConfigInitDataProvider({
      edgeConfigClient: createClient(
        'https://edge-config.vercel.com/ecfg_xyz?token=abc'
      ),
      itemKey: 'hypertune_99999',
    }),
  },
})

Getting started

Flags Explorer

How to configure Edge Config

More resources