10xAnswers: ChatBot Component Documentation

//create a table of contents Welcome to 10xAnswers, a fully customizable and draggable chatbot component built with React and Recoil. This package is designed to help you integrate an intelligent chatbot into your project effortlessly, eliminating the need to create one from scratch. With support for markdown rendering, draggable components, customizable prompts, and state management, 10xAnswers is your go-to solution for chatbot integration.

Demo

[Live Demo Link - Coming Soon]

Features

• Plug-and-Play: Simple to install and use.
• Customizable: Style the chat window, bot icon, and entire chat component as per your needs.
• Markdown Support: Renders code snippets, tables, and more.
• State Optimization: Built using React and Recoil for efficient state management.
• Connectivity Check: Includes a custom hook to display internet connectivity status.
• Draggable UI: Make the chatbot draggable for flexible placement.
• Backend Support: Option to use your backend or provided URL for response generation.
• Open Source: Fully accessible codebase for contributions and enhancements.

Installation

npm install 10xanswers
# or
yarn add 10xanswers
# or
pnpm add 10xanswers

Quick Example

import React from 'react';
import { ChatBot } from '10xanswers';

function App() {
  return (
    <ChatBot 
      backendUrl="https://ask-10x-questions.vercel.app/"
      draggable={true}
    />
  );
}

export default App;

Important: The provided URL https://ask-10x-questions.vercel.app/ is a pre-configured backend that works seamlessly with the 10xAnswers component.

Props

Basic Props

Styling Props

Advanced Usage

<ChatBot 
  backendUrl="https://ask-10x-questions.vercel.app/"
  title="100xQuestions"
  stylizeTitle={{emphasized:"100x",normal:"Questions"}}//optional
  botIcon="./logoImg2.jpg"
  userIcon="./logoImg.jpg"
  draggable={true}
  x={500}
  y={625}
  prompt="You're and artisted turned developer, not respond accordingly"
  description="AI-powered conversational assistant"
  cta="Start Asking"
  startOpen={true}
/>

All Props

Props

Prompt Guidelines

• With prompt: If a custom prompt is provided, it will be sent along with the user question.
• Without prompt: If prompt is set to "none", only the user question with no prompt is sent to the ai model- not recommended.

Example Prompts

Default Prompt:
If no prompt is provided, default prompt will be sent to the model along with the questions asked by client

You are 10xAnswers, an intelligent and highly versatile chatbot. Your purpose is to assist users with precision, accuracy, and clarity...

Custom Prompt: You can specify your custom prompts here, every question of client will be sentto model along with this prompt

User is sending a custom prompt about behavior. Prompt: ${prompt}. Question: ${question}. History: ${chatHistory}.

Gemini API Integration

If you don't have a working backend you can directly use Google's Gemini API and pass it in the props, and send requests to the gemini directly from frontend. Not recommended as this exposes the api key to the users of your web app.

Backend Integration

URL-based Integration

POST requests are sent to backend with the following payload:

{
  "method": "POST",
  "body": {
    "contents": [{
      "parts": [{"text": "User question"}]
    }]
  }
}

Warning and Important Notes

Development Caution:

• After changing any prop of the chat component, changes will only be visible after reloading.
• Exposing Gemini API key directly in frontend is NOT recommended as it exposes your key to users.

Upcoming Features

• Media message support
• Voice interaction modes
• Additional themes
• Enhanced customization options

Author

Rajveer Singh

• Twitter: @rajveeerrsingh

Contribution and Support

• Open-source contributions welcome
• Contact on:
  • X (Twitter): https://x.com/RajveeerrSingh
  • GitHub: https://github.com/rajveeerr

Found an issue? Open a GitHub Issue

Enjoying 10xAnswers? Consider starring the repository! ⭐

Start building smarter projects with 10xAnswers today! 🚀

Comprehensive Props and Configuration

Core Props Breakdown

Backend Integration

• backendUrl (string): Backend endpoint for chat processing

  • Required
  • POST request will be sent to this URL

• geminiApi (string): Gemini API key for direct frontend integration

  • Not recommended for direct exposure
  • Fallback option if no backend URL

• prompt (string):

  • Can be "none" or a custom prompt
  • If "none", question will directly be sent without adding any prompt to it, not recommended unless trying to create your own backend with custom prompting and chat history.
  • Custom prompts allow precise chatbot behavior definition

Positioning and Draggability

• draggable (boolean):

  • false (default): Absolute positioning
  • true: Component becomes draggable

• x (number): Initial X position of component when draggable

• y (number): Initial Y position of component when draggable

Customization Props

• title (string): Custom chat window title
• botIcon (string): Path to bot icon image
• userIcon (string): Path to user icon image
• description (string): A short description text about ChatBot to display below the title
• cta (string): Call-to-action button text
• startOpen (boolean): Initial chat window state(open/close)

Styling Props

Three main div structure for styling:

<div chatComponent>
  <div chatWindow></div>
  <div chatBotIcon></div>
</div>

Styling can be applied via:

• Inline styles
• Tailwind classes
• Custom CSS

Styling Props Details

• chatWindowStyle: Inline styles for chat window

• chatBotIconStyle: Inline styles for bot icon

• chatComponentStyle: Inline styles for entire component

• chatWindowClassName: Tailwind classes for chat window

• chatBotIconClassName: Tailwind classes for bot icon

• chatComponentClassName: Tailwind classes for chat component

Title Styling

For correct behavior of title styling, title is required

• stylizeTitle (object):

  stylizeTitle={{
    emphasized: "100x",
    normal: "Questions"
  }}

Backend Request Format

Payload Structure

{
  "method": "POST",
  "body": {
    "contents": [{
      "parts": [{"text": "User question"}]
    }]
  }
}

Prompt Management Strategies

Default Behavior

If no custom prompt:

• Default prompt will be sent along with the question
• Context-aware response generation

Default Prompt Example

You are 10xAnswers, an intelligent chatbot...
Guidelines:
1. Be concise
2. Use markdown
3. Provide comprehensive answers

Current Question: ${question}
History: ${chatHistory}

Integration Strategies

Backend URL Integration

1. Provide backend URL, if you dont have one hit this backend instead "https://ask-10x-questions.vercel.app/"
2. Set prompt to "none" or add custom prompt
3. Provided Backend will handle chat logic bot of the box

Gemini API Direct Integration

Not Recommended

1. Provide Gemini API key
2. Set custom or default prompt
3. Frontend processes chat directly

Advanced Configuration Example

<ChatBot 
  chatWindowStyle={{}}
  chatBotIconStyle={{}}
  chatComponentStyle={{
    position: "absolute", 
    right: 0, 
    bottom: 0, 
    margin: "1rem"
  }}
  backendUrl="https://your-backend.com"
  geminiApi={import.meta.env.VITE_GEMINI_API}
  title="10xAnswers"
  prompt="Custom intelligent behavior prompt"
  draggable={true}
  x={500}
  y={625}
/>

Upcoming Features

• Media message support
• Voice interaction modes
• Enhanced theming