The OpenFeature Flags SDK Example is a deployable demo template from the Vercel examples collection that connects the OpenFeature feature-flag standard to the Flags SDK through the official OpenFeature adapter, then renders two A/B-toggled banners on a Next.js page.
What is the OpenFeature Flags SDK Example?
The OpenFeature Flags SDK Example is a small Next.js application that resolves two code-defined feature flags and uses them to show or hide two banners on a single page. It takes flag definitions plus a stable user identifier as input, evaluates them through the Flags SDK OpenFeature adapter, and outputs one of several banner combinations. It is published inside the vercel/examples GitHub repository and is designed to be deployed to Vercel.
What makes it stand out?
- OpenFeature adapter — the Flags SDK evaluates flags through
@flags-sdk's OpenFeature adapter rather than a provider-specific SDK, so the OpenFeature standard sits between the app and the flag source. - Two code-defined flags — both flags are declared in the example's source and each is configured to show or hide its banner 50% of the time, giving a genuine 50/50 split out of the box.
- Stable-ID targeting — a stable identifier is used to bucket visitors, so a given visitor keeps seeing the same variation until that identifier is reset.
- Built-in Dev Tools — a Dev Tools panel at the bottom of the page resets the stable ID and reloads, which is how you cycle through the different banner variations without clearing cookies manually.
- Flags Explorer integration — when the example runs on your own Vercel deployment, the Flags Explorer in the Vercel toolbar can create overrides to force specific variations without changing the code.
- FLAGS_SECRET environment variable — the deploy flow requires a FLAGS_SECRET, described as 32 random bytes, base64-encoded, which the Flags Explorer uses to securely overwrite feature flags.
- One-click deploy plus CLI setup — the README ships a Deploy with Vercel link plus a four-step local flow:
vercel link,vercel env pull, install dependencies, run the dev server. - Next.js on Vercel — the example is a Next.js app, and the surrounding repository is tagged with
nextjsandverceltopics.
Who should use the OpenFeature Flags SDK Example?
- Developers evaluating OpenFeature: they can see how an OpenFeature provider is consumed by an application without writing any provider wiring themselves.
- Teams adopting the Flags SDK: they get a working reference for the adapter layer, flag definitions, and the environment variable that the Flags Explorer expects.
- Engineers testing flag tooling locally: the Dev Tools reset button and the CLI steps make repeated variation testing straightforward.
- Anyone building a feature-flag demo: the two-banner page is a minimal surface to swap in a real OpenFeature provider.
What can you do with it?
- Test flag variations quickly: reset the stable ID from the Dev Tools panel and reload to see both, one, or neither banner.
- Force a specific variation: after deploying your own instance, create overrides in the Flags Explorer to pin each flag without editing code.
- Prototype a provider swap: replace the example's flag source with your own OpenFeature-compatible provider and keep the same adapter and rendering logic.
- Learn the deployment prerequisites: walk through generating a base64-encoded 32-byte FLAGS_SECRET and pulling it locally with
vercel env pull.
How does the OpenFeature Flags SDK Example work?
The page evaluates two flags whose values decide whether each of the two banners is rendered. A stable identifier determines the bucket a visitor falls into, so the outcome stays consistent across reloads until the identifier is reset via Dev Tools. On a self-hosted deployment, Flags Explorer overrides take precedence over the computed 50/50 split.
FAQ
Is the OpenFeature Flags SDK Example free?
Yes. It is an open example published in the vercel/examples GitHub repository and can be cloned and deployed at no cost beyond whatever hosting your Vercel plan provides.
What does the example actually render?
It renders a single page with two banners. Two feature flags, defined in code, each control one banner and are each set to appear 50% of the time, so a visitor may see both banners, only one, or neither.
Why does a visitor keep seeing the same banner?
The example buckets users by a stable identifier rather than randomizing per request. That is why the same variation persists until you reset the ID from the Dev Tools panel at the bottom of the page.
What is FLAGS_SECRET used for?
FLAGS_SECRET is the environment variable the Flags Explorer uses to securely overwrite feature flags. The deploy flow states it must be 32 random bytes, base64-encoded, and you can either accept a generated value or supply your own.
Do I need the Vercel CLI to run it locally?
Yes if you want the Flags Explorer to work. The README's flow installs the Vercel CLI, links the project with vercel link, pulls environment variables with vercel env pull, installs dependencies, and starts the dev server.
