A flexible and reusable SDK for building AI-powered chatbots in React applications, leveraging the Google Gemini API for advanced conversational capabilities.
npm install chatx-ai
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 |