00 Setup

Workshop source

Workshop material is maintained in the public langfuse/langfuse-workshop repository. Use the repository for the runnable app, checkpoint branches, and local setup.

View this Markdown file

Goal

Have the workshop app running locally with both OpenAI and Langfuse credentials in place. From here you can skim 01-base-app, then start building in 02-tracing.

Starting point

Use the setup checkpoint for this chapter:

git checkout checkpoint/00-setup

This checkpoint intentionally contains the same untraced base app as checkpoint/01-base-app. Use it to confirm that your API keys, dependencies, and local ports work before switching to the build chapters. The Langfuse keys are configured now, but traces start only after you add instrumentation in 02-tracing.

Step 1 — Get the API keys

OpenAI — platform.openai.com → API Keys → create one. Copy the sk-... value.
Langfuse — sign up at langfuse.com on the EU region, create a project, and copy the public + secret keys from Settings → API Keys.

Step 2 — Configure `.env`

cp .env.example .env

Fill in:

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

Leave the rest of the defaults as they are.

Keep these values in your local .env only. Do not paste real API keys into shared workshop notes, transcripts, screenshots, or chat messages.

Step 3 — Configure the Langfuse evaluator model

Later chapters use LLM-as-a-judge evaluators. Langfuse runs those judge calls from an LLM Connection inside your Langfuse project, so configure it before you reach monitoring or experiments.

In Langfuse, open Project Settings → LLM Connections.
Click Add new LLM API key.
Choose OpenAI, name the connection, and paste your OpenAI API key into the secret field.
Save the connection.
Open Evaluators → Set up evaluator. If Langfuse asks for the default model first, choose the OpenAI connection and a structured-output-capable model such as openai / gpt-4.1, then save.

After the default evaluator model is saved, you can close the evaluator setup flow. Chapters 04-monitoring and 06-experiments will return to this screen to pick the published evaluator templates.

Step 4 — Install and run

npm install
npm run dev

Open http://127.0.0.1:3333.

Step 5 — Confirm what you see

You should see the Dad IT Support Agent chat:

the Specs mascot up top
a greeting from Specs
suggestion chips below the greeting
the iPhone panel on the right ("Dad" + iPhone 15 details)

How to verify you are done

npm run dev is running and listening on http://127.0.0.1:3333 (client) and http://127.0.0.1:8787 (server).
The browser shows the Specs greeting, not an error.
Sending one of the suggestion chips returns a real iPhone answer from the model.

End state

Your environment is ready. To build the workshop step-by-step, skim 01-base-app if you want the app tour, then check out checkpoint/02-tracing for the first code changes.

Was this page helpful?

On this page