> ## Documentation Index
> Fetch the complete documentation index at: https://launchdarkly.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Vercel SDK reference

<View title="Developer" />

<View title="Federal docs">
  <Danger>
    **The Vercel SDK is not available in federal environments**

    To learn more, read <a href="/docs/home/infrastructure/federal">LaunchDarkly in federal environments</a>.
  </Danger>
</View>

<View title="EU docs">
  <Danger>
    **The Vercel SDK is not available in LaunchDarkly's European Union (EU) instance**

    To learn more, read <a href="/docs/home/infrastructure/eu">LaunchDarkly in the European Union (EU)</a>.
  </Danger>
</View>

This topic documents how to get started with the Vercel SDK, and links to reference information on all of the supported features.

<Note>
  **SDK quick links**

  LaunchDarkly's SDKs are open source. In addition to this reference guide, we provide source, API reference documentation, and a sample application:

  <table>
    <thead>
      <tr>
        <th>Resource</th>
        <th>Location</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>SDK API documentation</td>

        <td>
          [SDK API docs](https://launchdarkly.github.io/js-core/packages/sdk/vercel/docs/)
        </td>
      </tr>

      <tr>
        <td>Supported SDK Versions</td>
        <td>[Vercel edge SDK](/docs/sdk/concepts/supported-versions#vercel-edge-sdk)</td>
      </tr>

      <tr>
        <td>GitHub repository</td>

        <td>
          [LaunchDarkly Vercel SDK](https://github.com/launchdarkly/js-core/tree/main/packages/sdk/vercel)
        </td>
      </tr>
    </tbody>
  </table>
</Note>

If you are using Vercel SDK version 1.2.0 or later, you can use the Vercel SDK by itself. The Vercel SDK sends events back to LaunchDarkly directly, however, you do need to configure the SDK to enable sending events. To learn more, read [SDK configuration](/docs/sdk/features/config#vercel).

If you are using an older version of the Vercel SDK, it is designed to be used with one of the LaunchDarkly [client-side SDKs](/docs/sdk/client-side) as follows:

* The Vercel SDK gets all flags at the edge for a given context, and bootstraps them onto a cached payload
* The client-side SDK initializes the bootstrapped payload
* The client-side SDK evaluates the flags and sends events back to LaunchDarkly

<Note>
  **This SDK requires the Vercel integration**

  Configure the Vercel integration to use this SDK successfully. To learn more, read [Vercel](/docs/integrations/vercel).
</Note>

This topic covers how to get started with the Vercel SDK.

## Get started

After you complete the [Install a Vercel integration](/docs/integrations/vercel#install-a-vercel-integration) process in an [existing project](/docs/home/getting-started), follow these instructions to start using the LaunchDarkly Vercel SDK:

* [Install the SDK](#install-the-sdk)
* [Initialize the client](#initialize-the-client)
* [Evaluate a flag](#evaluate-a-flag)

<Note>
  **You can also use Vercel's Flags SDK**

  If you are already using [Vercel's Flags SDK](https://flags-sdk.dev/), you can use that with your LaunchDarkly feature flags, your [Vercel integration](/docs/integrations/vercel#install-a-vercel-integration), and Vercel's `@flags-sdk/launchdarkly` LaunchDarkly adapter. To learn how, read [LaunchDarkly Flags SDK Example](https://vercel.com/templates/edge-config/launchdarkly-flags-sdk) in Vercel's documentation.
</Note>

### Install the SDK

First, install the Vercel SDK as a dependency in your application using your application's dependency manager.

Here's how:

<CodeGroup>
  ```bash title="yarn" lines wrap theme={null}
  yarn add @launchdarkly/vercel-server-sdk
  ```

  ```bash title="npm" lines wrap theme={null}
  npm i @launchdarkly/vercel-server-sdk
  ```
</CodeGroup>

Next, import the LaunchDarkly client in your application code:

<CodeGroup>
  ```ts title="TypeScript/JavaScript ES6" lines wrap theme={null}
  import { init } from '@launchdarkly/vercel-server-sdk'
  import { createClient } from '@vercel/edge-config'
  ```

  ```js title="JavaScript CJS" lines wrap theme={null}
  const { init } = require('@launchdarkly/vercel-server-sdk')
  const { createClient } = require('@vercel/edge-config')
  ```
</CodeGroup>

### Initialize the client

After you install and import the SDK, create an edge client using your [Edge Config ID](https://vercel.com/docs/storage/edge-config). Then, initialize an `LDClient` using your LaunchDarkly client-side ID and this edge client.

Here's how:

<CodeGroup>
  ```js title="TypeScript" lines wrap theme={null}
  const edgeConfigClient = createClient(process.env.EDGE_CONFIG)
  const ldClient = init('example-client-side-id', edgeConfigClient)

  await ldClient.waitForInitialization()
  ```
</CodeGroup>

<Warning>
  **Vercel SDK credentials**

  The Vercel SDK requires a client-side ID. Client-side IDs are specific to each project and environment. They are not secret, and you can include them in code. Do not embed a server-side SDK key into an edge application.

  You can find client-side IDs on the **SDK keys** page under **Settings**. To learn more about key types, read [Keys](/docs/sdk/concepts/client-side-server-side#keys-and-credentials).
</Warning>

If you are using the Vercel SDK version 1.2.0 or later, you can optionally configure sending events during initialization. This enables [Experimentation](/docs/home/experimentation) and [metrics](/docs/home/metrics) use cases. To learn more, read [Experimentation and metric events](/docs/home/experimentation/events).

Here's how:

<CodeGroup>
  ```js title="TypeScript" lines wrap theme={null}
  const ldClient = init('example-client-side-id', edgeConfigClient, { sendEvents: true });
  await ldClient.waitForInitialization();
  ```
</CodeGroup>

### Evaluate a flag

After you initialize the client, wait for the `waitForInitialization` function to resolve. When `waitForInitialization` is resolved, the client can serve feature flags.

Using the client, you can check which variation a particular context will receive for a given feature flag. In your Vercel Edge application, place the `variation` code so that it is invoked as needed.

Here is an example:

<CodeGroup>
  ```typescript title="TypeScript" lines wrap theme={null}
  const ldContext = {
    kind: 'org',
    key: 'example-organization-key',
    someAttribute: 'example-attribute-value',
  }
  const flagValue = await ldClient.variation('example-flag-key', ldContext, true)
  ```
</CodeGroup>

## Bootstrap flags with Next.js

If you are using [Next.js](https://nextjs.org/) with Vercel, you can bootstrap feature flags on the [Root Layout](https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) for use in the LaunchDarkly React Web SDK. To bootstrap flags, specify the root layout's runtime with a value of `edge` and pass the flags to a [client component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) that initializes the LaunchDarkly React SDK.

The Vercel SDK's GitHub repository contains an [example application](https://github.com/launchdarkly/js-core/blob/main/packages/sdk/vercel/examples/complete/README.md) that takes advantage of bootstrapping flags from the edge for use in the LaunchDarkly React Web SDK.

## Promises and async

All asynchronous SDK methods that return a `Promise` are compatible with `then/catch` or `async/await`. You can use either.

## Shut down the client

If you send events, you must flush those events before your worker exits to ensure that they are sent back to LaunchDarkly. To learn more, read [Flushing events](/docs/sdk/features/events#vercel).

Shut down the client when your application terminates. To learn more, read [Shutting down](/docs/sdk/features/shutdown#vercel).

## Supported features

* [SDK configuration](/docs/sdk/features/config#vercel), including
  * [Migration configuration](/docs/sdk/features/migration-config#vercel)
* [Anonymous contexts and users](/docs/sdk/features/anonymous#vercel)
* [Context configuration](/docs/sdk/features/context-config#vercel)
* [Flag variation evaluation](/docs/sdk/features/evaluating#vercel)
* [Flag variation evaluation details](/docs/sdk/features/evaluation-reasons#vercel)
* [Flushing events](/docs/sdk/features/flush#vercel)
* [Getting all flags](/docs/sdk/features/all-flags#vercel)
* [Logging configuration](/docs/sdk/features/logging#vercel)
* [Migrations](/docs/sdk/features/migrations#vercel)
* [Secure mode](/docs/sdk/features/secure-mode#vercel)
* [Tracking custom events](/docs/sdk/features/events#vercel)
* [Shutting down](/docs/sdk/features/shutdown#vercel)