Agents & CLI for Vercel Flags
These workflows show how to manage feature flags end-to-end using the Vercel CLI and the Flags SDK. Each workflow combines CLI commands, code changes, and deployments into a complete task.
For a full reference of all vercel flags subcommands and options, see the CLI reference.
This workflow creates a feature flag, wires it into your application, and progressively enables it across environments.
vercel flags add redesigned-checkout --kind boolean \
--description "New checkout flow with streamlined steps"Creating a boolean flag to gate the new checkout experience.
Each project gets SDK keys automatically when you create your first flag. Confirm they're in place:
vercel flags sdk-keys lsThe FLAGS environment variable contains your SDK keys. Pull it into your local .env.local:
vercel env pullpnpm add flags @flags-sdk/vercelCreate a flag definition using the Flags SDK. The vercelAdapter reads the FLAGS environment variable automatically:
import { flag } from 'flags/next';
import { vercelAdapter } from '@flags-sdk/vercel';
export const redesignedCheckout = flag({
key: 'redesigned-checkout',
adapter: vercelAdapter(),
});The flag returns false until you enable it in the dashboard.
import { redesignedCheckout } from '../../flags';
export default async function CheckoutPage() {
const showRedesign = await redesignedCheckout();
return showRedesign ? <NewCheckout /> : <OldCheckout />;
}vercel deployVisit the preview URL to confirm the old checkout renders. The flag defaults to false since it hasn't been enabled yet.
Enable the flag progressively, starting with development:
vercel flags enable redesigned-checkout --environment developmentvercel flags enable redesigned-checkout --environment previewvercel flags enable redesigned-checkout --environment productionvercel deploy --prodVisit the production URL to confirm the new checkout is live.
Once a feature is stable and the flag has been enabled in all environments for a while, remove it from your codebase and dashboard.
vercel flags list --state activevercel flags inspect old-onboarding-flowCheck the output to confirm the flag is enabled in all environments and hasn't been changed recently.
Search your codebase for the flag key and its camelCase variant:
rg "old-onboarding-flow" --type ts
rg "oldOnboardingFlow" --type tsDelete the flag() declaration from your flags.ts file.
Keep only the code path that was behind the enabled flag:
const show = await oldOnboardingFlow();
return show ? <NewOnboarding /> : <OldOnboarding />;return <NewOnboarding />;Delete any component files that are no longer referenced.
vercel deployVisit the preview URL to confirm the feature still works without the flag.
Once archived, the flag stops evaluating and your application falls back to the decide default defined in code.
vercel flags archive old-onboarding-flow --yesSee Archive for details on what happens when you archive.
vercel deploy --prodThis workflow sets up an A/B test for a layout experiment, tracks results through Web Analytics, and cleans up afterward.
vercel flags add new-pricing-layout --kind boolean \
--description "A/B test: new pricing page layout"import { flag } from 'flags/next';
import { vercelAdapter } from '@flags-sdk/vercel';
export const newPricingLayout = flag({
key: 'new-pricing-layout',
adapter: vercelAdapter(),
});The flag returns false until you configure targeting in the dashboard.
import { newPricingLayout } from '../../flags';
export default async function PricingPage() {
const useNewLayout = await newPricingLayout();
return useNewLayout ? <NewPricing /> : <CurrentPricing />;
}Add the FlagValues component to your layout so Web Analytics can correlate page views and events with flag values automatically:
import { Suspense } from 'react';
import { FlagValues } from 'flags/react';
import { newPricingLayout } from '../flags';
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<body>
{children}
<Suspense fallback={null}>
<FlagValues values={{ 'new-pricing-layout': await newPricingLayout() }} />
</Suspense>
</body>
</html>
);
}See Web Analytics integration for more on tracking flag values.
vercel deployVisit the preview URL to confirm both layouts render correctly. If you've set up the Flags Explorer, you can toggle the flag in the toolbar.
vercel deploy --prodEnable the flag in the Production environment in the dashboard to start serving the new layout to users. Monitor results in Web Analytics by comparing metrics per variant.
When you've picked a winner, clean up:
- Remove the flag from code and keep only the winning layout
- Archive the flag:
vercel flags archive new-pricing-layout --yesThe Flags Explorer adds a panel to the Vercel Toolbar that lets you override flag values on preview deployments. Make sure you've set up the toolbar first. This is a one-time setup per project.
The Flags Explorer reads flag metadata from a well-known API route:
import { createFlagsDiscoveryEndpoint, getProviderData } from 'flags/next';
import * as flags from '../../../../flags';
export const GET = createFlagsDiscoveryEndpoint(async () => {
return getProviderData(flags);
});This endpoint uses the FLAGS_SECRET environment variable to authenticate requests. Make sure you've pulled it with vercel env pull.
vercel deployVisit the preview URL. The Flags Explorer panel appears in the Vercel Toolbar. Toggle any flag to override its value for your session without affecting other users.
See Flags Explorer for the full setup guide, including how to share overrides with teammates via URL.
Was this helpful?