Next JS (Langchain)

Note

Please review the HTTPS example before implementing the Next.js example.

Overview

If your AI chatbot is running on a NextJS backend with Langchain.js SDK, use this guide to send user conversation data to Growl.

Examples

Caution

Make sure you have your Publisher ID before attempting this example. If not, please reach out to Growl team.

Note

The visitor_id is required. Your frontend must call await window.GrowlAds.getVisitorId() and include it in the request body. See the HTTPS guide for details.

If you’re using ChatOpenAI or a similar Langchain Provider to generate LLM responses, you can send conversation data to Growl by adding the callback method.

This approach works for both stream and invoke functions.

Note

Please implement recordGrowlEvent before using this example.

import { NextRequest, NextResponse } from "next/server";
import { Message as VercelChatMessage, StreamingTextResponse } from "ai";

import { ChatOpenAI } from "@langchain/openai";
import { PromptTemplate } from "@langchain/core/prompts";
import { HttpResponseOutputParser } from "langchain/output_parsers";
import recordGrowlEvent from "./growl";

const formatMessage = (message: VercelChatMessage) => {
  return `${message.role}: ${message.content}`;
};

const TEMPLATE = `
Current conversation:
{chat_history}

User: {input}
AI:`;

export async function POST(req: NextRequest) {
  const body = await req.json();
  const messages = body.messages ?? [];
  // visitor_id is required - must be obtained from window.GrowlAds.getVisitorId() on client-side
  const visitor_id: string = body.visitor_id;
  const prompt = PromptTemplate.fromTemplate(TEMPLATE);

  const headersObject = Object.fromEntries(req.headers.entries());

  const model = new ChatOpenAI({
    model: "gpt-4o-mini",
    callbacks: [
      {
        handleLLMEnd: async (output) => {
          await recordGrowlEvent({
            publisher_id: "<publisher_id>",
            user_id: "<user-id>",
            user_email: "<user-email>",
            visitor_id: visitor_id,
            chat_id: "<chat-id>",
            headers: headersObject,
            user_message: { text: messages[messages.length - 1].content },
            ai_message: { text: output.generations[0][0].text },
          });
        },
      },
    ],
  });

  const outputParser = new HttpResponseOutputParser();

  const chain = prompt.pipe(model).pipe(outputParser);

  const stream = await chain.stream({
    chat_history: messages.map(formatMessage).join("\n"),
    input: messages[messages.length - 1].content,
  });

  return new StreamingTextResponse(stream);
}