Introducing feature flag management from the Vercel Toolbar

Feature Flag Overrides, Without Leaving the Page

Feature flags let teams ship new functionality behind a switch and turn it on only when it makes sense. But the workflow around them has always involved a context switch: open the flag provider, log in, toggle the value, coordinate with teammates, and only then get back to building. That friction adds up, especially when testing several flag combinations during QA.

Vercel is addressing this by putting feature flag management directly in the Vercel Toolbar. Team members can now view and override an application’s feature flags from the toolbar itself, instead of jumping between tabs. The setup works with flags managed by LaunchDarkly, Optimizely, Statsig, Split, Hypertune, and any other provider — including custom in-house setups — as long as the flag values are exposed to the toolbar.

How the Toolbar Reads Your Flags

The integration relies on standard web primitives: API Routes and script tags. That means it works with any framework. The toolbar reads real flag values from a script tag rendered on the page, while flag metadata and descriptions arrive via an API route. From those values, you can set per-session overrides for QA and testing.

No special infrastructure is required. The Vercel Toolbar can be added to any deployment, so overrides work across local, preview, and production environments.

Getting Started

To enable the toolbar on production or local environments, add it to your project with the @vercel/toolbar package or via an injection script.

Next, expose your flag values to the toolbar by rendering a script tag. In React, the FlagValues component from @vercel/flags handles this:

import { FlagValues } from "@vercel/flags/react" 
<FlagValues values={{ fasterCheckoutPage: true, landingPageRedesign: true }} />

Then define your application’s feature flags with FlagDefinitions, providing rich metadata so the toolbar can display them clearly:

// .well-known/vercel/flags/route.ts
import { getLaunchDarklyData } from '@vercel/flags/providers/launchdarkly';
import { NextResponse } from 'next/server';
export async function GET() {
  const launchDarklyData = await getLaunchDarklyData({ 
    apiKey: process.env.LAUNCHDARKLY_API_KEY, 
    projectKey: process.env.LAUNCHDARKLY_PROJECT_KEY, 
    environment: process.env.LAUNCHDARKLY_ENVIRONMENT, 
  });
  return NextResponse.json(launchDarklyData);
}

Finally, respect overrides set in the toolbar by reading the vercel-flag-overrides cookie:

import { cookies } from 'next/headers';
export default function Page() {
  const overrides = cookies().get('vercel-flag-overrides')?.value;
  return overrides.showNewDashboard ? <NewDashboard /> : <LegacyDashboard />;
}

Overrides are stored per session in a cookie that can optionally be encrypted, so your application can honor them consistently. From the toolbar, you can view each flag and set its value — useful for testing behind-the-scenes scenarios in a real environment:

Set the override for each flag and save to apply the changes.

A Faster Feedback Loop

Testing features behind flags in a production-like environment builds confidence in the release process. With overrides available directly from the toolbar, QA teams can verify behavior in context without coordinating with developers or switching between provider dashboards. That shortens feedback loops and keeps the focus on shipping better features to users.

For a walkthrough on enabling the toolbar and setting overrides, see Vercel’s documentation on feature flags.