Implementing
FIND-X in Next.js

Posted on 10/11/2024 by @sahil

blog-image

Here we will show you how to implement FIND-X in your Next.js app. Make sure you have a Next.js app running and you're ready to go.

Step 1: Install FIND-X

Depending on your package manager you can use the following install command to install the package.

pnpm install find-x-ai@latest

Step 2: Import FIND-X Widget

Go to the layout.tsx file of your root directory and add the following code:

import { ChatBox } from "find-x-ai";

Step 3: Configure FIND-X

import type { Metadata } from "next";
import "./globals.css";

/* Import the Chat component */
import { ChatBox } from "find-x-ai";

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">
      <body>
        {children}
        <ChatBox
          config={{
            findx_key: process.env.NEXT_PUBLIC_FINDX_KEY!,
            theme: "dark",
            default: true
          }}
        />
      </body>
    </html>
  );
}

Make sure to replace the findx_key with your public api key. If you don't have one, you can get it from your dashboard.

That's it! You can now restart your development server and see the magic!

For more information on how to use FIND-X, you can visit the documentation.