Vercel Flags SDK Example
This example uses Vercel Flags for feature flags with the Flags SDK along with the @flags-sdk/vercel adapter and the Flags Explorer.
Demo
https://flags-sdk-vercel.vercel.app/
How it works
This demo uses feature flags in Vercel Flags to control the visibility of banners on the page and the color of the checkout button. Flag configurations are managed directly in the Vercel Dashboard.
If you deploy your own and configure the feature flags in the Vercel Dashboard, you can also use the Flags Explorer to enable/disable the features locally.
Deploy this template
Clicking the button above will:
- Clone this repository to your GitHub account
- Create a new Vercel project
- Deploy immediately (even if you have not configured flags yet)
Step 1: Link the project
In order to use the Flags Explorer, you need to link the project on your local machine.
vercel linkSelect the project from the list you just deployed.
Step 2: Create Feature Flags in the Vercel Dashboard
Navigate to the Flags tab in your Vercel project dashboard and create the following flags:
Feature Flags:
summer-sale- Boolean flag to show/hide the summer sale bannerfree-delivery- Boolean flag to show/hide the free delivery bannerproceed-to-checkout-color- String flag with values:blue,green,red
You can also find the feature flag keys in the flags.ts file.
Step 3: Pull all environment variables
This pulls the FLAGS environment variable that contains your SDK keys:
vercel env pullStep 4: Run the development server
pnpm installpnpm devDeploy without configuration
If FLAGS or FLAGS_SECRET are missing, requests are rewritten to /setup
until configuration is complete. The setup page includes a checklist and the
required flag keys.
Local Development
For local development, make sure you have:
- Linked your project with
vercel link - Pulled environment variables with
vercel env pull - Set
FLAGS_SECRETin.env.localfor precompute and secure Flags Explorer overrides
