--- title: "LaunchDarkly Flags SDK Example" description: "Learn how to set up LaunchDarkly, including experimentation alongside Flags SDK and Global Config." url: "https://vercel.com/templates/next.js/launchdarkly-flags-sdk" links: repository: "https://github.com/vercel/examples/tree/main/flags-sdk/launchdarkly" demo: "https://flags-sdk-launchdarkly.vercel.app/" deploy: "https://vercel.com/new/clone?demo-title=LaunchDarkly+Flags+SDK+Example&demo-description=Learn+how+to+set+up+LaunchDarkly%2C+including+experimentation+alongside+Flags+SDK+and+Global+Config.&demo-url=https%3A%2F%2Fflags-sdk-launchdarkly.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F3uQqG5yGthvKersRAr1zLR%2Fe73f4f23c1059751c275d072d714dbf0%2FFlags___LaunchDarkly_-_Light.png&project-name=LaunchDarkly+Flags+SDK+Example&repository-name=launchdarkly-flags-sdk&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fflags-sdk%2Flaunchdarkly&from=templates&env=FLAGS_SECRET&envDescription=34+bytes+with+%27base64url%27+encoding&envLink=https%3A%2F%2Fvercel.com%2Fdocs%2Ffeature-flags%2Fflags-explorer%2Freference%23flags_secret-environment-variable&products=%5B%7B%22type%22%3A%22integration%22%2C%22protocol%22%3A%22experimentation%22%2C%22productSlug%22%3A%22launchdarkly%22%2C%22integrationSlug%22%3A%22launchdarkly%22%7D%5D" --- # LaunchDarkly Flags SDK Example Learn how to set up LaunchDarkly, including experimentation alongside Flags SDK and Global Config. # LaunchDarkly Flags SDK Example This example uses [LaunchDarkly](https://vercel.com/marketplace/launchdarkly) for feature flags with the [Flags SDK](https://flags-sdk.dev) along with the `@flags-sdk/launchdarkly` [LaunchDarkly adapter](https://flags-sdk.dev/docs/api-reference/adapters/launchdarkly) and the [Flags Explorer](https://vercel.com/docs/workflow-collaboration/feature-flags/using-vercel-toolbar). ## How it works This demo uses two feature flags on LaunchDarkly to control the visibility of two banners on the page. Both flags are configured to show/hide each banner 50% of the time. Once you visit the page, you can see a variation of both/one/none of the banners. Since this example is using a stable id to identify users, you will see the same variation until you reset your id. To test different variations, you can use the Dev Tools at the bottom to reset the stable id and reload the page. This allows you to test different variations of the banners. If you deployed your own and configured the feature flags on LaunchDarkly, you can also use the [Flags Explorer](https://vercel.com/docs/workflow-collaboration/feature-flags/using-vercel-toolbar) to test different variations by creating overrides. ## Deploy this template The easiest way to get started with LaunchDarkly is through the integration in [Vercel Marketplace](https://vercel.com/marketplace/launchdarkly). [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fflags-sdk%2Flaunchdarkly&env=FLAGS_SECRET&envDescription=The+FLAGS_SECRET+will+be+used+by+the+Flags+Explorer+to+securely+overwrite+feature+flags.+Must+be+32+random+bytes%2C+base64-encoded.+Use+the+generated+value+or+set+your+own.&envLink=https%3A%2F%2Fvercel.com%2Fdocs%2Fworkflow-collaboration%2Ffeature-flags%2Fsupporting-feature-flags%23flags_secret-environment-variable&project-name=launchdarkly-flags-sdk&repository-name=launchdarkly-flags-sdk) ### Step 1: Link the project In order to use the Flags Explorer, you need to link the project on your local machine. ```bash vercel link ``` Select the project from the list you just deployed. ### Step 2: Pull all environment variables This allows the Flags SDK and the Flags Explorer to work correctly, by getting additional metadata. ```bash vercel env pull ``` ### Step 3: Create Feature Flags Head over to the [LaunchDarkly Console](https://app.launchdarkly.com) and create the feature flags and experiments required by this template. Be sure to enable the `SDKs using Client-side ID` option for each Feature Flag. Feature Flags: - `Summer Sale` (type boolean) with the key `summer-sale` and the variations `true` and `false`. Edit the default targeting rule to serve a percentage rollout with a 50/50 split by `user.key`. - `Free Delivery` (type boolean) with the key `free-delivery` and the variations `true` and `false`. Edit the default targeting rule to serve a percentage rollout with a 50/50 split by `user.key`. - `Proceed to Checkout` (type string) with the key `proceed-to-checkout` and the following variations: - Name: `Control`, Value: `blue` - Name: `Test`, Value: `green` - Name: `Test #2`, Value: `red` You can also find the flag keys in the `flags.ts` file. Ensure all Flags are ON. ### Step 4: Configure the Experiment Create the `Proceed to Checkout` experiment: - Name: `Proceed to Checkout` - Hypothesis: `Button color influences rate at which customers proceed to checkout` - Type: `Feature change` - Randomization Unit: `user` - Randomization Attribute: `key` - Metric: Create a new metric: - Event kind: `Custom` - Event key: `proceed-to-checkout-clicked` - What do you want to measure? `Occurence (conversion: binary)` - Metric definition: `Percentage of user units that sent the event, where higher is better` - Metric name: `Proceed to Checkout Clicked` - Varaiations: Choose flag `proceed-to-checkout` - Audience: - In this experiment: Choose `Custom` and enter `100`% - Split audience: Choose `Split equally` - Statistical approach: Default values After that, start the Experiment. ### Step 6: Set environment variables See `.env.example` for a template. - [`FLAGS_SECRET`](https://vercel.com/docs/feature-flags/flags-explorer/reference#flags_secret-environment-variable) - `EDGE_CONFIG` (Vercel Edge Config connection string) - `LAUNCHDARKLY_PROJECT_SLUG` - `LAUNCHDARKLY_CLIENT_SIDE_ID` - `NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_SIDE_ID` (set to same value as `LAUNCHDARKLY_CLIENT_SIDE_ID`) _(Optional)_ If you provide the `LAUNCHDARKLY_API_KEY`, `LAUNCHDARKLY_PROJECT_KEY` and `LAUNCHDARKLY_ENVIRONMENT` environment variables, the Flags Explorer will fetch additional metadata from the LaunchDarkly API. This will show the description (if set) and displays a link to the feature flag on the LaunchDarkly Console. You can create an API key and find project and environment values in the [LaunchDarkly Console](https://app.launchdarkly.com/settings/projects). ## Related Templates ### [Flags SDK with Hypertune and Next.js](https://vercel.com/templates/next.js/flags-sdk-hypertune-nextjs) An e-commerce example built with Hypertune and Flags SDK that works well with Vercel Marketplace ### [Statsig Experimentation with Flags SDK](https://vercel.com/templates/next.js/statsig-experimentation-with-flags-sdk) Run experiments on static pages with Statsig and the Flags SDK ## Related Integrations ### [LaunchDarkly](https://vercel.com/marketplace/launchdarkly) Feature flags, experimentation, and AI AgentControl to ship with confidence. --- ## Additional documentation The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.