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

# Vercel AI SDK

> OpenTelemetry を使用して Weave で Vercel AI SDK の Call をトレースする

[OpenTelemetry (OTel)](https://opentelemetry.io/) を使用すると、Weave で [Vercel AI SDK](https://ai-sdk.dev/) の Call をトレースできます。Vercel AI SDK は、Next.js、Nuxt、SvelteKit などのフレームワークをサポートし、AI を活用したアプリケーションを構築するための TypeScript ツールキットです。`experimental_telemetry` オプションを通じて、OpenTelemetry を組み込みでサポートしています。

このガイドでは、Vercel AI SDK から Weave にトレースを送信するように OTel を設定し、Weave UI で AI SDK の Call を確認してデバッグできるようにする方法を説明します。AI SDK は、Next.js と組み合わせて使用することも、スタンドアロンの Node.js アプリケーションとして使用することもできます。このガイドは、既存のアプリにトレースを追加したい、Vercel AI SDK で AI を活用したアプリケーションを構築する開発者を対象としています。

Weave での OTel トレースの詳細については、[Send OTel traces to Weave](../tracking/otel) を参照してください。

<div id="prerequisites">
  ## 前提条件
</div>

開始する前に、次のセットアップを完了してください。このガイドの Next.js と Node.js の例では、どちらも同じ依存関係が必要です。

1. 次の Vercel および OTel ライブラリをインストールします。

   ```bash theme={null}
   npm install ai @ai-sdk/openai @opentelemetry/api @opentelemetry/sdk-trace-node @opentelemetry/sdk-trace-base @opentelemetry/exporter-trace-otlp-proto @opentelemetry/resources zod
   ```

2. 次の環境変数を設定します。

   ```bash theme={null}
   export WANDB_API_KEY="your-wandb-api-key"
   export OPENAI_API_KEY="your-openai-api-key"
   ```

   W\&B APIキーは [User Settings](https://wandb.ai/settings) から取得できます。

<div id="configure-otel-tracing-for-nextjs">
  ## Next.js 向けに OTel トレースを設定する
</div>

このセクションでは、Next.js アプリで Weave を設定する方法を説明します。この例にはアプリ全体は含まれておらず、インストルメンテーションの設定と、Vercel AI SDK の関数でインストルメンテーションを呼び出す方法のみを示しています。この場合は、OpenAI への Call です。

<div id="configure-instrumentation">
  ### インストルメンテーションを設定する
</div>

Next.js アプリケーションでは、OTel を設定するために `instrumentation.ts` ファイルを使用します。このファイルはサーバーの起動時に 1 回実行され、AI SDK が使用するトレーサープロバイダーを設定します。

Weave を Vercel の OTel 機能と統合するには、project ルートに `instrumentation.ts` ファイルを作成し、次のコードを追加します。その際、`resourceFromAttributes()` 関数をご使用のチーム名とプロジェクト名に合わせて更新してください。

```typescript twoslash lines {17-19} title="instrumentation.ts" theme={null}
// @noErrors
import { NodeTracerProvider } from "@opentelemetry/sdk-trace-node";
import { BatchSpanProcessor } from "@opentelemetry/sdk-trace-base";
import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-proto";
import { resourceFromAttributes } from "@opentelemetry/resources";

export function register() {
  const WANDB_API_KEY = process.env.WANDB_API_KEY!;

// W&B Weave エンドポイントを使用するよう OTel エクスポーターを設定します。
  const exporter = new OTLPTraceExporter({
    url: "https://trace.wandb.ai/otel/v1/traces",
    headers: { "wandb-api-key": WANDB_API_KEY },
  });

// W&B の認証情報を設定します。
  const provider = new NodeTracerProvider({
    resource: resourceFromAttributes({
      "wandb.entity": "[YOUR-TEAM-NAME]",
      "wandb.project": "[YOUR-PROJECT-NAME]",
    }),
    spanProcessors: [new BatchSpanProcessor(exporter)],
  });

  provider.register();
}
```

これにより、W\&B APIキーで認証し、トレースデータをWeaveのOTelエンドポイントに送信するよう設定されたOTLPエクスポーターが作成されます。

<div id="configure-telemetry-on-a-function">
  ### 関数のテレメトリーを設定する
</div>

インストルメンテーションを追加したら、任意の AI SDK の関数Callで Vercel の `experimental_telemetry` オプションを使用して、OTel スパンを出力します。

```typescript twoslash lines {10} title="route.ts" theme={null}
// @noErrors
import { openai } from "@ai-sdk/openai";
import { generateText } from "ai";

export async function POST(req: Request) {
  const { prompt } = await req.json();

// 関数に experimental_telemetry フィールドを追加します。
  const result = await generateText({
    model: openai("gpt-4o-mini"),
    prompt,
    experimental_telemetry: { isEnabled: true },
  });

  return Response.json({ text: result.text });
}
```

テレメトリーを有効にしたすべての `generateText` Callで、Weave にエクスポートされる OTel スパンが生成されます。これで、Next.js アプリは Vercel AI SDK のトレースを Weave に送信するよう設定されました。

<div id="configure-otel-tracing-for-nodejs">
  ## Node.js 用に OTel トレースを設定する
</div>

Next.js を使用していない場合は、スタンドアロンの Node.js アプリケーションで OTel を直接設定できます。スタンドアロンの Node.js アプリケーションでは、後続の AI SDK Call が取得されるように、AI SDK Call を行う前にエントリファイルの先頭でトレーサープロバイダーを設定します。

前提条件を満たしたら、追加の設定なしで次の例を実行し、スパンを生成できます。

```typescript twoslash lines {11-14,18-19,31} title="test-app.ts" theme={null}
// @noErrors
import { NodeTracerProvider } from "@opentelemetry/sdk-trace-node";
import { BatchSpanProcessor } from "@opentelemetry/sdk-trace-base";
import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-proto";
import { resourceFromAttributes } from "@opentelemetry/resources";
import { openai } from "@ai-sdk/openai";
import { generateText } from "ai";

const WANDB_API_KEY = process.env.WANDB_API_KEY!;

// W&B Weave エンドポイントを使用するよう OTel エクスポーターを設定します。
const exporter = new OTLPTraceExporter({
  url: "https://trace.wandb.ai/otel/v1/traces",
  headers: { "wandb-api-key": WANDB_API_KEY },
});

// W&B の認証情報を設定します。
const provider = new NodeTracerProvider({
  resource: resourceFromAttributes({
    "wandb.entity": "[YOUR-TEAM-NAME]",
    "wandb.project": "[YOUR-PROJECT-NAME]",
  }),
  spanProcessors: [new BatchSpanProcessor(exporter)],
});

provider.register();

// 関数に experimental_telemetry フィールドを追加します。
async function main() {
  const result = await generateText({
    model: openai("gpt-4o-mini"),
    prompt: "Explain OpenTelemetry in one sentence.",
    experimental_telemetry: { isEnabled: true },
  });

  console.log(result.text);

  await provider.shutdown();
}

main();
```

`BatchSpanProcessor` はスパンを非同期でフラッシュします。スタンドアロン スクリプト、サーバーレス関数、CLI ツールなど、短時間で終了するプロセスでは、すべてのスパンが Weave に送信されるよう、プロセスの終了前に `provider.shutdown()` を呼び出してください。長時間稼働するサーバー (`instrumentation.ts` 経由で起動した Next.js の dev サーバーなど) では、この操作は不要です。