ChatX-AI || AI ChatBot SDK

ChatX AI is a flexible and reusable SDK designed for integrating advanced AI-powered chatbots into React applications. Powered by the Google Gemini API, it enables developers to quickly add conversational AI features with minimal setup and maximum customization.

• Seamless React integration
• Powered by Google Gemini for state-of-the-art AI conversations
• Customizable and extensible for various chatbot use-cases
• Easy to set up and use in any modern React project

Get started building intelligent chatbots for your apps today!

📦 Installation

Install the package using your preferred package manager:

npm install chatx-ai
# or
yarn add chatx-ai
# or
pnpm add chatx-ai

🚀 Integration Guide

1. Get Your Gemini API Key

To use this SDK, you need a Google Gemini API key. Follow these steps:

1. Visit the Google AI Studio.
2. Log in with your Google account.
3. Generate a new API key.
4. Copy the API key for use in your project.

2. Add Environment Variables

Create a .env.local file in the root of your project and add the following variables:

NEXT_PUBLIC_GEMINI_API_KEY=your-api-key-here
NEXT_PUBLIC_AI_BOT_NAME=My Assistant
NEXT_PUBLIC_SYSTEM_INSTRUCTION= You are a customer support assistant for Acme Corp. Help users with their questions about our products and services.

Note: Never expose sensitive data like API keys directly in your code. Always use environment variables.

3. Integration in Next.js

To use the chatbot in a Next.js application, follow these steps:

Import and Use the Component

// filepath: pages/index.tsx
import ChatBot from "chatx-ai";

export default function Home() {
  return (
    <div>
      <h1>Welcome to My Site</h1>
      <ChatBot
        apiKey={process.env.NEXT_PUBLIC_GEMINI_API_KEY}
        botName={process.env.NEXT_PUBLIC_AI_BOT_NAME}
        systemInstruction={process.env.NEXT_PUBLIC_SYSTEM_INSTRUCTION}
      />
    </div>
  );
}

4. Integration in React

To use the chatbot in a React application, follow these steps:

Add Environment Variables

In React, environment variables must start with REACT_APP_. Update your .env file as follows:

REACT_APP_GEMINI_API_KEY=your-api-key-here
REACT_APP_AI_BOT_NAME=My Assistant
REACT_APP_SYSTEM_INSTRUCTION=You are a helpful assistant.

Import and Use the Component

// filepath: src/App.tsx
import ChatBot from "chatx-ai";

function App() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <ChatBot
        apiKey={process.env.REACT_APP_GEMINI_API_KEY}
        botName={process.env.REACT_APP_AI_BOT_NAME}
        systemInstruction={process.env.REACT_APP_SYSTEM_INSTRUCTION}
      />
    </div>
  );
}

export default App;

🌍 Environment Variables

| Variable | Description | Required | | -------------------------------- | ----------------------------------- | ----------------------------- | | NEXT_PUBLIC_GEMINI_API_KEY | Your Google Gemini API key | Yes (unless passed via props) | | NEXT_PUBLIC_AI_BOT_NAME | The bot's display name | No | | NEXT_PUBLIC_SYSTEM_INSTRUCTION | Instructions for the bot's behavior | No |

For React, use the REACT_APP_ prefix instead:

| Variable | Description | Required | | ------------------------------ | ----------------------------------- | ----------------------------- | | REACT_APP_GEMINI_API_KEY | Your Google Gemini API key | Yes (unless passed via props) | | REACT_APP_AI_BOT_NAME | The bot's display name | No | | REACT_APP_SYSTEM_INSTRUCTION | Instructions for the bot's behavior | No |

🔒 Security Best Practices

1. Never expose API keys in client code:

   • Use environment variables.
   • Store sensitive data server-side for SaaS.

2. Implement rate limiting:

   • Prevent API abuse.
   • Track usage per customer.

3. Validate inputs:

   • Sanitize user messages.
   • Implement content filtering if needed.

📝 License

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

Made with ❤️ by Sanchit Pandey