Feature Flags
Getting Started with Vercel Flags
Vercel Flags
This guide walks you through creating a feature flag in the Vercel Dashboard and evaluating it in your application. By the end you'll have a working flag that you can toggle from the dashboard.
Getting Started
Help me set up Vercel Flags in this project. First, make sure the Vercel CLI is installed (`npm i -g vercel`). If I'm using Claude Code or Cursor, install the Vercel Plugin (`npx plugins add vercel/vercel-plugin`). For other agents, install Vercel Skills (`npx skills add vercel-labs/agent-skills`). Then: 1. Run `vercel link` and `vercel env pull` to get OpenID Connect (OIDC) credentials locally. 2. Use `vercel flags` to create a feature flag for the project. Install the flags SDK and configure it to evaluate the flag. 3. Use the flag to conditionally render content in a page. 4. Deploy with `vercel --prod`.
-
Create a flag in the dashboard
- Go to your Vercel Dashboard.
- Open Flags in the sidebar for your project.
- Create a new flag named marketing-banner.
- Leave the Type set to Boolean and configure the environment settings to be on for Development and off for Preview and Production.
-
Pull local OpenID Connect credentialsVercel Flags authenticates with the Vercel OpenID Connect (OIDC) token associated with your project. Vercel deployments receive this token automatically. For local development, pull environment variables into your
.env.local file:
vercel envpull
If your project isn't linked yet, run vercel link first. -
Install the required packages
Flags SDKOpenFeatureCore
The Flags SDK is a framework-native way to define and evaluate feature flags. It works with any flag provider through adapters. The @flags-sdk/vercel adapter connects it to your Vercel Flags project, and @vercel/flags-core is the evaluation engine used behind the scenes. pnpm yarn npm bun
pnpm i flags @flags-sdk/vercelIf you use an AI coding assistant, you can also install the
Flags SDK agent skill to help define, evaluate, and clean up feature flags:
npx skillsaddvercel/flags--skillflags-sdk
-
Evaluate the flag in your application
Flags SDKOpenFeatureCore
Define the flag in a flags.ts file. The vercelAdapter uses Vercel OIDC automatically:
import { flag } from'flags/next';
import { vercelAdapter } from'@flags-sdk/vercel';
exportconstmarketingBanner=flag({
key:'marketing-banner',
adapter:vercelAdapter(),
});Then call the flag in a server component:
import { marketingBanner } from'../flags';
exportdefaultasyncfunctionPage() {
constshowBanner=awaitmarketingBanner();
return
{showBanner ?'Sale live now!':'Welcome'}; }See the Flags SDK guide for full setup instructions.Toggle the flag off for the Development environment in the Vercel Dashboard, then press Review and save and leave a message for the change. Reload the page to see the change. -
Add targeting with the identify functionNow that your flag is working, you can add an
identify function to pass user and team context for
targeting rules. This lets you roll out flags to specific users, plans, or teams from the dashboard.
Flags SDKOpenFeatureCore
Update your flags.ts to define your entities and an identify function. The dedupe helper ensures the session is only fetched once per request, even if multiple flags call identify:
import { flag, dedupe } from'flags/next';
import { vercelAdapter } from'@flags-sdk/vercel';
typeEntities= {
user?: {id:string;
email:string;
plan:string;
}; team?: {id:string;
name:string;
}; };constidentify=dedupe(async ():Promise
=> { constsession=awaitgetSession();
return {
user:session?.user
? {
id:session.user.id,
email:session.user.email,
plan:session.user.plan,
}:undefined,
team:session?.team
? {
id:session.team.id,
name:session.team.name,
}:undefined,
}; });exportconstmarketingBanner=flag({
key:'marketing-banner',
adapter:vercelAdapter(),
identify, });To use these entities in the dashboard, define them as entities so you can build targeting rules based on attributes like user.plan or team.id.
Built-in resilience
Learn more about embedded definitions.
Next steps
Last updated August 11, 2026
Your flag is working. Here's what to explore next:
When you deploy to Vercel, the build process fetches your latest flag definitions once at build time and bundles them into the deployment. This guarantees every function uses the same snapshot during the build, and provides a runtime fallback if the Vercel Flags service is temporarily unreachable. Definitions are only fetched when you are using the Flags SDK packages or when your project has at least one environment variable containing an SDK key for Vercel Flags.
Next
- Entities and targeting: Define user attributes and create rules to show flags to specific groups.
- Segments: Build reusable audience groups like "Beta Testers" or "Internal Team."
- Flags Explorer: Override flags in the Vercel Toolbar during development without affecting other users.
- Drafts: Define flags in code first, then promote them in the dashboard when you're ready.
- Observability: Track flag evaluations in Runtime Logs and Web Analytics.
- Managing flags: Configure rules, environments, and flag lifecycles in the dashboard.
Cross-link map: Getting Started with Vercel Flags (/docs/flags/vercel-flags/quickstart)From the Vercel docs graph (built 2026-09-21T05:26:59.511Z), spanning vercel.com docs + KB, nextjs.org, ai-sdk.dev, and other Vercel documentation sites. Full graph as JSON: https://vercel.com/docs/graph.jsonSemantically closest pagesVercel Flags — Use Vercel as your feature flag provider to create and manage flags, define targeting rules, and run experiments directlFeature Flag Configuration — Learn how to configure individual feature flags in the Vercel Dashboard.Managing flags in the dashboard — Learn how to manage your feature flags using the Vercel Dashboard.Vercel FlagsVercel Flags: Platform-native feature flagsPrerequisitesFlags — Control feature visibility, run experiments, and ship with confidence using Vercel's feature flags platform.Vercel Flags — Use Vercel as your feature flag provider to create and manage flags, define targeting rules, and run experiments directlThis page links to (12)Agent Skills — Install skills to enhance AI coding agents with specialized capabilities for React, Next.js, deployment, and more.Vercel CLI Overview — Learn how to use the Vercel command-line interface \(CLI\) to manage and configure your Vercel Projects from the commandGetting started with Flags Explorer — Learn how to set up the Flags Explorer so you can see and override your application's feature flagsObservability — Track feature flag evaluations and analyze their impact with Web Analytics.Managing flags in the dashboard — Learn how to manage your feature flags using the Vercel Dashboard.Draft Flags — Learn how draft flags work and how to promote them to Vercel Flags.Entities — Define entities and their attributes for precise feature flag targeting.Segments — Create reusable user segments for targeting feature flags.Using the Core Library — Use the Vercel Flags core evaluation library directly for custom setups.Using the Flags SDK with Vercel Flags — Integrate Vercel Flags into your Next.js or SvelteKit application using the Flags SDK.Using OpenFeature with Vercel Flags — Use the vendor-neutral OpenFeature API with Vercel Flags as your provider.Next.js on Vercel — Vercel is the native Next.js platform, designed to enhance the Next.js experience.Pages that link here (7)By site: vercel-docs (7)Flags — Control feature visibility, run experiments, and ship with confidence using Vercel's feature flags platform.Flags SDK Reference — API reference for the Flags SDK for Next.js and SvelteKit.Vercel Flags — Use Vercel as your feature flag provider to create and manage flags, define targeting rules, and run experiments directlManaging flags in the dashboard — Learn how to manage your feature flags using the Vercel Dashboard.Flag Evaluation Metrics — Track Vercel Flags evaluations and see which variant each evaluation returns.Using the Flags SDK with Vercel Flags — Integrate Vercel Flags into your Next.js or SvelteKit application using the Flags SDK.Using OpenFeature with Vercel Flags — Use the vendor-neutral OpenFeature API with Vercel Flags as your provider.
Was this helpful?
