4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Langfuseのミートアップに参加したので、Langfuseを試してみた

Posted at

はじめに

つい先日、Langfuseをほぼ知らない状態で、Langfuse Night #1に、先輩社員の方に誘われて行きました。
そこでの登壇やその後の懇親会での話を聞く感じ、現在携わっているAIアプリにもLangfuseが有用そうだったので、Langfuseを試してみました。

Langfuseとは?

Langfuse は、LLMアプリケーションの管理を支援するオープンソースのツールで、プロンプトのバージョン管理、コスト分析、LLM の出力評価などを一元的に管理できます。
似たようなツールにLangsmithというのもありますが、こちらはフルマネージドで、今開発してるアプリの制約的にセルフホスティングの必要があるので、今のアプリにはLangfuseの方が合いそうだと思いました。

環境

AIアプリとLangfuse、どちらもローカルで動かします。
AIアプリの方はフロントとバックを両方Next.jsで構築しています。
AIアプリは、OpenAIを使用しています。

Langfuseの環境構築

dockerが楽そうだったので、dockerで構築
公式サイトの手順に沿って構築しました。

git clone https://github.com/langfuse/langfuse.git
cd langfuse
docker compose up

port3000は既に使用済みだったので、docker-compose.ymlのport部分を以下のように修正

    ports:
      - "3001:3000"
    environment:
      <<: *langfuse-worker-env
      NEXTAUTH_URL: http://localhost:3001

Langfuseのセットアップ

http://localhost:3001にアクセスし、新規アカウントを作成(ローカルに作成されるだけなので適当でOK)

image.png

New Organizationをクリック
image.png

Organizationを入力してCreateをクリック
image.png

Nextを押す
image.png

プロジェクト名を入力してCreate
image.png

この画面になったら左のAPI Keysを押す
image.png

Crerate new API keysを押す
image.png

APIキーを取得 パブリックキーとシークレットキーを控えておく(シークレットキーはこれを閉じると見えなくなる)
image.png
(キーを隠す必要はないのですが一応隠しています。)

これでlangfuse側の設定は完了

アプリ側の設定

前述した通り、アプリはバックもフロントもNext.jsで構築しています。
TSのOpenAI SDKをラップしようと思うので、OpenAI Integration (JS/TS)を参考にします。

インストール

npm i langfuse

でlangfuseをインストール

環境変数

一応APIキーなどは環境変数に出しておきます。ここには、先程控えておいたシークレットキーとパブリックキーを設定します。

LANGFUSE_HOST=http://localhost:3001/
LANGFUSE_PUBLIC_KEY=<先ほど控えておいたパブリックキー>
LANGFUSE_SECRET_KEY=<先ほど控えておいたシークレットキー>

OpenAI SDKをラップする

import { observeOpenAI } from 'langfuse';
const openAI = new OpenAI(parameter)

で作成していたOpenAIインスタンスを、以下のようにラップします。

const openAI =  observeOpenAI(new OpenAI(parameter), {
    clientInitParams: {
      publicKey: process.env.LANGFUSE_PUBLIC_KEY,
      secretKey: process.env.LANGFUSE_SECRET_KEY,
      baseUrl: process.env.LANGFUSE_HOST,
    },
  });

これでAIアプリ側の設定も完了です。めっちゃ簡単。

Langfuseを動かしてみる

大筋とは関係ないのですが、ここで少しハマりました。LangfuseもAIアプリもNextAuthを利用しているのですが、同じブラウザでLangfuseとアプリを開くとNextAuth関連のエラーが出る(勝手にログアウトされる)ので、別々のブラウザで開くようにしました。

AIアプリ内で、AIにプロンプトを投げると以下のようなプロンプトのトレースができるようになりました。(情報が情報なだけにモザイクです... すみません...)

image.png

image.png

今後の展望

現在、回答精度向上の話が出てきているので、その管理にLangfuseが使えたらいいなと思っています。
Ragasの結果とかもLangfuseで管理できたら良さそう。

まだローカルでの動作段階なので簡単に構築できましたが、これをデプロイして動かすとなると結構面倒そうだなと思いました。(特にv3になってから構築が面倒になったとか...)

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?