JS/TS SDK (Web)

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>
  );
}

<template>
  <div>
    <button @click="handleUserFeedback(1)">👍</button>
    <button @click="handleUserFeedback(0)">👎</button>
  </div>
</template>
 
<script>
  import { LangfuseWeb } from "langfuse";
 
  export default {
    props: {
      traceId: {
        type: String,
        required: true,
      },
    },
    data() {
      return {
        langfuseWeb: null,
      };
    },
    created() {
      this.langfuseWeb = new LangfuseWeb({
        publicKey: process.env.VUE_APP_LANGFUSE_PUBLIC_KEY,
        baseUrl: "https://cloud.langfuse.com", // 🇪🇺 EU region
        // baseUrl: "https://us.cloud.langfuse.com", // 🇺🇸 US region
      });
    },
    methods: {
      async handleUserFeedback(value) {
        await this.langfuseWeb.score({
          traceId: this.traceId,
          name: "user_feedback",
          value,
        });
      },
    },
  };
</script>

npm i langfuse

pnpm add langfuse

yarn add langfuse

bun add langfuse