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 ( My Website {/* Replace 'your-bot-id-here' with your actual Bot ID */} ); }

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" }