no-code-rag-bot

A lightweight, ready-to-use React chat widget to integrate your BotBuilder AI RAG bots into any website.

Features

🚀 Plug & Play: Add a fully functional chat AI to your site with one line of code.

🛠 No-Code Integration: Connects directly to your BotBuilder AI backend using your botId.

🎨 Auto-Branding: Automatically fetches your bot's colors, name, and greeting message.

📱 Responsive Design: Floating widget design that works perfectly on desktop and mobile.

🏗 React Portal: Renders at the end of document.body to avoid z-index and styling conflicts.

Installation

Install the package via npm or yarn:

code
Bash
download
content_copy
expand_less
npm install no-code-rag-bot

or

code
Bash
download
content_copy
expand_less
yarn add no-code-rag-bot
Usage

Simply import the BotWidget component and place it anywhere in your React application. It will automatically anchor itself to the bottom right of the screen.

code
Jsx
download
content_copy
expand_less
import React from 'react';
import { BotWidget } from 'no-code-rag-bot';

function App() {
return (

export default App;
Props
Prop Type Required Description
botId string Yes Your unique Bot ID from the BotBuilder AI dashboard.
How it works

Initialization: On mount, the component fetches your bot's specific configuration (theme color, name, and greeting) from the API.

Chatting: When a user sends a message, it is sent to the RAG engine. The bot's response is then streamed back to the UI.

Styles: The widget uses inline styles to ensure it looks consistent regardless of your local CSS setup.

Development

If you want to contribute or modify the widget:

Clone the repository.

Install dependencies: npm install.

Run tests or build: npm run build.

License

MIT © Sarujan003

Pro-Tip for your package.json:

Since you are using React Portals, make sure your package.json has react and react-dom listed under peerDependencies so that the user's project provides the React runtime.

code
JSON
download
content_copy
expand_less
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}