Skip to main content

How to Integrate the Chat Widget in a Next.js Project

· 3 min read
Mauro Garcia
Mauro Garcia
Front End Engineer

The Chat Widget allows you to add a customizable AI-powered chat feature to your web application. This guide will walk you through integrating the widget into a Next.js project using both the App Router and Pages Router approaches.

Using App Router​

When using the App Router in Next.js, follow these steps:

Step 1: Modify the Root Layout​

In the app/layout.tsx file (or .js), add the CSS link to the <head> section and the JS script to the end of the <body>. You'll also need to include a placeholder <div> for the chat widget and reference a custom component for initialization.

Here’s an example of the modified layout:

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import SerenityChat from "@/components/SerenityChat";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
        {/* Add Serenity* Star Chat CSS */}
        <link
          key={"serenity-chat-styles"}
          rel="stylesheet"
          href="https://hub.serenitystar.ai/resources/chat.css"
        />
      </head>
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        {/* Placeholder for Chat Widget */}
        <div id="aihub-chat"></div>
        {children}
        {/* Initialize Serenity Chat */}
        <SerenityChat />
        {/* Add Serenity* Star Chat JS */}
        <script src="https://hub.serenitystar.ai/resources/chat.js"></script>
      </body>
    </html>
  );
}

Step 2: Create the Chat Widget​

The Chat Widget initializes the chat using the AIHubChat class. Place this file in src/components/SerenityChat.tsx:

"use client";

import { useEffect } from "react";

const SerenityChat: React.FC = () => {
  const initChat = () => {
    //@ts-ignore
    const chat = new AIHubChat("aihub-chat", {
      apiKey: "<Your API Key>",
      agentCode: "<Your Agent Code>",
      baseURL: "https://api.serenitystar.ai/api",
    });
    chat.init();
  };

  useEffect(() => {
    initChat();
  }, []);

  return null;
};

export default SerenityChat;

Replace <Your API Key> and <Your Agent Code> with your actual credentials.

Using Pages Router​

If you’re using the Pages Router, you just need to update your _app.tsx file.

Include the CSS link and the initialization script globally. Use the <Head> component for the CSS and also add the js script like this:

import Head from "next/head";
import { useEffect } from "react";
import "@/styles/globals.css";

export default function App({ Component, pageProps }) {
  useEffect(() => {
    if (typeof window !== "undefined") {
      //@ts-ignore
      const chat = new AIHubChat("aihub-chat", {
        apiKey: "<Your API Key>",
        agentCode: "<Your Agent Code>",
        baseURL: "https://api.serenitystar.ai/api",
      });
      chat.init();
    }
  }, []);

  return (
    <>
      <Head>
        {/* Add Serenity* Star Chat CSS */}
        <link
          rel="stylesheet"
          href="https://hub.serenitystar.ai/resources/chat.css"
        />
      </Head>
      <div id="aihub-chat"></div>
      <Component {...pageProps} />
      {/* Add Serenity* Star Chat JS */}
      <script src="https://hub.serenitystar.ai/resources/chat.js"></script>
    </>
  );
}

Summary​

  • App Router: Use layout.tsx for global styles and scripts and a use client component for chat initialization.
  • Pages Router: Add the CSS and JS in _app.js, and initialize the chat directly in a useEffect.

By following these instructions, you can easily integrate the chat widget into your Next.js project.