Hypertune
Type-safe flags + experiments
Hypertune is the most flexible platform for feature flags, experimentation, analytics, and app configuration. Built with full end-to-end type safety and Git-based version control. Optimized for TypeScript, React, Next.js, and Vercel.
• Edge-ready — Sub-millisecond SDK initialization and local evaluation at the edge ensures maximum performance with zero impact on conversion rates.
• Type-safe — Generated types for flags, inputs, and analytics events eliminate runtime errors and enable safe refactoring.
• Git-based — Every change is an atomic commit with full history, diffs, rollbacks, and PR-based review.
• Config-first — Scale from simple flags to rich app configuration for content, pricing, permissions, and beyond.
Flags SDK
Connect your existing project and then link to it locally by running:
vercel linkMake the latest environment variables available to your project locally by running:
vercel env pull .env.development.localOpen the Hypertune UI with the 'Open in Hypertune' button in your Vercel installation. Create your first feature flag.
Install the required packages by running:
npm install flags @flags-sdk/hypertune hypertune server-only @vercel/edge-configFirst set the following environment variables in your .env file to configure Hypertune's code generation:
HYPERTUNE_FRAMEWORK=nextAppHYPERTUNE_OUTPUT_DIRECTORY_PATH=generatedThen generate types for your Hypertune project by running:
npx hypertuneCreate a new file called flags.ts that contains an identify function and a hypertuneAdapter.
The identify function is passed request headers and cookies, and creates a Context which is used to evaluate flag rules. By default, the Context includes the environment and the current user, but you can change this in the Hypertune UI.
The hypertuneAdapter is created using createHypertuneAdapter, and can be used to define flags with type safety. Combined with the Context type, this provides full end-to-end type safety when working with flags and experiments.
import { Identify } from "flags";import { dedupe, flag } from "flags/next";import { createHypertuneAdapter } from "@flags-sdk/hypertune";import { createSource, flagFallbacks, vercelFlagDefinitions as flagDefinitions, Context, RootFlagValues,} from "./generated/hypertune";
const identify: Identify<Context> = dedupe( async ({ headers, cookies }) => { return { environment: process.env.NODE_ENV, user: { id: "1", name: "Test User", email: "hi@test.com" }, }; },);
const hypertuneAdapter = createHypertuneAdapter< RootFlagValues, Context>({ createSource, flagFallbacks, flagDefinitions, identify,});
export const exampleFlagFlag = flag( hypertuneAdapter.declarations.exampleFlag,);
export const enableDesignV2Flag = flag( hypertuneAdapter.declarations.enableDesignV2,);To use flags on the server (e.g. in Server Components, Route Handlers or Middleware), import and await your flag functions:
import { exampleFlagFlag } from "@/flags";
export default async function ServerComponent() { const exampleFlag = await exampleFlagFlag();
return <div>Example Flag: {String(exampleFlag)}</div>;}Hypertune SDK
Connect your existing project and then link to it locally by running:
vercel linkMake the latest environment variables available to your project locally by running:
vercel env pull .env.development.localOpen the Hypertune UI with the 'Open in Hypertune' button in your Vercel installation. Create your first feature flag.
Install the required packages by running:
npm install hypertune server-only @vercel/edge-configFirst set the following environment variables in your .env file to configure Hypertune's code generation:
HYPERTUNE_FRAMEWORK=nextAppHYPERTUNE_OUTPUT_DIRECTORY_PATH=generatedThen generate a type-safe client to access your flags by running:
npx hypertuneAdd a new file named getHypertune.ts that exports a getHypertune function:
import "server-only";import { VercelEdgeConfigInitDataProvider } from "hypertune";import { createClient } from "@vercel/edge-config";import { unstable_noStore as noStore } from "next/cache";import { createSource } from "@/generated/hypertune";
const hypertuneSource = createSource({ token: process.env.NEXT_PUBLIC_HYPERTUNE_TOKEN!, initDataProvider: process.env.EXPERIMENTATION_CONFIG && process.env.EXPERIMENTATION_CONFIG_ITEM_KEY ? new VercelEdgeConfigInitDataProvider({ edgeConfigClient: createClient( process.env.EXPERIMENTATION_CONFIG, ), itemKey: process.env.EXPERIMENTATION_CONFIG_ITEM_KEY, }) : undefined,});
export default async function getHypertune() { noStore(); await hypertuneSource.initIfNeeded(); // Check for flag updates
return hypertuneSource.root({ args: { context: { environment: process.env.NODE_ENV, // Pass current user details here user: { id: "1", name: "Test", email: "test@example.com" }, }, }, });}To access flags on the server (e.g. in Server Components, Route Handlers, or Middleware), use the getHypertune function:
import getHypertune from "@/lib/getHypertune";
export default async function ServerComponent() { const hypertune = await getHypertune();
const exampleFlag = hypertune.exampleFlag({ fallback: false });
return <div>Example Flag: {String(exampleFlag)}</div>;}Get started by clicking Install.
You'll be guided through the setup to connect your project, create your first feature flag, install the SDK, generate types, and use your flag.
