Setup Instructions

Import the Component

The UI required to use FIND-X search is provided by the ChatBox component included in the npm package. To use it, you need to import and add it into the root layout file of your application.

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

Add the Component

To implement the search functionality, include the component in your application:

  • For React: Add it in app.jsx/tsx
  • For Next.js: Add it in layout.jsx/tsx in the app directory
 import type { Metadata } from "next";
 import "./globals.css";

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

 export const metadata: Metadata = {
  title: "FIND-X Application",
  description: "Powered by FIND-X Search",
 };

 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>
  );
 }

Configuration Options

The ChatBox component accepts a config prop with the following properties:

  • findx_key: Your FIND-X API key
  • theme: Visual theme - either "dark" or "light"
  • default: Boolean value to control the visibility of the default trigger element

Next Steps

Restart your development server to see the changes take effect.

PrevNext