Skip to content

Latest commit

 

History

History
155 lines (110 loc) · 7.51 KB

Readme.md

File metadata and controls

155 lines (110 loc) · 7.51 KB
Raw

Conversify Documentation 🎉🤖

Introduction 📝

Conversify is an advanced customer support chatbot platform that allows businesses to easily integrate AI-powered chatbots into their websites. It combines interactive 3D avatar technology, voice and text interfaces, and customizable chatbot templates to deliver a seamless and dynamic user experience. Built on a robust MERN (MongoDB, Express.js, React.js, Node.js) stack, Conversify provides clients with embeddable links or code snippets, enabling quick and easy integration. 🚀

Key Features 🌟

  • Embeddable Chatbot Integration: Clients receive direct links or code to embed Conversify chatbots into their websites. 💻
  • Customizable Templates: Various chatbot templates are provided to suit different customer support needs and branding styles. 🎨
  • Interactive 3D Avatar: Users can interact with a 3D avatar that responds via text and voice, providing an engaging and human-like interface. 🕺🎤
  • Voice and Text Interaction: Queries can be made either through text or voice input, with responses delivered in both modalities. 🗣️⌨️
  • Backend Powered by Mistral and Llama LLM: Conversify leverages Mistral and LLama for handling natural language queries. 🧠✨
  • MongoDB Atlas as Vector Store: Efficient and scalable storage and retrieval of conversation data is managed by MongoDB Atlas. 🗄️⚡
  • Future Support for Model Selection: Clients will have the option to choose from multiple language models to best suit their needs. 🔮📈

Architecture Overview 🏗️

Conversify is built on a full-stack JavaScript architecture using the MERN stack, ensuring scalability, flexibility, and efficiency. 🌐✨

Backend 🛠️:

  • Node.js & Express.js: Handle API requests, process conversation data, and manage backend services. 🔗💼
  • MongoDB Atlas: Stores conversation history, user profiles, and vectors for efficient similarity searches and retrieval using a vectorStore. 🗂️
  • Mistral (LLM): Handles natural language processing and generates human-like responses to customer queries. 💬💡

Frontend 🖼️:

  • React.js: Provides an intuitive, responsive user interface where users can interact with the chatbot. It supports both text and voice inputs. 🎨🧑‍💻
  • Three.js (3D Avatar): A 3D engine that powers the interactive avatar, adding a layer of visual engagement to the chatbot interaction. 🕹️👾

Integration Process 🛠️✨

  1. Get Embeddable Link or Code: After configuring your chatbot through Conversify’s web app, clients will receive a custom embeddable link or code snippet. 📬
  2. Embed in Website: Paste the provided code into your website’s HTML to seamlessly integrate the chatbot interface into any page. 🖥️🔗
  3. Customization: Customize the chatbot by selecting templates that align with your brand and needs. In the future, you will also be able to choose different language models to power your chatbot. 🎨🤖

Main Functionalities 🔧

1. Interactive Chat Interface 💬🤖

  • Users can interact with the chatbot using text or voice queries. 📢🖊️
  • The chatbot responds through the 3D avatar with both text and voice output, enhancing engagement. 🗣️✨

2. Templates 🎨📝

  • Choose from a variety of templates tailored to different customer support scenarios. These templates will guide the behavior, tone, and appearance of the chatbot. 🎭

3. Voice and Text Integration 🎤⌨️

  • The chatbot can process both voice and text inputs from users. 🎙️📝
  • Voice responses are synthesized using advanced text-to-speech technology, giving the 3D avatar a natural voice. 🎧

4. 3D Avatar Customization 🧑‍🎤🤖

  • The 3D avatar is fully customizable, allowing for branding and personality alignment. Choose from different avatar styles and behaviors. 🎨🕺

Future Roadmap 🔮🚀

  1. Model Selection Options: Clients will be able to choose between different language models (such as GPT, Mistral, etc.) based on their preferences and requirements. 🧠🔧
  2. Advanced Analytics: Dashboard for tracking chatbot performance, user interactions, and feedback. 📊📈
  3. Personalized Avatars: More customization options for the avatar to better align with different business needs and brand identities. 🕴️💼
  4. AI-Powered Feedback Loops: Allow the chatbot to learn from previous interactions to improve responses over time. 🤖💡

Getting Started 🚀

Setting up the BotGenerator Backend 🛠️

  1. Clone the Repository:

    • Open your terminal and run: 
      git clone https://github.com/MrDracs/BotGenerator.git
cd BotGenerator

  2. Install Dependencies:

    • In the BotGenerator directory, install the necessary dependencies: 
      npm install

  3. Create .env File:

    • In the BotGenerator folder, create a .env file and include the following environment variables: 
      MONGODB_URI=<Your_MongoDB_Connection_URI>
GROQ_API_KEY=<Your_GROQ_API_Key>
COHERE_API_KEY=<Your_Cohere_API_Key>

  4. Run the Server:

    • Start the development server: 
      npm run dev
    • This will open a webpage in your browser, which you can close for now. 🌐

Accessing and Testing the Chatbot Frontend 🧪🖥️

  1. Access the Frontend:

    • Navigate to the CodeCubicleConversify folder and open index.html in your browser:
      • Option 1: Use the browser of your choice. 🌍
      • Option 2: Use the VS Code Live Server extension for local hosting. ⚡

  2. Generate and Test Your Chatbot:

    • On the Conversify web app you opened, fill out the form, add a knowledge base, and click Submit. You’ll get an embeddable div element containing your chatbot. 🤖📦

  3. Embed the Chatbot:

    • To quickly test the chatbot:
      • Copy the entire div element generated. 📝
      • Open index.html in the CodeCubicleConversify folder.
      • Find the following class in the code (around line 357): 
        <div class="side-bar-fs">
      • Replace the entire div with the new one you copied, save, and refresh the page. 🔄💻

  4. Enable Text-to-Speech (TTS):

    • To enable TTS for the chatbot, append /tts at the end of the src URL in the iframe tag that was provided in the div. 🎤
      • For example: 
        <iframe src="your_chatbot_url/tts" ... ></iframe>

Conversify Web App Setup 💻

  1. Sign up on the Web App: Visit [Conversify Web App URL] and create an account. 📝
  2. Configure Your Chatbot: Use the provided templates to configure your chatbot. 🛠️
  3. Generate Embeddable Code: Once configuration is complete, you will receive the embed code to integrate into your website. 🔗
  4. Monitor & Improve: Access the dashboard to monitor interactions and optimize the chatbot’s performance. 📊

Contact and Support 📧👨‍💻

If you have any questions or run into any issues, feel free to reach out to our support team at:

Now you're all set to bring Conversify's chatbots to life on your website! 🎉🤖

Contributors 🤝