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

# TypeScript SDK - Setup

The ABV TypeScript SDK offers two setup approaches:

1. [Tracing](./#tracing-setup) for [ABV Observability](/developer/basic-features/observability-tracing) using OpenTelemetry
2. [Client](./#client-setup) for other ABV features like prompt management, evaluation, or accessing the ABV API

# Tracing Setup

<Steps>
  <Step title="Installation" icon="download">
    Install the relevant packages for a full tracing setup:

    ```bash theme={null}
    npm install @abvdev/tracing @abvdev/otel @opentelemetry/sdk-node
    ```

    * `@abvdev/tracing`: Core tracing functions (`startObservation`, `startActiveObservation`, etc.)
    * `@abvdev/otel`: The `ABVSpanProcessor` to export traces to ABV.
    * `@opentelemetry/sdk-node`: The OpenTelemetry SDK for Node.js.

    Learn more about the packages [here](/developer/sdks/js-ts/overview).
  </Step>

  <Step title="Register your credentials" icon="key">
    Add your ABV credentials to your environment variables. Make sure that you have a `.env` file in your project root and a package like `dotenv` to load the variables.

    ```bash theme={null}
    ABV_API_KEY = "sk-abv-..."
    ABV_BASE_URL = "https://app.abv.dev" # US region
    # ABV_BASE_URL = "https://eu.app.abv.dev" # EU region
    ```
  </Step>

  <Step title="Initialize OpenTelemetry" icon="code">
    The ABV TypeScript SDK's tracing is built on top of OpenTelemetry, so you need to set up the OpenTelemetry SDK. The `ABVSpanProcessor` is the key component that sends traces to ABV.

    ```typescript title="instrumentation.ts" theme={null}
    import { NodeSDK } from "@opentelemetry/sdk-node";
    import { ABVSpanProcessor } from "@abvdev/otel";

    const sdk = new NodeSDK({
      spanProcessors: [new ABVSpanProcessor()],
    });

    sdk.start();
    ```

    The `ABVSpanProcessor` is the key component that sends traces to ABV.

    Modify `instrumentation.ts` file to use `dotenv` package to load the variables.

    Additional parameters are provided to get trace visible in the UI immediately.

    ```bash theme={null}
    npm install dotenv
    ```

    ```typescript title="instrumentation.ts" theme={null}
    import dotenv from "dotenv";
    dotenv.config();

    import { NodeSDK } from "@opentelemetry/sdk-node";
    import { ABVSpanProcessor } from "@abvdev/otel";

    const sdk = new NodeSDK({
      spanProcessors: [
        new ABVSpanProcessor({
          apiKey: process.env.ABV_API_KEY,
          baseUrl: process.env.ABV_BASE_URL,
          exportMode: "immediate",
          flushAt: 1,
          flushInterval: 1,
          additionalHeaders: {
            "Content-Type": "application/json",
            "Accept": "application/json"
          }
        })
      ],
    });

    sdk.start();
    ```

    Import the `instrumentation.ts` file at the top of your application.

    ```typescript title="index.ts" theme={null}
    import "./instrumentation"; // Must be the first import
    ```

    For more options to configure the ABVSpanProcessor such as masking, filtering, and more, see [the advanced usage](/developer/sdks/js-ts/advanced-configuration).

    You can learn more about setting up OpenTelemetry in your JS environment [here](https://opentelemetry.io/docs/languages/js/getting-started/nodejs/).

    <Info>
      If you are using Next.js, please use the OpenTelemetry setup via the `NodeSDK` described above rather than via `registerOTel` from `@vercel/otel`. This is because [the `@vercel/otel` package does not yet support the OpenTelemetry JS SDK v2](https://github.com/vercel/otel/issues/154) on which the `@abvdev/tracing` and `@abvdev/otel` packages are based.

      [See here for a full example for the Vercel AI SDK with NextJS on Vercel](/developer/sdks/js-ts/instrumentation).
    </Info>
  </Step>
</Steps>

# Client Setup

<Steps>
  <Step title="Installation" icon="download">
    ```bash theme={null}
    npm install @abvdev/client
    ```
  </Step>

  <Step title="Register your credentials" icon="key">
    Add your ABV credentials to your environment variables. Make sure that you have a `.env` file in your project root and a package like `dotenv` to load the variables.

    ```bash theme={null}
    ABV_API_KEY = "sk-abv-..."
    ABV_BASE_URL = "https://app.abv.dev" # US region
    # ABV_BASE_URL = "https://eu.app.abv.dev" # EU region
    ```
  </Step>

  <Step title="Initialize the client" icon="code">
    Initialize the `ABVClient` to interact with ABV. The client will automatically use the environment variables you set above.

    ```typescript title="client.ts" theme={null}
    import { ABVClient } from "@abvdev/client";

    const abv = new ABVClient();
    ```

    <Expandable title="Alternative: Configure via constructor">
      You can also pass configuration options directly to the constructor:

      ```typescript title="client.ts" theme={null}
      import { ABVClient } from "@abvdev/client";

      const abv = new ABVClient({
        apiKey: "sk-abv-...",
        baseUrl: "https://app.abv.dev", // US region
        // baseUrl: "https://eu.app.abv.dev", // EU region
      });
      ```
    </Expandable>
  </Step>
</Steps>

# Learn more

[Cookbook: Instrumentation](/developer/sdks/js-ts/cookbook)

[Advanced Usage](/developer/sdks/js-ts/advanced-configuration)