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

# Vercel

## 1. Installation

First install the TraceAI + Vercel packages (and OpenTelemetry peer deps). Pick your favourite package manager:

<CodeGroup>
  ```bash npm theme={null}
  npm install @traceai/vercel @vercel/otel \
    @opentelemetry/api @opentelemetry/sdk-trace-base \
    @opentelemetry/exporter-trace-otlp-grpc @grpc/grpc-js \
    @ai-sdk/openai
  ```

  ```bash yarn theme={null}
  yarn add @traceai/vercel @vercel/otel \
    @opentelemetry/api @opentelemetry/sdk-trace-base \
    @opentelemetry/exporter-trace-otlp-grpc @grpc/grpc-js \
    @ai-sdk/openai
  ```

  ```bash pnpm theme={null}
  pnpm add @traceai/vercel @vercel/otel \
    @opentelemetry/api @opentelemetry/sdk-trace-base \
    @opentelemetry/exporter-trace-otlp-grpc @grpc/grpc-js \
    @ai-sdk/openai
  ```
</CodeGroup>

> **Note** Vercel currently supports OpenTelemetry **v1.x**. Avoid installing `@opentelemetry/*` 2.x packages.

***

## 2. Set Environment Variables

Configure your Future AGI credentials (locally via `.env`, or in Vercel **Project → Settings → Environment Variables**).

```bash theme={null}
FI_API_KEY=<YOUR_FI_API_KEY>
FI_SECRET_KEY=<YOUR_FI_SECRET_KEY>
```

***

## 3. Initialise tracing

Create `instrumentation.ts` and import it **once** on the server (e.g. in `_app.tsx` or at the top of your first API route).

```typescript JS/TS title="instrumentation.ts" theme={null}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore — module ships without types
import { registerOTel } from "@vercel/otel";
import { diag, DiagConsoleLogger, DiagLogLevel } from "@opentelemetry/api";
import { FISimpleSpanProcessor, isFISpan } from "@traceai/vercel";
import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-grpc";
import { Metadata } from "@grpc/grpc-js";

// Optional: verbose console logs while testing
diag.setLogger(new DiagConsoleLogger(), DiagLogLevel.DEBUG);

export function register() {
  registerOTel({
    attributes: {
      project_name: "vercel-project",
      project_type: "observe",
    },
    spanProcessors: [
      new FISimpleSpanProcessor({
        exporter: (() => {
          const meta = new Metadata();
          meta.set("x-api-key", process.env.FI_API_KEY ?? "");
          meta.set("x-secret-key", process.env.FI_SECRET_KEY ?? "");
          return new OTLPTraceExporter({ url: "grpc://grpc.futureagi.com", metadata: meta });
        })(),
        // Export only TraceAI spans (remove if you want everything)
        spanFilter: isFISpan,
      }),
    ],
  });
}
```

***

## 4. Instrument an API Route

Our instrumentation is automatic—just **import and call** the `register` function inside each serverless function.

```typescript JS/TS title="pages/api/story.ts" theme={null}
import type { NextApiRequest, NextApiResponse } from "next";
import { register as registerTracing } from "../../instrumentation";
import { generateText } from "ai";
import { openai } from "@ai-sdk/openai";

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  registerTracing(); // initialise OTEL + exporters

  const result = await generateText({
    model: openai("gpt-4o-mini"),
    prompt: "Write a short creative story about a time-traveling detective.",
    experimental_telemetry: { isEnabled: true }, // ⇢ creates spans for each call
    maxTokens: 300,
  });

  res.status(200).json({
    story: result.text?.trim() ?? "n/a",
  });
}
```

That’s it—deploy to Vercel and watch traces flow into **Observe → Traces** in real time 🎉