openreactbot v1.1.8
��# OpenReactBot
Configure your own ChatBot with OpenAI & customize the UI to your liking! :art::speech_balloon: The OpenReactBot is an open source project for crafting interactive web chatbots. :man_technologist:
OpenReactBot brings your ChatBot development at warp speed :rocket:
Demo
Install
Before you install make sure you have a React Project setup already!
Using yarn:
yarn add openreactbot
Using npm:
npm install openreactbot
Configuration
- Create a Configuration object in src/config folder Read more about it here
import { OpenReactBotProps } from "openreactbot";
const orbConfigs: OpenReactBotProps = {
API_KEY: import.meta.env.VITE_OPENAI_API_KEY as string,
AIConfig: {
prompt: "You are a pirate that will help software developer with debugging their code",
startMessage: "Hello matey! What can i help you with today? Arrrrrgh!",
model: "gpt-3.5-turbo",
},
stylesConfig: {
logoWidth: "80px",
logoHeight: "80px",
},
};
export default orbConfigs;
- Use your OpenAI API_KEY as a enviorment variable and dont hard code it.
- AIConfig properties are mandatory
- stylesConfig is optional
Styling
Because the ChatBot interface is using a default styling library you need to create a CSS file to override the default stylings. But dont worry! I got you covered!
- Create a CSS file in src/styles folder
- Copy the CSS code provided here: openreactbot.css into your CSS file.
- Configure the CSS to your liking or use the default styles.
Usage
import OpenReactBot from "openreactbot";
import orbConfigs from "./config/orbConfigs";
import "./styles/openreactbot.css";
function App() {
return (
<>
<h1>Hello world</h1>
<OpenReactBot {...orbConfigs} />
</>
);
}
export default App;
Yeah! Your OpenReactBot is ready to go!
Documentation
Configuration Object:
1. API_KEY
- Description: This property holds the API key required for authentication and access to the OpenAI service. Use this as a enviroment variable for safety reasons. You can obtain a OpenAI API_KEY HERE
2. AIConfig
Description: This object contains configurations related to the AI model used by OpenReactBot.
- prompt: string
- The prompt for how the AI should act.
- startMessage: string
- The initial message displayed when the chatbot is started.
- model: string
- The name or identifier of the AI model.
- Theese models can be used: gpt-4, gpt-4-turbo-preview, gpt-3.5-turbo(default)
- prompt: string
3. StylesConfig
Description: This object contains
optional
configurations for styling the appearance of the OpenReactBot user interface. All of these properties will override the DEFAULT VALUES- name: string (optional)
- The name of the chatbot.
- logo: string (optional)
- The URL or path to the logo image.
- logoHeight: string (optional)
- The height of the logo image.
- logoWidth: string (optional)
- The width of the logo image.
- logoBorderRadius: string (optional)
- The border radius of the logo image.
- bottom: string (optional)
- The distance of the chatbot from the bottom of the screen.
- left: string (optional)
- The distance of the chatbot from the left side of the screen.
- right: string (optional)
- The distance of the chatbot from the right side of the screen.
- width: string (optional)
- The width of the chatbot.
- height: string (optional)
- The height of the chatbot.
- placeholder: string (optional)
- The placeholder text displayed in the input field.
- chatBotImg: string (optional)
- The URL or path to the chatbot avatar image.
- userImg: string (optional)
- The URL or path to the user avatar image.
- name: string (optional)
Default Style Values:
"If StylesConfig object is empty or only some properties are provided, OpenReactBot defaults to the following settings:"
const defaultValues = {
name: "OpenReactBot",
logo: `${openreactbotIcon}`,
logoHeight: "100px",
logoWidth: "100px",
logoBorderRadius: "50px",
bottom: "30px",
left: "",
right: "20px",
width: "350px",
height: "600px",
placeholder: "Type your message...",
chatBotImg: `${chatBotIcon}`,
userImg: `${userIcon}`,
};
These defaults ensure that your OpenReactBot instance has a consistent and visually appealing appearance even if specific style configurations are not provided. '=��
Typescript
OpenReactBot is written in TypeScript :blue_book::blue_heart:
Contributing
If you encounter a bug or error in OpenReactBot, I welcome your contributions to help improve the project. Feel free to clone the repository and submit a pull request with your fixes or enhancements. :hugs::man_technologist:
To contribute:
- Fork the repository.
- Clone the forked repository to your local machine.
- Create a new branch for your changes:
git branch -c bug-fix
. - Make your changes and commit them:
git commit -m "Fix bug or error description"
. - Push your changes to your fork:
git push origin bug-fix
. - Submit a pull request, describing the issue you've addressed and the changes you've made.
I will review your pull request and work with you to incorporate your changes into the project.
Thank you for helping to improve OpenReactBot! :pray:
Special THANKS to:
For making this fun package happen!
Show your support
If you've made an awesome OpenReactBot and you love this package, please :star: this repository!
License
This project is under the MIT license. :man_judge: