@youtoy(Yosuke Toyota)Team Energy Drinkin

Langfuse を軽く試してみる： OpenAI SDK（JS/TS）の組み合わせ

Last updated at 2026-04-16Posted at 2026-04-16

はじめに

ふとしたきっかけ（※）があり、アカウント作成だけやってみていた、Langfuse に関する話です。
※ 4/24 に Langfuse というものに関するイベントが身近な場所で開催される、という情報を知って、Langfuse はよく分かってないけどイベントには申し込んでみた

Langfuse の公式ページなど

Langfuse の公式ページは、以下になるようです。

●Langfuse
　https://langfuse.com/

当初は本当にアカウントを作成しただけ、という状態で、以下の画面が出たところまではやったという状況でした。

そして Langfuse について、今より少し理解を深めるために、とりあえず少し手を動かしてみました。

今回の記事の内容

アカウントを作っただけの状態から、もう少しお試しをやってみたというのが、今回の記事の内容です。

具体的には、公式ドキュメントにある以下の「Get Started with Tracing」をやってみるというものです。

●Get Started - Langfuse
　https://langfuse.com/docs/observability/get-started

Tracing を試す際のサンプルに関して、いくつかの SDK を使ったものが示されているようでした。それについて、とりあえず自分がわりと触ったことがあり、なおかつシンプルにお試しを進められそうな「OpenAI SDK（JS/TS）」を選んでみました。

実際にやってみる

進める手順に関して、上で少し掲載していた公式ドキュメントの冒頭に「Agentic installation」という部分もあります。しかし、今回は手を動かしつつ見ていきたいとうのがあったので、その下の「Manual installation」の内容で進めました。

APIキーの取得

上で書いたとおり、アカウント作成だけはやっていたので、その続きで APIキーを作成します。アカウントを作っただけの状態だと、APIキー取得のために Organization・Project を作っておく必要がありそうでした。

APIキー取得のための下準備

Organization・Project を作っていきます。Langfuse のアカウント作成だけをやった画面だと、以下の「New Organization」ボタンが出てきているので、これを押します。

そうすると以下の画面が表示されます。ここに出てきている Organization name は、入力サンプルとして出ている my-org と全く同じにしました。Type も Personal のままで進めます（「Create」ボタンを押して次に進みます）。

次は Organization へのメンバー追加です。自分だけが使うので、次へ進みます（自分のアカウントは、Owner として、既にメンバーリストに表示されています）。

次はプロジェクト作成です。Project name は、入力サンプルと全く同じにしました。

これで Organization・Project の作成は完了です。

APIキー取得

Organization・Project の作成が完了した後の画面は以下でした。Host Name は後で表示されるところがあったので、ここではあまり気にせず進んでいきます。
（※ Host Name に関わるところで、自分はアカウント作成時に「US」を選んでいたので、us が含まれた URL になっているようです）

左メニューにある API Keys を選びます。

まだ APIキーがないので、キーを作成していきます。以下の赤矢印で示したボタンを押します。

その後の画面で APIキーの名前を適当につけて、さらに次に進みました。そうすると、「API Keys」という内容として、「Secret Key」と「Public Key」が表示されます。

さらにその下には「.env」という内容で、「上記 2つのキー＋先ほども出ていた Host name」がセットになったものが表示されます。

この後で、「.env」のサンプルとして以下の形式で表示されたものを用いたり、それぞれ環境変数としてセットしたりなどという対応が必要です（それに加えて、今回野のお試しでは OpenAI の APIキーもセットする必要があります）。

LANGFUSE_SECRET_KEY="sk-lf-..."
LANGFUSE_PUBLIC_KEY="pk-lf-..."
LANGFUSE_BASE_URL="https://us.cloud.langfuse.com"

お試し用のコードの準備と処理の実行

それでは、お試し用のコードを作っていきます。

パッケージのインストール

そのために Node.js のパッケージをインストールします。公式ドキュメントを見つつ必要そうなパッケージを選びました（OpenAI の SDK も使うので、それも含めています）。

npm i openai @langfuse/openai @langfuse/otel @opentelemetry/sdk-node

インストール後、自分の環境では以下のバージョンのものがインストールされました。

お試し用のコードを書く

お試し用のコードを書いていきます。具体的には以下の内容です。

import OpenAI from "openai";
import { observeOpenAI } from "@langfuse/openai";
import { NodeSDK } from "@opentelemetry/sdk-node";
import { LangfuseSpanProcessor } from "@langfuse/otel";

const langfuseSpanProcessor = new LangfuseSpanProcessor();

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

await sdk.start();

const openai = observeOpenAI(new OpenAI());
// const inputText = "あなたは誰？";
const inputText = "Langfuseについて短く説明して";

try {
  const response = await openai.responses.create({
    model: "gpt-5.4-mini",
    input: inputText,
  });

  console.log(response.output_text);
  console.log("\nResponse:");
  console.log("Usage:", response.usage);
} finally {
  await langfuseSpanProcessor.forceFlush();
  await sdk.shutdown();
}

上記は、公式ドキュメントに出てきている以下をもとにしたものです。

以下のサンプルは Chat Completions API を使ったものになっていたので、それを Responses API を使ったものにしています。

さらに、上記に追加する必要がある処理がいくつかあったようなので、公式情報を見つつ必要そうな内容をコードに追加しています。

処理の実行と得られた結果

あとは処理を実行するだけです。今回の内容を実行するにあたり、以下の環境変数が使える状態にしてください。

OPENAI_API_KEY=【OpenAI の APIキー】
LANGFUSE_PUBLIC_KEY=【Langfuse の Secret Key】
LANGFUSE_SECRET_KEY=【Langfuse の Public Key】
LANGFUSE_BASE_URL=【Langfuse の Host Name】

以下は、inputText を「あなたは誰？」という内容にした時のものです。