Koodums Chatbot

A customizable React chatbot component built with Material-UI, supporting dynamic conversations, configurable UI, and quick replies. Supports displaying Tables, Forms, Pictures, Picture Carousels, and Alerts. Integrates with Google Places, Ticket Master, Make.com, Zapier, Open AI, Gemini, and Pinecone Vector Database. Uses Open AI LLMs, Gemini LLMs, and Pinecone Vector Database. Supports speaking results and 80 other configurable options.

For more information, including pictures and additional details, go to https://www.koodums.com.

Installation

Step 1: Install koodums-chatbot

Install via npm (if published):

1npm install koodums-chatbot

Or, if you received a tarball (koodums-chatbot-1.0.0.tgz):

1npm install /path/to/koodums-chatbot-1.0.0.tgz

Step 2: Install Peer Dependencies

Run the following to install required peer dependencies:

1npm install \
2  @emotion/react@^11.10.4 \
3  @emotion/styled@^11.10.4 \
4  @google-cloud/dialogflow-cx@^4.7.0 \
5  @mui/icons-material@^7.0.1 \
6  @mui/material@^7.0.1 \
7  @reduxjs/toolkit@^1.8.6 \
8  @vis.gl/react-google-maps@^1.5.2 \
9  firebase@^11.1.0 \
10  formik@^2.4.6 \
11  lottie-react@^2.4.0 \
12  react@^18.2.0 \
13  react-bootstrap@2.10.4 \
14  react-calendly@^4.3.1 \
15  react-device-detect@^2.2.3 \
16  react-div-100vh@^0.7.0 \
17  react-dom@^18.2.0 \
18  react-helmet@^6.1.0 \
19  react-player@^2.16.0 \
20  react-redux@^8.0.4 \
21  react-router-dom@^6.4.2 \
22  react-youtube@^10.1.0 \
23  redux-persist@^6.0.0 \
24  swiper@^9.0.5 \
25  typeit@^8.7.1 \
26  typeit-react@2.6.4 \
27  use-sound@^4.0.1 \
28  uuid@^9.0.0 \
29  yup@^1.6.1

Step 3: Set Up Environment Variables

Create a .env file in your project root with:

VITE_URL_PREFIX=https://agent-builder.koodums.com/
VITE_USER=YourName
VITE_COMPANY_NAME=Koodums
VITE_APP_VERSION=1.0.0
VITE_INPUT_HELPER_TEXT=Type your request/question...

Alternatively, pass these via the config prop (see Usage).

Step 4: Ensure Backend API

The chatbot requires a backend API at the VITE_URL_PREFIX (e.g., /api/initialize). Contact the package author for API access.

Usage

Import and use the ChatBot component in your React app:

1import { ChatBot } from "koodums-chatbot";
2import { Container } from "@mui/material";
3
4function App() {
5  const config = {
6    urlPrefix:
7      process.env.VITE_URL_PREFIX || "https://agent-builder.koodums.com",
8    user: process.env.VITE_USER || "Test User",
9    companyName: process.env.VITE_COMPANY_NAME || "Koodums",
10    appVersion: process.env.VITE_APP_VERSION || "1.0.0",
11    inputHelperText:
12      process.env.VITE_INPUT_HELPER_TEXT || "Type your request/question...",
13    latitude: 38.8977,
14    longitude: -77.0365,
15  };
16
17  return (
18    <Container
19      sx={{ height: "100vh", display: "flex", flexDirection: "column" }}
20    >
21      <ChatBot
22        uniqueCode="GERKA"
23        agentId="your-agent-id"
24        isMobile={false}
25        config={config}
26      />
27    </Container>
28  );
29}
30
31export default App;

Props

• uniqueCode (string): Unique identifier for the chatbot session (e.g., "TRSFG").
• agentId (string): Agent identifier (e.g., "5fg46sg4s6d5fg5df64sg").
• isMobile (boolean): Set to true for mobile layouts.
• config (object): Configuration object with:
  • urlPrefix: API endpoint (e.g., https://agent-builder.koodums.com/).
  • user: User name.
  • companyName: Company name.
  • appVersion: App version.
  • inputHelperText: Input placeholder.
  • latitude, longitude: Optional location coordinates.

Notes

• Ensure the backend API is accessible and configured correctly.
• For mobile apps (e.g., Capacitor), set isMobile={true} and test API connectivity.
• The chatbot height is optimized with height: '100vh' on the parent Container.

Troubleshooting

• API Errors: Check the browser console for /api/initialize failures. Verify urlPrefix.
• Missing Dependencies: Ensure all peer dependencies are installed with correct versions.
• Contact: Reach out to the package author (Kevin) for support.

License

MIT