Modelosaurus Chatbot

A customizable plug-and-play chatbot component for React applications, designed to work seamlessly with the Modelosaurus API. Easily integrate a powerful AI chatbot into your application with minimal configuration.

🌟 Features

• ✨ Plug-and-Play: Minimal setup required
• 🎨 Customizable UI: Colors, sizing, fonts, and more
• 🤖 AI-Powered: Leverages Modelosaurus LLMs like Llama 3.1
• 📚 RAG Support: Connect to your knowledge base with vector search
• ⚡ Streaming Responses: Real-time streaming for a better user experience
• 📱 Responsive Design: Works on all device sizes
• 🔍 TypeScript Support: Fully typed for better developer experience

📦 Installation

Using npm:

npm install modelosaurus-chatbot

Using yarn:

yarn add modelosaurus-chatbot

🚀 Usage

Before integration, visit modelosaurus.com to:

1. Create an account and get your API key
2. Create a custom chatbot
3. Upload documents for RAG (optional)
4. Configure appearance and behavior
5. Get your chatbot ID

Basic integration in a React application:

import React from 'react';
import ModelosaurusChatbot from 'modelosaurus-chatbot';

function App() {
  return (
    <ModelosaurusChatbot 
      modelosaurusKey={process.env.REACT_APP_MODELOSAURUS_API_KEY}
      chatbotId="your-chatbot-id"
    />
  );
}

export default App;

🛠 Props

Prop	Type	Required	Default	Description
modelosaurusKey	string	Yes	-	Your Modelosaurus API key
chatbotId	string	Yes	-	Your chatbot ID from Modelosaurus

Note: Additional customization options (colors, fonts, etc.) are configured through the Modelosaurus dashboard and automatically applied to your component.

🎨 Customization

Customize your chatbot's appearance and behavior using the Modelosaurus dashboard.

🔒 Security Considerations

IMPORTANT: Never hardcode your API key directly in your frontend code in production. IMPORTANT: Never push your .env file containing sensitive information to any source control software.

Recommended approach: (example)

# Use environment variables
REACT_APP_MODELOSAURUS_API_KEY=your_secret_key

📝 TypeScript Support

Import types for enhanced type checking:

import { 
  ChatbotData, 
  ChatMessage, 
  ModelosaurusChatbotProps 
} from 'modelosaurus-chatbot';

Available types:

• ModelosaurusChatbotProps: Props for the main component
• ChatbotData: Configuration options for the chatbot
• ChatMessage: Individual message structure

📖 Storybook Development

To explore the component:

# Clone the repository
git clone https://github.com/haadiyeah/modelosaurus-chatbot.git

# Install dependencies
npm install

# Run Storybook
npm run storybook

Storybook will launch at http://localhost:6006

🛠 Development Setup

# Install dependencies
npm install

# Start development build
npm run dev

# Build for production
npm run build

🤖 How It Works

1. Configure your chatbot on modelosaurus.com
2. The component fetches your configuration settings using your chatbotId
3. Messages are sent to the Modelosaurus API for processing
4. Responses are streamed back to the component in real-time
5. If RAG is enabled, responses are enhanced with information from your documents

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.