> ## Documentation Index
> Fetch the complete documentation index at: https://docs.coreweave.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Vercel AI SDK
> OpenTelemetry を使用して Vercel AI SDK の Call を Weave でトレースする
[OpenTelemetry (OTel)](https://opentelemetry.io/) を使用すると、[Vercel AI SDK](https://ai-sdk.dev/) の Call を Weave でトレースできます。Vercel AI SDK は、AI を活用したアプリケーションを構築するための TypeScript ツールキットで、Next.js、Nuxt、SvelteKit などのフレームワークに対応しています。また、`experimental_telemetry` オプションによる OpenTelemetry サポートが組み込まれています。
このガイドでは、Vercel AI SDK のトレースを Weave に送信するよう OTel を設定し、Weights & Biases UI で AI SDK の Call を監視・デバッグできるようにする方法を説明します。AI SDK は Next.js と組み合わせて使用することも、スタンドアロンの Node.js アプリケーションで使用することもできます。このガイドは、Vercel AI SDK を使って AI を活用したアプリケーションを構築しており、既存のアプリケーションにトレースを追加したい開発者を対象としています。
Weave での OTel トレースの詳細については、[OTel トレースを Weave に送信する](/ja/products/wandb/weave/guides/tracking/otel)を参照してください。
前提条件
始める前に、以下のセットアップを完了してください。このガイドの Next.js と Node.js のサンプルでは、どちらも同じ依存関係が必要です。
1. 以下の Vercel および OTel ライブラリをインストールします。
```bash theme={"system"}
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={"system"}
export WANDB_API_KEY="your-wandb-api-key"
export OPENAI_API_KEY="your-openai-api-key"
```
W\&B APIキーは [User Settings](https://forge.coreweave.com/settings) から取得できます。
このセクションでは、Next.js アプリで Weave を設定する方法を説明します。この例はアプリ全体ではなく、インストルメンテーションの設定と、Vercel AI SDK の関数 (ここでは OpenAI の Call) に対してインストルメンテーションを呼び出す方法のみを示しています。
Next.js アプリケーションでは、`instrumentation.ts` ファイルを使用して OTel を設定します。このファイルはサーバーの起動時に一度だけ実行され、AI SDK が使用するトレーサープロバイダーを設定します。
Weave を Vercel の OTel 機能と統合するには、project のルートに `instrumentation.ts` ファイルを作成し、次のコードを追加します。その際、`resourceFromAttributes()` 関数内のチーム名とプロジェクト名をご自身のものに置き換えてください。
```typescript lines {17-19} title="instrumentation.ts" theme={"system"}
// @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 エクスポーターが作成されます。
インストルメンテーションを追加したら、AI SDK の任意の関数 Call で Vercel の `experimental_telemetry` オプションを使用し、OTel スパンを出力します。
```typescript lines {10} title="route.ts" theme={"system"}
// @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 はすべて OTel スパンを生成し、それらのスパンは Weave にエクスポートされます。これで、Next.js アプリから Vercel AI SDK のトレースを Weave に送信するための設定が完了しました。
Next.js を使用していない場合は、スタンドアロンの Node.js アプリケーションで OTel を直接設定できます。スタンドアロンの Node.js アプリケーションでは、エントリファイルの先頭で、AI SDK の Call より前にトレーサープロバイダーを設定してください。これにより、以降の AI SDK の Call が取得されるようになります。
前提条件を満たしていれば、追加の設定なしで次の例を実行し、スパンを生成できます。
```typescript lines {11-14,18-19,31} title="test-app.ts" theme={"system"}
// @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 の開発サーバーなど) では、この処理は不要です。