Hypertune

Using Edge Config with Hypertune

Hypertune is a feature flag, A/B testing and app configuration platform with full type-safety and Git version control.

The Hypertune Edge Config integration synchronizes with your Functions for low latency retrieval without fetch requests.

Prerequisites

Before using this integration, you should have the latest version of Vercel CLI.

To check your version, use vercel --version. To install or update Vercel CLI, use:

pnpm i -g vercel@latest

Get Started

If you deploy a template like the Hypertune Flags SDK Example, it will guide you through most of these steps.

Navigate to your Project and click the Flags tab.

Install a flag provider, select Hypertune and click continue, then toggle Enable Edge Config Syncing on.

Set up your local environment
Open your project in your development environment and link it to Vercel.
```
vercel link
```
Once linked, you can pull the environment variables that were added to your project.
```
vercel env pull
```
You should have a .env.local file with the following environment variables:
```
EXPERIMENTATION_CONFIG="..."
EXPERIMENTATION_CONFIG_ITEM_KEY="..."
NEXT_PUBLIC_HYPERTUNE_TOKEN="..."
```
If you don't see these environment variables, ensure your project is linked to the Hypertune integration in the Flags tab.
Manage your flags in Hypertune
From the Flags tab, click Open in Hypertune to make changes in your Hypertune project.
When you click save, changes will be synchronized to your Edge Config and ready for use.
Generate a type-safe client
Run code generation to produce the type-safe client for use with the Hypertune SDK.
```
npx hypertune
```
You should now have a generated directory with generated code reflecting your saved changes.

Declare flags in your code

You can declare server side flags using the Flags SDK with Hypertune as follows:

flags.ts

import {
  createSource,
  vercelFlagDefinitions as flagDefinitions,
  flagFallbacks,
  type FlagValues,
  type Context,
} from '@/generated/hypertune';
import { flag } from 'flags/next';
import { createHypertuneAdapter } from '@flags-sdk/hypertune';
import { identify } from './lib/identify';
 
// Generate a Flags SDK adapter from generated Hypertune code
const hypertuneAdapter = createHypertuneAdapter<FlagValues, Context>({
  createSource,
  flagDefinitions,
  flagFallbacks,
  identify,
});
 
// Use generated definitions to declare flags in your framework
export const exampleFlag = flag(hypertuneAdapter.declarations.exampleFlag);

See the more resources section for more information about the Hypertune and Flags SDK.

Use flags in your app

app/page.tsx

import { exampleFlag } from '@/flags';
 
export default async function Home() {
  const isExampleFlagEnabled = await exampleFlag();
  return <div>Example Flag is {isExampleFlagEnabled ? 'enabled' : 'disabled'}</div>;
}

Next steps

Learn more about Edge Config:

More resources

Learn more about Hypertune and the Flags SDK adapter:

Last updated on June 2, 2025

Account Management

Was this helpful?