[Docs] Add LangGraph integration examples to JS/TS documentation

[cgx-avenue]

Describe the feature or potential improvement

Currently, the Langfuse JS/TS documentation lacks guidance on integrating with LangGraph. Given LangGraph's growing adoption for building stateful, multi-actor LLM applications, this gap makes it challenging for developers to monitor LangGraph-based workflows with Langfuse.

Suggested Improvement:
Add a new section under "Integrations" (e.g., docs/integrations/langgraph.md)
Include:

• Basic setup example (initializing Langfuse callbacks in LangGraph)
• State transition tracing (visualizing agent steps in Langfuse UI)
• Error logging for complex workflows

Reference existing Python LangGraph example for consistency.

Why this matters:
LangGraph users need standardized observability

• Reduces trial-and-error for stateful LLM app debugging
• Aligns with Langfuse’s goal to support popular LLM frameworks

Besides, now Python SDK has v3 version as OTEL-based, do you have a roadmap for JS/TS SDK to be OTEL-based as well?
Thanks!

Additional information

No response

[jannikmaierhoefer]

Hi @cgx-avenue, thanks for adding this. We have this on our project roadmap, and we'll add an example notebook soon.

[RizkyRajitha]

This will be really great to have. i can currently see traces but not as a graph view, not sure what is the issue.

current implementation.

import { CallbackHandler } from "langfuse-langchain";
import { ChatGoogleGenerativeAI } from "@langchain/google-genai";
import { tool } from "@langchain/core/tools";
import { z } from "zod";
import { Annotation, MessagesAnnotation, StateGraph } from "@langchain/langgraph";
import { HumanMessage, SystemMessage } from "@langchain/core/messages";
import { ToolNode } from "@langchain/langgraph/prebuilt";

const langfuseHandler = new CallbackHandler();

.... skipping logic....

const response = await model.invoke([...prompt], { callbacks: [langfuseHandler] });

langfuse output

i can see it does collect langgraph related metadata but it is not shown as a graph and also all node calls comes separately as traces not spans.

do i need to create traces and span separately ?

[RizkyRajitha]

solved it by adding langfuseHandler to app.invoke

const langfuseHandler = new CallbackHandler({
    userId: userId,
    sessionId: chatId,
    environment: APP_ENV
});

const res = await app.invoke({
    messages: [...]
}, { callbacks: [langfuseHandler] });

langfuse output

[jamesgasek]

Following

[macromrit]

Make sure to install necessary libraries as shown in the documentation. Then add the following imports:

import { NodeSDK } from "@opentelemetry/sdk-node";
import { LangfuseSpanProcessor } from "@langfuse/otel";
import { CallbackHandler } from "@langfuse/langchain";
import { CustomConfigService } from "../../config/custom.config.service";

Next, initialize the OpenTelemetry SDK with the Langfuse span processor and start it, then create the handler:

sdk = new NodeSDK({
  spanProcessors: [new LangfuseSpanProcessor()],
});
sdk.start();

handler = new CallbackHandler();

Then include the handler in your graph's config object alongside any other details:

const config = {
  // other config details
  callbacks: [handler],
};

Finally, pass the config when invoking the graph. In this case using stream() (general invokes can be used too) — just make sure the graph is compiled before calling it:

graph.stream(<YOUR_INPUT>, config);

langchain documentation for reference (switch to type script references in it): https://langfuse.com/integrations/frameworks/langchain

[jannikmaierhoefer]

Thanks @macromrit!