agenticaichat 1.0.1 → 1.0.4

package/README.md

@@ -1,30 +1,55 @@
-# 🤖 AgenticAIChat
-
+# AgenticAIChat
 AI-powered chatbot for business analytics with natural language database queries.
 
-## ✨ Features
+## Highlights
+
+- Five-minute setup with an interactive CLI wizard
+- Natural language questions in English or Hindi
+- Works with PostgreSQL, MySQL, SQLite, Turso, and MongoDB
+- Ready-to-use React/Next.js widget for dashboards and full pages
+- Configuration files generated for you (`.env.chatbot`, `chatbot-config.json`)
+- Fully typed TypeScript package
+
+## Requirements
+
+- Node.js 18+ and npm 9+
+- React 18+ and Next.js 13+ (app router recommended) for the built-in widget
+
+## Installation and Setup
 
-- 🚀 **5-Minute Setup**: Interactive CLI wizard
-- 💬 **Natural Language**: Ask in English/Hindi
-- 🗄️ **Multi-Database**: PostgreSQL, MySQL, MongoDB
-- 🎨 **Beautiful Widget**: Pre-built React component
-- 🔒 **Secure**: Encrypted API keys
-- 💰 **Free**: User pays OpenAI API only
-- 📦 **TypeScript**: Full type safety
+Install the package:
 
-## 📦 Installation
 ```bash
+# npm
 npm install agenticaichat
+
+# yarn
+yarn add agenticaichat
+
+# pnpm
+pnpm add agenticaichat
 ```
 
-## 🚀 Quick Start
+Run the setup wizard to configure your database and AI provider:
 
-### Step 1: Run Setup Wizard
 ```bash
 npx agenticai-setup
 ```
 
-### Step 2: Add Widget
+The wizard will:
+
+- Ask for your database type and connection details
+- Collect your AI provider, model, and API key
+- Generate `.env.chatbot` and `chatbot-config.json`
+- For Next.js: Generate API route and chat page
+- Update `.gitignore` to exclude generated secrets
+
+If the wizard doesn't run automatically after install (e.g., in CI or non-interactive environments), run the command above manually.
+
+## Quick Start (Next.js)
+
+Add the widget to any page or component:
+
 ```tsx
 // app/dashboard/page.tsx
 import { ChatbotWidget } from 'agenticaichat';
@@ -39,7 +64,8 @@ export default function Dashboard() {
 }
 ```
 
-### Step 3: Full Page Chat (Optional)
+Create a full-page chat experience:
+
 ```tsx
 // app/chat/page.tsx
 import { ChatbotWidget } from 'agenticaichat';
@@ -49,23 +75,179 @@ export default function ChatPage() {
 }
 ```
 
-## 📖 Documentation
+Start your Next.js app:
 
-Coming soon!
+```bash
+npm run dev
+```
 
-## 🤝 Contributing
+## Setting up the Backend API
 
-Contributions welcome!
+For all frameworks, you need a backend endpoint that handles chatbot queries. The setup wizard generates configuration files, but you must implement the API route yourself unless using Next.js.
 
-## 📄 License
+1. Run the setup wizard to generate `.env.chatbot` and `chatbot-config.json`:
 
-MIT License
+```bash
+npx agenticai-setup
+```
 
-## 🙋‍♂️ Support
+2. Create an HTTP POST endpoint at `/api/chatbot/query` (or any path you choose).
 
-- GitHub: [Issues](https://github.com/Bhaviraj2004/agenticaichat/issues)
-- Email: bhaviraj001@gmail.com
+Use the template from `templates/api-route.template.ts` as a guide. Load environment variables from `.env.chatbot` and use the `ChatbotEngine` from `agenticaichat/core`.
+
+Example (Node.js/Express):
+
+```javascript
+const express = require('express');
+const { ChatbotEngine } = require('agenticaichat/core');
+require('dotenv').config({ path: '.env.chatbot' });
+
+const app = express();
+app.use(express.json());
+
+app.post('/api/chatbot/query', async (req, res) => {
+  const { query } = req.body;
+  const engine = new ChatbotEngine();
+  try {
+    const result = await engine.processQuery(query);
+    res.json(result);
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+app.listen(3000);
+```
+
+For Next.js, the wizard generates this automatically.
+
+## Setup for Angular
+
+1. Install the package and run setup:
+
+```bash
+npm install agenticaichat
+npx agenticai-setup
+```
+
+2. Set up the backend API as described above (e.g., using Express or your preferred Node.js framework).
+
+3. In your Angular app, create a chatbot component:
 
----
+```typescript
+// chatbot.component.ts
+import { Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { AngularChatRequest, AngularChatResponse } from 'agenticaichat/angular';
 
-Made with ❤️ for developers
+@Component({
+  selector: 'app-chatbot',
+  template: `
+    <div>
+      <input [(ngModel)]="query" placeholder="Ask a question..." />
+      <button (click)="ask()">Ask</button>
+      <div *ngIf="response">{{ response.answer }}</div>
+    </div>
+  `
+})
+export class ChatbotComponent {
+  query = '';
+  response: AngularChatResponse | null = null;
+
+  constructor(private http: HttpClient) {}
+
+  ask() {
+    const request: AngularChatRequest = { query: this.query };
+    this.http.post<AngularChatResponse>('/api/chatbot/query', request)
+      .subscribe(res => this.response = res);
+  }
+}
+```
+
+4. Add the component to your app and ensure CORS is configured on your backend.
+
+## Setup for Vue
+
+1. Install the package and run setup:
+
+```bash
+npm install agenticaichat
+npx agenticai-setup
+```
+
+2. Set up the backend API as described above.
+
+3. In your Vue app, create a chatbot component:
+
+```vue
+<!-- Chatbot.vue -->
+<template>
+  <div>
+    <input v-model="query" placeholder="Ask a question..." />
+    <button @click="ask">Ask</button>
+    <div v-if="response">{{ response.answer }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VueChatRequest, VueChatResponse } from 'agenticaichat/vue';
+
+const query = ref('');
+const response = ref<VueChatResponse | null>(null);
+
+const ask = async () => {
+  const request: VueChatRequest = { query: query.value };
+  const res = await fetch('/api/chatbot/query', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(request)
+  });
+  response.value = await res.json();
+};
+</script>
+```
+
+4. Use the component in your app and configure CORS on your backend.
+
+## Setup for Other React Frameworks
+
+- Create an HTTP POST endpoint (e.g., `/api/chatbot/query`) that follows `templates/api-route.template.ts`.
+- Load `.env.chatbot` on the server and wire `DATABASE_URL`, `DB_TYPE`, `LLM_PROVIDER`, `LLM_MODEL`, and `LLM_API_KEY` into the handler.
+- Return JSON responses in the same shape as the template handler.
+- Configure CORS/auth so the widget can call your endpoint from the browser.
+
+Frontend usage stays the same:
+
+```tsx
+import { ChatbotWidget } from 'agenticaichat';
+
+export default function Page() {
+  return <ChatbotWidget apiPath="/api/chatbot/query" />;
+}
+```
+
+## Configuration Files
+
+- `.env.chatbot` holds database connection, LLM provider, model, and API key.
+- `chatbot-config.json` stores non-secret metadata (database/LLM selection).
+- `.gitignore` is updated automatically to keep generated secrets out of version control.
+
+## Troubleshooting
+
+- CI environments skip the wizard; run `npx agenticai-setup` locally after install.
+- If the wizard cannot run (non-interactive terminal), rerun manually with the command above.
+- To switch databases or AI providers, rerun the wizard; existing files will be replaced.
+
+## Contributing
+
+Contributions are welcome. Please open an issue or pull request with details and reproduction steps.
+
+## License
+
+MIT License
+
+## Support
+
+- GitHub: [Issues](https://github.com/Bhaviraj2004/agenticaichat/issues)
+- Email: bhaviraj001@gmail.com