00 セットアップ

ワークショップアプリがローカルで実行され、OpenAIとLangfuseの認証情報が配置されます。ここから01-base-appをスキャンしてから、02-tracingで構築を開始できます。

ワークショップマテリアルは公開 langfuse/langfuse-workshop リポジトリで保守されています。実行可能なアプリ、チェックポイントブランチ、ローカルセットアップについてはリポジトリを使用してください。

ゴール

ワークショップアプリがローカルで実行され、OpenAIとLangfuseの認証情報が配置されます。ここから 01-base-app をスキャンしてから、02-tracing で構築を開始できます。

前提条件

Node.js ^20.19.0 || >=22.12.0 — node -v で確認し、以下の場合はアップグレードしてください (nvm install 22、または asdf、fnm、volta の相当版)。

より古いバージョンは誤解しやすい方法で失敗します。Viteのプラットフォーム固有のバイナリはオプションの依存関係であるため、npmはそれをスキップします エラーを報告せずに: npm install は成功したように見え、npm run dev がViteを起動できない場合にのみ問題が現れます。Node をインストール後にアップグレードした場合は、npm ci を再実行して、スキップされたバイナリを取得します。

開始ポイント

ワークショップリポジトリをクローンし、入力してから、このチャプターのセットアップチェックポイントをチェックアウトします:

git clone https://github.com/langfuse/langfuse-workshop.git
cd langfuse-workshop
git checkout checkpoint/00-setup

このチェックポイントは、checkpoint/01-base-app と同じトレースされていない基本アプリを意図的に含んでいます。トレース化の章に切り替える前に、APIキー、依存関係、ローカルポートが機能することを確認するために使用します。Langfuseキーは今構成されていますが、トレースは 02-tracing で計装を追加した後にのみ開始されます。

ステップ1 — APIキーを取得する

OpenAI — platform.openai.com → API Keys → 作成します。sk-... の値をコピーします。
Langfuse — langfuse.com で EU地域 にサインアップし、プロジェクトを作成し、Settings → API Keys から公開キー + 秘密鍵をコピーします。

ステップ2 — Langfuseスキルとランチェックをインストールします

後のモジュールは、langfuse スキルとLangfuse CLIが必要なコーディングエージェントを介してLangfuseを駆動します。

これをコーディングエージェントに貼り付けます:

"https://github.com/langfuse/skills/tree/main/skills/langfuse から langfuse スキルをインストールし、npm install -g langfuse-cli でLangfuse CLIをインストールしてください。"

自分でインストールすることを好みます:

# Langfuse CLI
npm install -g langfuse-cli

# Langfuse Skill:
npx skills add langfuse/skills --skill "langfuse"

ステップ3 — `.env` を設定します

cp .env.example .env

に入力してください:

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

残りのデフォルト値はそのままにしてください。

ワークショップアプリは常にサーバーとヘルパースクリプトのこのリポジトリの .env ファイルをロードします。LANGFUSE_*、OPENAI_*、または DATASET_NAME の値が別のプロジェクトからシェルにエクスポートされている場合、このファイルをオーバーライドしません。ワークショップ構成を変更するには、.env を編集します。

これらの値をローカル .env のみに保持してください。実際のAPIキーを共有ワークショップメモ、トランスクリプト、スクリーンショット、またはチャットメッセージに貼り付けないでください。

ステップ4 — インストールと実行

npm install
npm run dev

http://127.0.0.1:3333 を開きます。

サーバーを個別に確認したい場合は、http://127.0.0.1:8787/api/health または http://127.0.0.1:8787/api/support-context を確認してください。npm run dev の間、127.0.0.1:8787/ はメインアプリURLではありません。

127.0.0.1:3333 に何も読み込まない場合は、npm run dev 出力を [dev:client] 行までスクロールバックしてください。concurrently はViteがクラッシュしても APIサーバーを実行したままにするため、ターミナルはまだ生きているように見えます — 127.0.0.1:8787/ を開くと、その状態で ENOENT ... dist/index.html で応答し、これは本番ビルドが存在しないことのみを意味し、実際の障害については何も言いません。これらの [dev:client] 行での Cannot find native binding クラッシュはNode バージョンです。前提条件を参照してください。

ステップ5 — 表示されている内容を確認

あなたは Dad IT Support Agent チャットを見る必要があります:

上部のSpecsマスコット
Specsからのグリーティング
グリーティング下のサジェスションチップ
右側のiPhoneパネル("Dad" + iPhone 15の詳細)

Specsがチケットを処理する方法 — 1つのエージェント、2つのツール、1つのモデル、各ホップはトレースの観察です。

完了したことを確認する方法

npm run dev が実行され、http://127.0.0.1:3333 (クライアント) と http://127.0.0.1:8787 (APIサーバー) でリッスンしている。
http://127.0.0.1:8787/api/health または http://127.0.0.1:8787/api/support-context が実際の応答を返す。
ブラウザはエラーではなく、Specsグリーティングを表示する。
サジェスションチップの1つを送信すると、モデルから実際のiPhone回答が返される。

最終状態

あなたの環境は準備ができています。ワークショップをステップバイステップで構築するには、アプリツアーが必要な場合は 01-base-app をスキャンしてから、最初のコード変更については checkpoint/02-tracing をチェックアウトします。

ゴール