Welcome to the future of communication! Gen-AI Chat BOT is a powerful, AI-driven chatbot designed to streamline communication, enhance productivity, and bring a touch of the future to your everyday tasks.
Getting started with Gen-AI Chat BOT is as easy as a Sunday morning. Just run the following command in your terminal:
npm install gen-ai-bot
And voila! You're ready to start chatting. To install the Gen-AI Chat BOT package, run the following command in your terminal:
To make the most out of Gen-AI Chat BOT, you'll need to pass in some props:
- url: Use out Gen-AI tools to get your url. (required) - use any openai chat conpletion url
- header: Pass in a header to customize the look and feel of your chatbot.
- Style: Pass in a style to customize the look and feel of your chatbot.
🔧 Add the following code to the root of your project or the componet you are using:
// create a file called BotConfig.ts
// add types/index.d.ts and there add the following code
// declare module 'gen-ai-bot'
// index.d.ts
declare module 'gen-ai-bot'
// App.tsx
import {Bot} from 'gen-ai-bot'
import "gen-ai-bot/dist/style.css";
import {config} from '../src/BotConfig'
Gen-AI Chat BOT comes with a bunch of pre-made components that you can use right out of the box:
export { default as Bot } from "./Bot";
export { default as Chat } from "./Chat";
export { default as ChatBubble } from "./ChatBubble";
Feel free to use them in your project! If you're looking for more customization, you can also change the botConfig.ts file to suit your needs:
// botConfig.ts file default values
export interface BotConfig {
url: string;
header: string;
style: {
width: string;
height: string;
};
auth_key?:string;
selectedDocuments?: { uuid: string; file: string }[];
chatButtonClassNames?:{
chatButton : string;
chatIcon : string;
};
selectedDocumentsClassNames?:{
selectedDocumentsContainer : string;
selectedDocumentsList : string;
selectedDocumentsIcon : string;
};
chatFooterClassNames?:{
form: string;
input: string;
button: string;
sendIcon: string;
};
inputPlaceholder?: string;
cardContentClassNames?: {
cardContent: string;
noChatDataDiv: string;
noChatDataSpan: string;
};
cardHeaderClassNames?: {
card: string;
cardHeader: string;
cardDescription: string;
cardTitle: string;
chatIcon: string;
};
}
export const config: BotConfig = {
url: "https://www.gen-ai.com/",
header: "Gen-AI Bot",
style: { width: "25rem", height: "25rem" },
auth_key:'botkey%23',
selectedDocuments : [
{
uuid: "1",
file: "https://www.someurl.com/"
}
],
chatButtonClassNames:{
chatButton : "w-12 h-12 fixed bottom-10 right-6 bg-darkblue text-white rounded-full flex items-center justify-center shadow-md hover:bg-darkblue transform transition-transform hover:scale-105 cursor-pointer" ,
chatIcon : "w-6 h-6 hover:transform transition-transform hover:scale-110 "
},
selectedDocumentsClassNames:{
selectedDocumentsContainer : "flex justify-start border-t-2 mt-2" ,
selectedDocumentsList : "flex justify-center items-center mt-2",
selectedDocumentsIcon : "w-6 h-6 "
},
cardHeaderClassNames: {
card: "shadow-lg bg-gray-10 fixed bottom-24 right-6 z-50 rounded-2xl",
cardHeader: "rounded-t-2xl bg-gradient-to-r bg-darkblue text-white transition-all duration-300",
cardDescription: "flex justify-between",
cardTitle: "text-xl font-thin",
chatIcon: "w-8 h-8 fill-slate ml-2",
},
cardContentClassNames: {
cardContent: "chat-content",
noChatDataDiv: "flex justify-center items-center h-full min-w-md",
noChatDataSpan: "text-gray-500 font-semibold py-20",
},
inputPlaceholder: "How can I help you?",
chatFooterClassNames: {
form: "w-full flex justify-center items-center gap-2",
input: "relative bottom-0 rounded-2xl tracking-widest py-6",
button: "text-darkblue flex items-center justify-center ml-2",
sendIcon: "w-8 h-12 transform transition-transform hover:scale-150 cursor-pointer",
},
};
If you're wondering how to integrate Gen-AI Chat BOT into your project, here's a quick example:
import { Bot } from 'gen-ai-bot';
const App = () => {
return (
<Bot
url="https://gen-ai-bot.example.com/" // Pass in your url *(required)*
header="Gen-AI Chat BOT" // Customize the header *(Optional)*
style={{ width: "25rem", height: "25rem" }} // Adjust the size of your chatbot *(Optional)*
config={config} // Pass in your config *(Required)*
/>
);
}
And that's it! You're now a certified Gen-AI Chat BOT user. Happy chatting! 🎉