Enhancing Your LLM App with User Feedback Using Langtrace

import { FOOD_DATA_PROMPT } from "@/lib/constants";
import * as Langtrace from "@langtrase/typescript-sdk";
import { NextRequest, NextResponse } from "next/server";
import * as openai from "openai";
import { OpenAI } from "openai";
Langtrace.init({
  api_key: "LANGTRACE_API_KEY",
  instrumentations: {
    openai,
  },
});

export async function POST(req: NextRequest) {
  const formData = await req.formData();
  const file = formData.get("file");

  let response = null;
  let spanId = null;
  let traceId = null;

  if (file && file instanceof File) {
    const client = new OpenAI({
      apiKey: "OPENAI_API_KEY",
    });
    const arrayBuffer = await file.arrayBuffer();
    const buffer = Buffer.from(arrayBuffer);
    const base64 = buffer.toString("base64");

    await Langtrace.withLangTraceRootSpan(async (spanId, traceId) => {
      response = await client.chat.completions.create({
        model: "gpt-4-turbo",
        messages: [
          {
            role: "user",
            content: [
              { type: "text", text: FOOD_DATA_PROMPT },
              {
                type: "image_url",
                image_url: {
                  url: `data:image/jpeg;base64,${base64}`,
                },
              },
            ],
          },
        ],
      });
      return { response, spanId, traceId };
    });
  }

  const data = response!.choices[0].message.content!;
  return NextResponse.json({ response: data, spanId, traceId });
}

import * as Langtrace from "@langtrase/typescript-sdk";
import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  try {
    const { userId, userScore, traceId, spanId } = await req.json();

    await Langtrace.sendUserFeedback({
      userId: userId,
      userScore: userScore,
      traceId: traceId,
      spanId: spanId,
    });

    return NextResponse.json(
      { message: "feedback sent successfully" },
      { status: 200 }
    );
  } catch (error) {
    console.log("error", error);
    return NextResponse.json(
      {
        error: "Something went wrong while sending feedback :-(",
      },
      { status: 404 }
    );
  }
}

import { ThumbsDown, ThumbsUp } from "lucide-react";
import { useState } from "react";

export default function Feedback() {
  const [selected, setSelected] = useState("");

  const handleThumbsClick = async (score: number) => {
    setSelected(score === 1 ? "up" : "down");
    try {
      await fetch("/api/feedback", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          userId: "<user-id>",
          userScore: score,
          traceId: "<trace-id>",
          spanId: "<span-id>",
        }),
      });
    } catch (error) {
      console.error("Error sending feedback:", error);
    }
  };

  return (
    <div className="flex">
      <div className="px-4">
        <button
          onClick={() => handleThumbsClick(1)}
          className={`${selected === "up" ? "text-black" : "text-gray-400"}`}
        >
          <ThumbsUp />
        </button>
      </div>
      <div className="px-4">
        <button
          onClick={() => handleThumbsClick(-1)}
          className={`${selected === "down" ? "text-black" : "text-gray-400"}`}
        >
          <ThumbsDown />
        </button>
      </div>
    </div>
  );
}