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#next

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.