cool-ai-chatbot 0.1.4 → 0.1.5

package/README.md

@@ -17,8 +17,8 @@ npm install cool-ai-chatbot
 ## Quick Start
 
 ```tsx
-import { ChatBot } from "@zinnoruuk/cool-ai-chatbot";
-import "@zinnoruuk/cool-ai-chatbot/style.css";
+import { ChatBot } from "cool-ai-chatbot";
+import "cool-ai-chatbot/style.css";
 
 function App() {
   return (
@@ -35,6 +35,32 @@ export default App;
 
 ---
 
+## How It Works
+
+```txt
+Visitor
+   ↓
+Cool AI Chatbot
+   ↓
+Your React Application
+   ↓
+Your Backend Endpoint
+   ↓
+Your AI Provider
+   ↓
+Response
+   ↓
+Visitor
+```
+
+Cool AI Chatbot provides the chat interface.
+
+Your backend provides the AI response.
+
+This design allows you to use any AI provider without changing the widget.
+
+---
+
 ## Features
 
 * React + TypeScript support
@@ -68,8 +94,6 @@ A welcoming personality for information, navigation, and discovery.
 
 ## Adaptive Theme Example
 
-Allow the chatbot to automatically blend with your website's appearance.
-
 ```tsx
 <ChatBot
   endpoint="/api/chat"
@@ -93,42 +117,118 @@ Allow the chatbot to automatically blend with your website's appearance.
 
 ## Styling
 
-Don't forget to import the included stylesheet:
-
 ```tsx
-import "@zinnoruuk/cool-ai-chatbot/style.css";
+import "cool-ai-chatbot/style.css";
 ```
 
 Without this import, the chatbot will render without its intended styling.
 
 ---
 
-## Backend Requirement
+## Backend Setup
 
-This package provides the frontend chatbot widget.
-
-You must provide your own backend endpoint that securely communicates with your AI provider.
+This package requires a backend endpoint.
 
 Example:
 
-```txt
-/api/chat
+```tsx
+<ChatBot endpoint="/api/chat" />
 ```
 
 Your backend should:
 
-* Receive user messages
-* Call your AI provider
-* Return the AI response
-* Keep API keys secure
+1. Receive the user's message.
+2. Send the message to your AI provider.
+3. Return the AI response.
+4. Keep API keys secure.
+
+---
+
+## Environment Variables
+
+Store AI credentials in your backend.
+
+Examples:
+
+```env
+OPENAI_API_KEY=your_key_here
+
+# Or
+
+GEMINI_API_KEY=your_key_here
+
+# Or
+
+ANTHROPIC_API_KEY=your_key_here
+```
+
+Never place API keys directly in React components or frontend code.
+
+---
+
+## Example Backend (OpenAI)
+
+This example uses OpenAI, but you may replace it with any AI provider.
+
+```ts
+import OpenAI from "openai";
+import express from "express";
+
+const app = express();
+
+app.use(express.json());
+
+const client = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+});
 
-Never place API keys directly in frontend code.
+app.post("/api/chat", async (req, res) => {
+  const { message } = req.body;
+
+  const response = await client.responses.create({
+    model: "gpt-5.5",
+    input: message,
+  });
+
+  res.json({
+    response: response.output_text,
+  });
+});
+```
+
+---
+
+## Example Response Format
+
+Your endpoint should return:
+
+```json
+{
+  "response": "Hello! How can I help you today?"
+}
+```
+
+As long as your backend returns this format, Cool AI Chatbot can work with virtually any AI provider.
+
+---
+
+## Supported AI Providers
+
+Examples include:
+
+* OpenAI
+* Google Gemini
+* Anthropic Claude
+* Ollama
+* Azure OpenAI
+* Local LLMs
+* Custom AI services
 
 ---
 
 ## Status
 
-Current Version: 0.1.3
+Current Version: 0.1.5
 
 Cool AI Chatbot is actively under development.
 
@@ -140,6 +240,16 @@ Current focus areas include:
 * Accessibility improvements
 * Enhanced developer configuration
 
+Future examples may include:
+
+```txt
+examples/
+├── openai/
+├── gemini/
+├── claude/
+└── ollama/
+```
+
 Breaking changes may occur during early releases as the package evolves.
 
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cool-ai-chatbot",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "A reusable React + TypeScript AI chatbot widget with personalities and adaptive themes.",
   "type": "module",
   "main": "./dist/index.js",