DocsSDKsJS/TSGuide (Web)

JS/TS SDK (Web)

Github repository langfuse/langfuse-jsCI test statusnpm langfuse

The langfuse JS/TS SDK can be used to report scores client-side directly from the browser. It is commonly used to ingest scores into Langfuse which are based on implicit user interactions and feedback.

→ Read more on Scores in Langfuse and collecting user feedback

Example

import { LangfuseWeb } from "langfuse";
 
export function UserFeedbackComponent(props: { traceId: string }) {
  const langfuseWeb = new LangfuseWeb({
    publicKey: env.NEXT_PUBLIC_LANGFUSE_PUBLIC_KEY,
    baseUrl: "https://cloud.langfuse.com", // 🇪🇺 EU region
    // baseUrl: "https://us.cloud.langfuse.com", // 🇺🇸 US region
  });
 
  const handleUserFeedback = async (value: number) =>
    await langfuseWeb.score({
      traceId: props.traceId,
      name: "user_feedback",
      value,
    });
 
  return (
    <div>
      <button onClick={() => handleUserFeedback(1)}>👍</button>
      <button onClick={() => handleUserFeedback(0)}>👎</button>
    </div>
  );
}

We integrated the Web SDK into the Vercel AI Chatbot project to collect user feedback on individual messages. Read the blog post for more details and code examples.

Installation

npm i langfuse

In your application, set the public api key to create a client.

import { LangfuseWeb } from "langfuse";
 
const langfuseWeb = new LangfuseWeb({
  publicKey: "pk-lf-...",
  baseUrl: "https://cloud.langfuse.com", // 🇪🇺 EU region
  // baseUrl: "https://us.cloud.langfuse.com", // 🇺🇸 US region
});

Hint for Next.js users: you need to prefix the public key with NEXT_PUBLIC_ to expose it in the frontend.

Options

VariableDescriptionDefault value
baseUrlBaseUrl of the Langfuse API; for US data region, set to "https://us.cloud.langfuse.com""https://cloud.langfuse.com"
releaseThe release number/hash of the application to provide analytics grouped by release.process.env.LANGFUSE_RELEASE or common system environment names
requestTimeoutTimeout in ms for requests10000

Create scores

Scores are used to evaluate executions/traces. They are attached to a single trace. If the score relates to a specific step of the trace, the score can optionally also be attached to the observation to enable evaluating it specifically.

→ Read more on Scores in Langfuse

While integrating Langfuse, it is important to either include the Langfuse Ids in the response to the frontend or to use an own id as the trace id which is available in both backend and frontend.

// pass traceId and observationId to front end
await langfuseWeb.score({
  traceId: message.traceId,
  observationId: message.observationId,
  name: "user-feedback",
  value: 1,
  comment: "I like how personalized the response is",
});

langfuseWeb.score() takes the following parameters

parametertypeoptionaldescription
traceIdstringnoThe id of the trace to which the score should be attached. Pass trace.id from backend or use a shared id that’s available in backend and frontend (then set it in backend as trace id via langfuse.trace({id: <yourTraceId>})).
observationIdstringyesThe id of the observation to which the score should be attached. Pass from backend trace. E.g. {generation, event, span}.id
namestringnoIdentifier of the score.
valuenumbernoThe value of the score. Can be any number, often standardized to 0..1
commentstringyesAdditional context/explanation of the score.

Was this page useful?

Questions? We're here to help

Subscribe to updates