Hypertune Integration example

Hypertune Integration example is a deployable Next.js starter that connects the Hypertune feature flag, A/B testing, analytics and app configuration platform to Vercel through Vercel Global Config, the Vercel Flags SDK and the Vercel Toolbar.

What is the Hypertune Integration example?

It is a ready-to-clone example project that shows how to use the Hypertune Vercel integration inside a Next.js app running on Edge Middleware with Tailwind CSS styling. It takes feature flag definitions authored in the Hypertune UI as input and produces a Next.js frontend whose server and client code read flag values and A/B test variants at runtime. Deployment is handled by a one-click "Deploy with Vercel" link that pre-fills five environment variables, and a live demo runs at feature-flag-hypertune.vercel.app. It is published as part of Vercel's edge-middleware examples collection.

Key features

• One SDK for server and client — a single Hypertune SDK install works on both the server and the client and is compatible with the Next.js App Router and React Server Components, so separate server and client SDKs are not needed.
• Vercel Global Config initialization — the SDK initializes on the server from Vercel Global Config with near-zero latency, which the example presents as a way to avoid layout shift, UI flickers, hydration errors and page load delay; the client initializes from server props on the first render.
• End-to-end type-safety through code generation — running pnpm hypertune regenerates a typed client so flag inputs, outputs and logic are statically typed in TypeScript.
• Vercel Flags SDK and Toolbar support — flags can be viewed and overridden from the frontend without leaving the page, using the Vercel Toolbar.
• Git-style version control for flag logic — flag rules are edited and versioned in the hosted Hypertune UI at app.hypertune.com rather than in the repository.
• One-click deployment — the Vercel clone link carries the project name, demo title, demo image and the Hypertune integration ID so the integration is installed during setup.
• Required configuration — the deployment needs NEXT_PUBLIC_HYPERTUNE_TOKEN, HYPERTUNE_ADMIN_TOKEN, GLOBAL_CONFIG, GLOBAL_CONFIG_HYPERTUNE_ITEM_KEY and a self-generated FLAGS_SECRET.
• Next.js + Tailwind stack — framework Next.js, use case Edge Middleware, styling with Tailwind CSS.

Who should use the Hypertune Integration example?

• Next.js product engineers adding feature flags or A/B tests to an App Router app who want a single typed SDK instead of separate server and client clients.
• Teams already on Vercel who want flags initialized from Vercel Global Config and overridable from the Vercel Toolbar during development.
• Developers evaluating Hypertune who want a working reference deployment with the integration and environment variables already wired up.
• Platform or release engineers setting up a flag workflow where flag logic lives in a hosted UI and is version controlled separately from application code.

What can you do with the Hypertune Integration example?

• Ship behind a flag: clone the example, define a flag in the Hypertune UI, regenerate the client, and read the typed value in your Next.js components.
• Run A/B tests without load penalties: initialize the SDK from Global Config on the server so variant assignment happens before the first render.
• Override flags locally: use the Vercel Flags SDK and Toolbar to toggle flag values in the browser while testing.
• Start a new flag-enabled project: use the repository as the base for a production app instead of adding the SDK from scratch.

How does the Hypertune Integration example work?

1. Deploy via the Vercel clone link, which guides you through installing the Hypertune integration and setting the five environment variables.
2. Generate a FLAGS_SECRET with node -e "console.log(crypto.randomBytes(32).toString('base64url'))".
3. Edit flag logic in the Hypertune UI, then regenerate the typed client with pnpm hypertune.

For local development, clone the repo, run vercel link, then vercel env pull .env.development.local, followed by pnpm i and pnpm run dev.

FAQ

Is the Hypertune Integration example free?

The example code is open source and can be cloned and self-hosted, but it requires a Hypertune account and a Vercel project, and it needs the Hypertune integration installed plus a FLAGS_SECRET you generate yourself before it will run.

What environment variables does it require?

Five: NEXT_PUBLIC_HYPERTUNE_TOKEN, HYPERTUNE_ADMIN_TOKEN, GLOBAL_CONFIG, GLOBAL_CONFIG_HYPERTUNE_ITEM_KEY and FLAGS_SECRET. The Vercel clone flow prompts for the first four and links to the Hypertune Vercel quickstart docs for details.

How do I add a new feature flag?

Create the flag in the Hypertune UI at app.hypertune.com, then regenerate the client with pnpm hypertune so the new flag is available with full end-to-end type-safety in your code.

Does it work with the Next.js App Router and Server Components?

Yes. The example is built on Next.js with the App Router and Server Components, and uses one Hypertune SDK across server and client plus Vercel's Edge Middleware use case.

Where can I see a running demo?

A live demo is deployed at feature-flag-hypertune.vercel.app, and the Vercel clone link sets the same project name, repository name and demo title when you create your own copy.