Add langfuse integration

Author: brendan-kellam

.github/workflows/_gcp-deploy.yml

@@ -60,6 +60,8 @@ jobs:
             NEXT_PUBLIC_SENTRY_ENVIRONMENT=${{ vars.NEXT_PUBLIC_SENTRY_ENVIRONMENT }}
             NEXT_PUBLIC_SENTRY_WEBAPP_DSN=${{ vars.NEXT_PUBLIC_SENTRY_WEBAPP_DSN }}
             NEXT_PUBLIC_SENTRY_BACKEND_DSN=${{ vars.NEXT_PUBLIC_SENTRY_BACKEND_DSN }}
+            NEXT_PUBLIC_LANGFUSE_PUBLIC_KEY=${{ vars.NEXT_PUBLIC_LANGFUSE_PUBLIC_KEY }}
+            NEXT_PUBLIC_LANGFUSE_BASE_URL=${{ vars.NEXT_PUBLIC_LANGFUSE_BASE_URL }}
             SENTRY_SMUAT=${{ secrets.SENTRY_SMUAT }}
             SENTRY_ORG=${{ vars.SENTRY_ORG }}
             SENTRY_WEBAPP_PROJECT=${{ vars.SENTRY_WEBAPP_PROJECT }}

packages/web/package.json

@@ -49,6 +49,9 @@
     "@hookform/resolvers": "^3.9.0",
     "@iconify/react": "^5.1.0",
     "@iizukak/codemirror-lang-wgsl": "^0.3.0",
+    "@opentelemetry/api-logs": "^0.203.0",
+    "@opentelemetry/instrumentation": "^0.203.0",
+    "@opentelemetry/sdk-logs": "^0.203.0",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.5",
     "@radix-ui/react-avatar": "^1.1.2",
@@ -97,6 +100,7 @@
     "@uidotdev/usehooks": "^2.4.1",
     "@uiw/codemirror-themes": "^4.23.6",
     "@uiw/react-codemirror": "^4.23.0",
+    "@vercel/otel": "^1.13.0",
     "@viz-js/lang-dot": "^1.0.4",
     "@xiechao/codemirror-lang-handlebars": "^1.0.4",
     "ai": "5.0.0-beta.21",
@@ -131,6 +135,8 @@
     "graphql": "^16.9.0",
     "http-status-codes": "^2.3.0",
     "input-otp": "^1.4.2",
+    "langfuse": "^3.38.4",
+    "langfuse-vercel": "^3.38.4",
     "lucide-react": "^0.517.0",
     "micromatch": "^4.0.8",
     "next": "14.2.26",

packages/web/src/app/api/(server)/chat/route.ts

@@ -29,6 +29,7 @@ import {
     UIMessageStreamOptions,
     UIMessageStreamWriter,
 } from "ai";
+import { randomUUID } from "crypto";
 import { StatusCodes } from "http-status-codes";
 import { z } from "zod";
 
@@ -153,6 +154,8 @@ const chatHandler = ({ messages, id, selectedRepos, languageModelId }: ChatHandl
                 }
             }
 
+            const traceId = randomUUID();
+
             // Extract user messages and assistant answers.
             // We will use this as the context we carry between messages.
             const messageHistory =
@@ -197,6 +200,7 @@ const chatHandler = ({ messages, id, selectedRepos, languageModelId }: ChatHandl
                                     data: source,
                                 });
                             },
+                            traceId,
                         });
 
                         await mergeStreamAsync(researchStream, writer, {
@@ -215,6 +219,7 @@ const chatHandler = ({ messages, id, selectedRepos, languageModelId }: ChatHandl
                                 totalOutputTokens: totalUsage.outputTokens,
                                 totalResponseTimeMs: new Date().getTime() - startTime.getTime(),
                                 modelName: languageModelConfig.displayName ?? languageModelConfig.model,
+                                traceId,
                             }
                         })
 

packages/web/src/env.mjs

@@ -113,6 +113,8 @@ export const env = createEnv({
         SOURCEBOT_CHAT_MAX_STEP_COUNT: numberSchema.default(20),
 
         DEBUG_WRITE_CHAT_MESSAGES_TO_FILE: booleanSchema.default('false'),
+
+        LANGFUSE_SECRET_KEY: z.string().optional(),
     },
     // @NOTE: Please make sure of the following:
     // - Make sure you destructure all client variables in
@@ -127,13 +129,18 @@ export const env = createEnv({
         NEXT_PUBLIC_POLLING_INTERVAL_MS: numberSchema.default(5000),
 
         NEXT_PUBLIC_SOURCEBOT_CLOUD_ENVIRONMENT: z.enum(SOURCEBOT_CLOUD_ENVIRONMENT).optional(),
+
+        NEXT_PUBLIC_LANGFUSE_PUBLIC_KEY: z.string().optional(),
+        NEXT_PUBLIC_LANGFUSE_BASE_URL: z.string().optional()
     },
     // For Next.js >= 13.4.4, you only need to destructure client variables:
     experimental__runtimeEnv: {
         NEXT_PUBLIC_POSTHOG_PAPIK: process.env.NEXT_PUBLIC_POSTHOG_PAPIK,
         NEXT_PUBLIC_SOURCEBOT_VERSION: process.env.NEXT_PUBLIC_SOURCEBOT_VERSION,
         NEXT_PUBLIC_POLLING_INTERVAL_MS: process.env.NEXT_PUBLIC_POLLING_INTERVAL_MS,
         NEXT_PUBLIC_SOURCEBOT_CLOUD_ENVIRONMENT: process.env.NEXT_PUBLIC_SOURCEBOT_CLOUD_ENVIRONMENT,
+        NEXT_PUBLIC_LANGFUSE_PUBLIC_KEY: process.env.NEXT_PUBLIC_LANGFUSE_PUBLIC_KEY,
+        NEXT_PUBLIC_LANGFUSE_BASE_URL: process.env.NEXT_PUBLIC_LANGFUSE_BASE_URL,
     },
     skipValidation: process.env.SKIP_ENV_VALIDATION === "1",
     emptyStringAsUndefined: true,

packages/web/src/features/chat/agent.ts

@@ -20,6 +20,7 @@ interface AgentOptions {
     inputMessages: ModelMessage[];
     inputSources: Source[];
     onWriteSource: (source: Source) => void;
+    traceId: string;
 }
 
 // If the agent exceeds the step count, then we will stop.
@@ -36,6 +37,7 @@ export const createAgentStream = async ({
     inputSources,
     selectedRepos,
     onWriteSource,
+    traceId,
 }: AgentOptions) => {
     const baseSystemPrompt = createBaseSystemPrompt({
         selectedRepos,
@@ -131,7 +133,14 @@ export const createAgentStream = async ({
                     })
                 }
             })
-        }
+        },
+        // Only enable langfuse traces in cloud environments.
+        experimental_telemetry: {
+            isEnabled: env.NEXT_PUBLIC_SOURCEBOT_CLOUD_ENVIRONMENT !== undefined,
+            metadata: {
+                langfuseTraceId: traceId,
+            },
+        },
     });
 
     return stream;

packages/web/src/features/chat/components/chatThread/answerCard.tsx

@@ -16,19 +16,28 @@ import { submitFeedback } from "../../actions";
 import { isServiceError } from "@/lib/utils";
 import { useDomain } from "@/hooks/useDomain";
 import useCaptureEvent from "@/hooks/useCaptureEvent";
+import { LangfuseWeb } from "langfuse";
+import { env } from "@/env.mjs";
 
 interface AnswerCardProps {
     answerText: string;
     messageId: string;
     chatId: string;
     feedback?: 'like' | 'dislike' | undefined;
+    traceId?: string;
 }
 
+const langfuseWeb = new LangfuseWeb({
+    publicKey: env.NEXT_PUBLIC_LANGFUSE_PUBLIC_KEY,
+    baseUrl: env.NEXT_PUBLIC_LANGFUSE_BASE_URL,
+});
+
 export const AnswerCard = forwardRef<HTMLDivElement, AnswerCardProps>(({
     answerText,
     messageId,
     chatId,
     feedback: _feedback,
+    traceId,
 }, forwardedRef) => {
     const markdownRendererRef = useRef<HTMLDivElement>(null);
     const { tocItems, activeId } = useExtractTOCItems({ target: markdownRendererRef.current });
@@ -55,13 +64,13 @@ export const AnswerCard = forwardRef<HTMLDivElement, AnswerCardProps>(({
 
     const onFeedback = useCallback(async (feedbackType: 'like' | 'dislike') => {
         setIsSubmittingFeedback(true);
-        
+
         const response = await submitFeedback({
             chatId,
             messageId,
             feedbackType
         }, domain);
-        
+
         if (isServiceError(response)) {
             toast({
                 description: `❌ Failed to submit feedback: ${response.message}`,
@@ -77,8 +86,14 @@ export const AnswerCard = forwardRef<HTMLDivElement, AnswerCardProps>(({
                 chatId,
                 messageId,
             });
+
+            langfuseWeb.score({
+                traceId: traceId,
+                name: 'user_feedback',
+                value: feedbackType === 'like' ? 1 : 0,
+            })
         }
-        
+
         setIsSubmittingFeedback(false);
     }, [chatId, messageId, domain, toast, captureEvent]);
 

packages/web/src/features/chat/components/chatThread/chatThreadListItem.tsx

@@ -410,6 +410,7 @@ export const ChatThreadListItem = forwardRef<HTMLDivElement, ChatThreadListItemP
                                 chatId={chatId}
                                 messageId={assistantMessage.id}
                                 feedback={messageMetadata?.feedback?.type}
+                                traceId={messageMetadata?.traceId}
                             />
                         ) : !isStreaming && (
                             <p className="text-destructive">Error: No answer response was provided</p>

packages/web/src/features/chat/types.ts

@@ -50,6 +50,7 @@ export const sbChatMessageMetadataSchema = z.object({
         userId: z.string(),
     }).optional(),
     selectedRepos: z.array(z.string()).optional(),
+    traceId: z.string().optional(),
 });
 
 export type SBChatMessageMetadata = z.infer<typeof sbChatMessageMetadataSchema>;

packages/web/src/instrumentation.ts

@@ -1,6 +1,20 @@
 import * as Sentry from '@sentry/nextjs';
+import { registerOTel } from '@vercel/otel';
+import { LangfuseExporter } from 'langfuse-vercel';
+import { env } from './env.mjs';
 
 export async function register() {
+    if (env.LANGFUSE_SECRET_KEY && env.NEXT_PUBLIC_LANGFUSE_PUBLIC_KEY) {
+        registerOTel({
+            serviceName: 'sourcebot',
+            traceExporter: new LangfuseExporter({
+                secretKey: env.LANGFUSE_SECRET_KEY,
+                publicKey: env.NEXT_PUBLIC_LANGFUSE_PUBLIC_KEY,
+                baseUrl: env.NEXT_PUBLIC_LANGFUSE_BASE_URL,
+            }),
+        });
+    }
+
     if (process.env.NEXT_RUNTIME === 'nodejs') {
         await import('../sentry.server.config');
     }