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:

``bash
npm install chatx-ai

or

yarn add chatx-ai

or

pnpm add chatx-ai
`

---

🚀 Integration Guide

$3

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.

---

$3

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

`env
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

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

#### Import and Use the Component

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

export default function Home() {
return (

Welcome to My Site

apiKey={process.env.NEXT_PUBLIC_GEMINI_API_KEY}
botName={process.env.NEXT_PUBLIC_AI_BOT_NAME}
systemInstruction={process.env.NEXT_PUBLIC_SYSTEM_INSTRUCTION}
/>

);
}
`

---

$3

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:

`env
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

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

function App() {
return (

Welcome to My App

apiKey={process.env.REACT_APP_GEMINI_API_KEY}
botName={process.env.REACT_APP_AI_BOT_NAME}
systemInstruction={process.env.REACT_APP_SYSTEM_INSTRUCTION}
/>

);
}

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