JS/TS SDK (Web)

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,
  });
 
  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: process.env.LANGFUSE_PUBLIC_KEY,
});

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

Options

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

// 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