gpt-chatbot
Do you need a chatbot for your website that answers all the questions related to your company. Here is a chatbot that is powered by chatgpt that acts as your assistant.
Installation
npm install gpt-chatbot
Usage
This library comes with customisable components where you can customise it according to your needs.
import { Bot, Header, ChatContainer } from "gpt-chatbot";
function App() {
const theme = {
palette: {
primary: {
main: "#ca0714",
light: "#fec9c9",
},
secondary: {
main: "#ddd",
},
},
};
return (
<Bot
header={<Header title="Canva" />}
chatContainer={<ChatContainer />}
companyDetails={{
name: "canva",
website: "https://www.canva.com/",
}}
chatTheme={theme}
apiKey={import.meta.env.VITE_OPENAI_API_KEY}
/>
);
}
Props List of Bot Component
Props | Example |
---|---|
header | Header |
companyDetails | {name:/Your CompanyName/,website: /Your Company Website/} |
chatTheme | theme |
apiKey | pass your openAi key |
inputStyle | style for input |
buttonStyle | style for button |
Header
Props | Explanation |
---|---|
title | your chatbot name |
containerStyle | style for header container |
textStyle | text style |
Example
<Header
title="canva"
textStyle={{fontWeight:'bold',fontFamily:'Calibri'}}
containerStyle={{backgroundColor:'blue'}}
>
theme
The library is providing customised theming options for you to change theme of your bot that contemplates with your website primary.main - main color primary.light - bot message color secondary.main - user message color
const theme = {
palette: {
primary: {
main: "#ca0714",
light: "#fec9c9",
},
secondary: {
main: "#ddd",
},
},
};