10xAnswers: NPM Package Documentation

Table of Contents

1. Introduction
2. Features
3. Installation
4. Usage
   • Basic Usage
   • Advanced Usage
5. Props
6. API Payload Structure
7. Backend Guidelines
8. Example Prompts
9. Contribution & Support

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.

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

Install the package via npm:

npm i 10xanswers

Usage

Basic Usage

To use the default chatbot configuration, simply import and include the ChatBot component in your project:

import { ChatBot } from '10xanswers';

<ChatBot />

Advanced Usage

Customize the chatbot by passing props to the ChatBot component:

<ChatBot 
  chatWindowStyle={{}} // Custom styles for the chat window
  chatBotIconStyle={{}}
  chatComponentStyle={{ position: "absolute", right: 0, bottom: 0, margin: "1rem" }}
  chatWindowClassName="" // Tailwind class for styling the chat window
  chatBotIconClassName="" 
  chatComponentClassName="" 
  backendUrl="https://ask-10x-questions.vercel.app/" // Required: Provide a backend URL or Gemini API
  title="100xQuestions" // Custom title
  botIcon="./logoImg2.jpg" 
  userIcon="./logoImg.jpg" 
  stylizeTitle={{ emphasized: "100x", normal: "Questions" }} // Optional
  prompt="none" // Prompt for bot responses
  geminiApi={import.meta.env.VITE_GEMINI_API} // Required if no backend URL is provided
  theme="" // Not implemented yet
  draggable={false} // Enable/Disable dragging
  x={500} // Initial x-position when draggable is true
  y={625} 
  description="Why not ask your questions?" 
  cta="Start Asking"
  startOpen={true} // Initial state: open or closed
/>

Props

API Payload Structure

When sending a request to the backend, the payload format should be:

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

Backend 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 is sent.
• Chat History: Ensure the backend stores and manages chat history for enhanced conversational context.

Example Prompts

Default Prompt:

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

Custom Prompt:

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

Contribution & Support

• GitHub: Open-source repository available for contributions.
• Contact: Ping me on X, Discord, or GitHub for support.

Start building smarter projects with 10xAnswers today! 🚀

10xAnswers

A highly customizable, draggable, and responsive React chatbot component with multiple backend integration options.

Demo

[Live Demo Link - Coming Soon]

Features

• 🤖 Customizable AI Chatbot Component
• 🌐 Supports Backend URL and Gemini API Integration
• 📱 Responsive and Draggable Design
• 🎨 Extensive Styling Options
• 💬 Markdown Rendering
• 🔗 Flexible Configuration

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://your-backend-url.com"
      title="10xAnswers"
      draggable={true}
    />
  );
}

export default App;

Props

Basic Props

Styling Props

Advanced Usage

<ChatBot 
  backendUrl="https://ask-10x-questions.vercel.app/"
  geminiApi={import.meta.env.VITE_GEMINI_API}
  title="100xQuestions"
  botIcon="./logoImg2.jpg"
  userIcon="./logoImg.jpg"
  draggable={true}
  x={500}
  y={625}
  prompt="Custom prompt for chatbot behavior"
  description="AI-powered conversational assistant"
  startOpen={true}
/>

Backend Integration

URL-based Integration

Send POST requests to your backend with the following payload:

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

Gemini API Integration

Directly use Google's Gemini API with a provided API key.

Roadmap

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

Contributing

Contributions are welcome! Please see our Contributing Guidelines.

License

[Your License - e.g., MIT]

Author

Rajveer Singh

• Twitter: @rajveeerrsingh

Support

Found an issue? Open a GitHub Issue

Enjoying 10xAnswers? Consider starring the repository! ⭐