1.0.0 • Published 5 months ago

easyfindai v1.0.0

Weekly downloads
-
License
-
Repository
-
Last release
5 months ago

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" />;
}
  1. 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);
}
  1. Add required environment variables to your .env.local:
CHATBOT_API_KEY=your_api_key

Props

PropTypeDefaultDescription
endpointstring-The API endpoint for chat requests
theme'light' | 'dark''light'Theme of the chatbot
initialMessagestring-Initial message to display
inputPlaceholderstring-Placeholder text for the input field
stylesStyleConfig-Custom styles configuration
startExpandedbooleanfalseWhether 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

CategoryPropertyTypeDescription
CardwidthstringChat container width (e.g. "400px")
heightstringChat container height
borderRadiusstringBorder radius
InputbackgroundColorstringInput field background
textColorstringInput text color
placeholderColorstringPlaceholder text color
Send ButtonbackgroundColorstringNormal state background
hoverBackgroundstringHover state background
iconColorstringSend arrow color
AnimationsdurationstringTransition duration
timingstringCSS timing function
MarkdowncodeBlockBgstringCode block background
linkColorstringHyperlink color
1.0.0

5 months ago