Vercel AI SDK

OpenTelemetry (OTel) を使用すると、Weave で Vercel AI SDK の 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 を参照してください。

前提条件

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

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

npm install ai @ai-sdk/openai @opentelemetry/api @opentelemetry/sdk-trace-node @opentelemetry/sdk-trace-base @opentelemetry/exporter-trace-otlp-proto @opentelemetry/resources zod

次の環境変数を設定します。
export WANDB_API_KEY="your-wandb-api-key" export OPENAI_API_KEY="your-openai-api-key"
W&B APIキーは User Settings から取得できます。

Next.js 向けに OTel トレースを設定する

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

インストルメンテーションを設定する

Next.js アプリケーションでは、OTel を設定するために instrumentation.ts ファイルを使用します。このファイルはサーバーの起動時に 1 回実行され、AI SDK が使用するトレーサープロバイダーを設定します。 Weave を Vercel の OTel 機能と統合するには、project ルートに instrumentation.ts ファイルを作成し、次のコードを追加します。その際、resourceFromAttributes() 関数をご使用のチーム名とプロジェクト名に合わせて更新してください。

instrumentation.ts

// @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 スパンを出力します。

route.ts

// @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 に送信するよう設定されました。

Node.js 用に OTel トレースを設定する

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

test-app.ts

// @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 サーバーなど) では、この操作は不要です。

スタートガイド

ガイド

クックブック

リファレンス

詳細とサポート

前提条件

Next.js 向けに OTel トレースを設定する

インストルメンテーションを設定する

関数のテレメトリーを設定する

Node.js 用に OTel トレースを設定する

​前提条件

​Next.js 向けに OTel トレースを設定する

​インストルメンテーションを設定する

​関数のテレメトリーを設定する

​Node.js 用に OTel トレースを設定する

前提条件

Next.js 向けに OTel トレースを設定する

インストルメンテーションを設定する

関数のテレメトリーを設定する

Node.js 用に OTel トレースを設定する