easyfindai

A customizable AI chatbot component for Next.js applications. Easy to integrate, highly customizable, and powered by advanced retrieval technology.

Installation

npm install easyfindai

Quick Start

1. Add the chatbot component to your page:

import { ChatBot } from "easyfindai";

export default function Page() {
  return <ChatBot endpoint="/api/chat" theme="dark" />;
}

2. Create an API route to handle chat requests:

// app/api/chat/route.ts
import { chatHandler } from "easyfindai/server";

export async function POST(req: Request) {
  return chatHandler(req);
}

3. Add required environment variables to your .env.local:

CHATBOT_API_KEY=your_api_key

Props

| Prop | Type | Default | Description | | ---------------- | ----------------- | ------- | ------------------------------------ | | endpoint | string | - | The API endpoint for chat requests | | theme | 'light' | 'dark' | 'light' | Theme of the chatbot | | initialMessage | string | - | Initial message to display | | inputPlaceholder | string | - | Placeholder text for the input field | | styles | StyleConfig | - | Custom styles configuration | | startExpanded | boolean | false | Whether chat should start expanded |

Customization

Styles

You can customize the appearance using the styles prop:

<ChatBot
  endpoint="/api/chat"
  styles={{
    card: {
      width: "400px",
      borderRadius: "20px",
      border: "2px solid #3b82f6",
      boxShadow: "0 8px 32px rgba(107, 114, 128, 0.2)",
    },
    input: {
      backgroundColor: "#f3f4f6",
      textColor: "#1f2937",
      placeholderColor: "#6b7280",
      focusBorder: "#3b82f6",
      focusShadow: "0 0 0 3px rgba(59, 130, 246, 0.1)",
    },
    sendButton: {
      backgroundColor: "#3b82f6",
      hoverBackground: "#2563eb",
      iconColor: "#ffffff",
      size: 40,
    },
    animations: {
      duration: "0.4s",
      timing: "cubic-bezier(0.4, 0, 0.2, 1)",
      type: "slide",
    },
    markdown: {
      codeBlockBg: "rgba(59, 130, 246, 0.1)",
      linkColor: "#3b82f6",
      headingColor: "#1f2937",
    },
  }}
/>

Themes

Choose between light and dark themes:

<ChatBot endpoint="/api/chat" theme="dark" />

Mobile Support

For proper mobile behavior, add this meta tag to your HTML head:

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>

TypeScript Support

The package includes TypeScript definitions. You can import types:

import type { ChatBotProps, StyleConfig, Theme } from "easyfindai";

Security Best Practices

• Always store API keys in environment variables (never commit them)
• Implement rate limiting on your API endpoint

Style Configuration Properties

| Category | Property | Type | Description | | --------------- | ---------------- | ------ | ----------------------------------- | | Card | width | string | Chat container width (e.g. "400px") | | | height | string | Chat container height | | | borderRadius | string | Border radius | | Input | backgroundColor | string | Input field background | | | textColor | string | Input text color | | | placeholderColor | string | Placeholder text color | | Send Button | backgroundColor | string | Normal state background | | | hoverBackground | string | Hover state background | | | iconColor | string | Send arrow color | | Animations | duration | string | Transition duration | | | timing | string | CSS timing function | | Markdown | codeBlockBg | string | Code block background | | | linkColor | string | Hyperlink color |