Using Edge Config with an integration

Vercel has partnered with A/B testing and feature flag services such as LaunchDarkly and Statsig to make it easier to integrate Edge Config into your workflow. These integrations sync feature flag definitions into Edge Config, allowing you to use your preferred service's SDK in your app to fetch the feature flag values at drastically lower latency.

To see these integrations in action, explore a template below. Otherwise, read on to learn how to configure an Edge Config integration yourself.

Get started in minutes

Explore Edge Config integrations with our templates.

View All Templates

Experimentation with Statsig

Reduce CLS and improve performance from client-loaded experiments at the edge with Statsig

LaunchDarkly Integration example

Learn how to set up the LaunchDarkly integration to read flags from Edge Config

Maintenance Page

This template shows how to quickly trigger a maintenance page using Edge Config

View All Templates

LaunchDarkly allows you to enable and disable feature flags dynamically, decoupling feature rollouts from deployments.

The LaunchDarkly Edge Config integration enables you to evaluate flags at the edge without making network calls to LaunchDarkly.

The following steps will walk you through configuring the integration and using it to check the values of feature flags from your frontend code.

1. Set up the LaunchDarkly integration

   Visit the LaunchDarkly page in the Integration Marketplace and select the Add Integration button. From the Integration dialog:

   1. Select a Vercel team and project to connect the integration to
   2. Log into LaunchDarkly
   3. Select the Authorize button to allow the integration to access your LaunchDarkly account data
   4. Name the integration, and select an existing Edge Config or create a new one

2. Get your client-side ID

   To use the integration, you'll need your client-side ID from LaunchDarkly. Here's how to add it to your project:

   1. Go to the settings page of your LaunchDarkly dashboard.
   2. Select the LaunchDarkly project your integration is connected to
   3. On the next page, copy the Client-side ID under the environment your integration is connected to (for example, Test or Production)

   Now, you must add the value to your project as an Environment Variable:

   1. Navigate to your Vercel dashboard and select the project you want to use LaunchDarkly with
   2. Under the Settings tab, navigate to Environment Variables, and create an LD_CLIENT_SIDE_ID variable with the value of your client-side ID

   See our Environment Variables docs to learn more.

3. Use the LaunchDarkly integration in your code

   Open your project's code on your local machine and do the following:

   1. Install LaunchDarkly's Vercel Server SDK:

      pnpm

      yarn

      npm

      pnpm i @launchdarkly/vercel-server-sdk

   2. Use Vercel CLI to pull your Vercel project's environment variables:

      vercel env pull .env.development.local

   3. Finally, create a middleware.ts file at the root of your project. This file will configure Edge Middleware that redirects your site visitors from /homepage to /new-homepage based on a feature flag fetched from LaunchDarkly:

      middleware.ts

      TypeScript

      TypeScriptJavaScript

      import { init } from '@launchdarkly/vercel-server-sdk';
      import { createClient } from '@vercel/edge-config';
       
      const edgeConfigClient = createClient(process.env.EDGE_CONFIG!);
      const launchDarklyClient = init('YOUR CLIENT-SIDE ID', edgeConfigClient);
       
      export const config = {
        // Only run the middleware on the dashboard route
        matcher: '/homepage',
      };
       
      export default function middleware(request: Request): Response {
        await launchDarklyClient.initFromServerIfNeeded();
        const launchDarklyContext = { kind: 'org', key: 'my-org-key' };
        const showExperimentalHomepage = await launchDarklyClient.variation(
          'experimental-homepage',
          launchDarklyContext,
          true,
        );
       
        if (showExperimentalHomepage) {
          const url = new URL(request.url);
          url.pathname = '/new-homepage';
          return Response.redirect(url);
        }
      }

Statsig is a stats engine that enables you to automate A/B testing and make data-driven decisions at scale.

The Statsig integration enables you to directly push Statsig Configs to Vercel's Edge Config, allowing you to dynamically control the behavior of your application by replacing hard-coded values in your application with dynamic values on the server.

The following steps will walk you through configuring the integration and using it to manage Statsig experiments from your frontend code.

1. Set up the Statsig integration

   Visit the Statsig page in the Integration Marketplace and select the Add Integration button. Then:

   1. Select a Vercel team and Vercel project for your integration to be applied to
   2. Log into Statsig
   3. Select or create a new Edge Config to connect to Statsig
   4. Statsig will provide you with a Connection String and Edge Config Item Key. Save both, as you'll need them later in the setup

2. Add your Environment Variables

   Navigate to your Vercel dashboard, and select the project you want to use the Statsig integration with.

   Under the Settings tab, navigate to Environment Variables, and add the following variables:

   1. EDGE_CONFIG: Set this to the value of your Connection String
   2. EDGE_CONFIG_ITEM_KEY: Set this to the value of your Edge Config Item Key

   See our Environment Variables documentation to learn more.

3. Use the Statsig integration in your code

   Statsig's statsig-node-vercel package offers an EdgeConfigDataAdapter class, which you can use to initialize Statsig experiments with Edge Config.

   The following example sets up a Statsig experiment with Edge Config in an Edge Middleware file, using the EDGE_CONFIG_ITEM_KEY enviroment variable.

   middleware.ts

   TypeScript

   TypeScriptJavaScript

   import { NextResponse } from 'next/server';
   import type { NextRequest } from 'next/server';
   import Statsig from 'statsig-node';
   import { createClient } from '@vercel/edge-config';
   import { EdgeConfigDataAdapter } from 'statsig-node-vercel';
    
   export const config = {
     matcher: '/',
   };
    
   const edgeConfigClient = createClient(process.env.EDGE_CONFIG!);
   const dataAdapter = new EdgeConfigDataAdapter({
     edgeConfigClient: edgeConfigClient,
     edgeConfigItemKey: process.env.EDGE_CONFIG_ITEM_KEY!,
   });
    
   export async function middleware(request: NextRequest) {
     await Statsig.initialize('statsig-server-api-key-here', { dataAdapter });
    
     const experiment = await Statsig.getExperiment(
       { userID: 'exampleId' },
       'statsig_example_experiment',
     );
    
     // Do any other experiment actions here
    
     return NextResponse.next();
   }

Hypertune is a feature flag, A/B testing and app configuration platform with full type-safety and Git version control.

The Hypertune Edge Config integration enables you to access your feature flags and run A/B tests at ultra low latency at the edge.

The following steps will walk you through configuring the integration in an existing project. If you don't have a project, try deploying our Hypertune template.

If you do not already have a Hypertune project setup, follow the steps outlined in the Hypertune getting started guide before continuing with the steps below.

1. Set up the Hypertune integration

   Visit the Hypertune page in the Integration Marketplace and select the Add Integration button. Then:

   1. Select a Vercel team and project
   2. Continue and log into Hypertune
   3. Connect your Hypertune project to an existing or new Edge Config store. Save the Hypertune Token, Connection String and Item Key for later
   4. Go to your Vercel dashboard and select the project you want to use the Hypertune integration with. Go to Settings > Environment Variables and add the following:
      • NEXT_PUBLIC_HYPERTUNE_TOKEN, set to the Hypertune Token
      • EDGE_CONFIG, set to the Connection String
      • EDGE_CONFIG_HYPERTUNE_ITEM_KEY, set to the Item Key

2. Use the Hypertune integration in your code

   First, install the Edge Config package:

   pnpm

   yarn

   npm

   pnpm i @vercel/edge-config

   Then, pull your environment variables:

   vercel env pull

   Now, create a hypertune.ts file that initializes the Hypertune SDK.

   The following example passes an Edge Config client, your Hypertune Token, and your Edge Config Item Key to the Hypertune SDK:

   lib/hypertune.ts

   TypeScript

   TypeScriptJavaScript

   import { initializeHypertune } from '../generated/generated';
   import { createClient } from '@vercel/edge-config';
    
   const edgeConfigClient = createClient(process.env.EDGE_CONFIG!);
    
   const hypertune = initializeHypertune(
     {},
     {
       token: process.env.NEXT_PUBLIC_HYPERTUNE_TOKEN,
       vercelEdgeConfigClient: edgeConfigClient,
       vercelEdgeConfigItemKey: process.env.EDGE_CONFIG_HYPERTUNE_ITEM_KEY,
     },
   );
    
   export default hypertune;

   Finally, you can use the hypertune object you exported in the file above to check for feature flags in your Edge Middleware:

   middlware.ts

   TypeScript

   TypeScriptJavaScript

   import { NextFetchEvent, NextRequest } from 'next/server';
   import hypertune from './lib/hypertune';
    
   export const config = {
     matcher: '/',
   };
    
   export async function middleware(
     request: NextRequest,
     context: NextFetchEvent,
   ) {
     await hypertune.initFromServerIfNeeded();
     const rootNode = hypertune.root({
       context: {
         user: { id: 'test', name: 'Test', email: 'test@test.com' },
       },
     });
     const exampleFlag = rootNode.exampleFlag().get(/* fallback */ false);
     console.log('Middleware feature flag: ', exampleFlag);
   }