1.0.0 • Published 5 months ago
easyfindai v1.0.0
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
- Add the chatbot component to your page:
import { ChatBot } from "easyfindai";
export default function Page() {
return <ChatBot endpoint="/api/chat" theme="dark" />;
}
- 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);
}
- 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 |
1.0.0
5 months ago