agenticaichat 1.0.3 → 1.0.4

package/README.md

@@ -13,11 +13,11 @@ AI-powered chatbot for business analytics with natural language database queries
 ## Requirements
 
 - Node.js 18+ and npm 9+
-- React 18+ and Next.js 13+ (app router recommended)
+- React 18+ and Next.js 13+ (app router recommended) for the built-in widget
 
 ## Installation and Setup
 
-The setup wizard now launches automatically right after installation. Choose your preferred package manager:
+Install the package:
 
 ```bash
 # npm
@@ -30,21 +30,21 @@ yarn add agenticaichat
 pnpm add agenticaichat
 ```
 
-During install, the wizard will:
+Run the setup wizard to configure your database and AI provider:
+
+```bash
+npx agenticai-setup
+```
+
+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`
-- Create starter files if they are missing (Next.js defaults):
-  - `app/api/chatbot/query/route.ts`
-  - `app/chat/page.tsx`
-  - Updates `.gitignore` to exclude generated secrets
+- For Next.js: Generate API route and chat page
+- Update `.gitignore` to exclude generated secrets
 
-If you need to rerun the wizard later:
-
-```bash
-npx agenticai-setup
-```
+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)
 
@@ -81,11 +81,136 @@ Start your Next.js app:
 npm run dev
 ```
 
-## Using with Other React Frameworks
+## Setting up the Backend API
+
+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.
+
+1. Run the setup wizard to generate `.env.chatbot` and `chatbot-config.json`:
+
+```bash
+npx agenticai-setup
+```
+
+2. Create an HTTP POST endpoint at `/api/chatbot/query` (or any path you choose).
+
+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';
+
+@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>
+```
 
-The widget renders in any React 18+ app (CRA, Vite, Remix, etc.). You only need to supply a compatible backend endpoint.
+4. Use the component in your app and configure CORS on your backend.
 
-Backend requirements:
+## 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.

package/bin/cli.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 const inquirer = require('inquirer').default;
 const chalk = require('chalk');
@@ -298,8 +298,41 @@ async function main() {
   const selectedProvider = llmProviders.find(p => p.value === llmAnswers.provider);
   console.log(chalk.green(`\n✅ ${selectedProvider.name} configured!\n`));
 
-  // Step 3: Generate configuration files
-  console.log(chalk.bold.blue('📝 Step 3: Generating Configuration Files\n'));
+  // Step 3: Frontend Framework / Adapter
+  console.log(chalk.bold.blue('\n🧩 Step 3: Frontend Framework\n'));
+
+  const frontendAnswers = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'framework',
+      message: 'Which frontend framework will you use for the chat UI?',
+      choices: [
+        {
+          name: 'Next.js / React (recommended, uses built-in ChatbotWidget)',
+          value: 'react',
+          short: 'React'
+        },
+        {
+          name: 'Angular (use HTTP API from your Angular component)',
+          value: 'angular',
+          short: 'Angular'
+        },
+        {
+          name: 'Vue (use HTTP API from your Vue component)',
+          value: 'vue',
+          short: 'Vue'
+        },
+        {
+          name: 'Other / Backend-only (no bundled UI, HTTP API only)',
+          value: 'other',
+          short: 'Other'
+        }
+      ]
+    }
+  ]);
+
+  // Step 4: Generate configuration files
+  console.log(chalk.bold.blue('📝 Step 4: Generating Configuration Files\n'));
   
   const spinner = ora('Creating files...').start();
 
@@ -317,6 +350,9 @@ LLM_PROVIDER=${llmAnswers.provider}
 LLM_API_KEY=${llmAnswers.apiKey}
 LLM_MODEL=${llmAnswers.model}
 
+# Frontend Adapter
+FRONTEND_FRAMEWORK=${frontendAnswers.framework}
+
 # Other
 SECRET_KEY=${crypto.randomBytes(32).toString('hex')}
 CHATBOT_ENABLED=true
@@ -336,6 +372,9 @@ CHATBOT_ENABLED=true
       provider: llmAnswers.provider,
       model: llmAnswers.model
     },
+    frontend: {
+      framework: frontendAnswers.framework
+    },
     setupDate: new Date().toISOString(),
     version: '2.0.0'
   };
@@ -344,44 +383,52 @@ CHATBOT_ENABLED=true
   fs.writeFileSync(configPath, JSON.stringify(configContent, null, 2));
   spinner.text = 'Created chatbot-config.json';
 
-  // Create API route file
-  try {
-    const apiDir = path.join(process.cwd(), 'app', 'api', 'chatbot', 'query');
-    if (!fs.existsSync(apiDir)) {
-      fs.mkdirSync(apiDir, { recursive: true });
+  // Create frontend scaffolding based on selected framework
+  if (frontendAnswers.framework === 'react') {
+    // Next.js / React: generate app router files
+    try {
+      const apiDir = path.join(process.cwd(), 'app', 'api', 'chatbot', 'query');
+      if (!fs.existsSync(apiDir)) {
+        fs.mkdirSync(apiDir, { recursive: true });
+      }
+
+      const apiTemplate = fs.readFileSync(
+        path.join(__dirname, '..', 'templates', 'api-route.txt'),
+        'utf8'
+      );
+
+      const apiPath = path.join(apiDir, 'route.ts');
+      fs.writeFileSync(apiPath, apiTemplate);
+      spinner.text = 'Created API route: app/api/chatbot/query/route.ts';
+    } catch (error) {
+      spinner.warn('Could not create API route automatically');
+      console.log(chalk.yellow('\nℹ️  You can manually create the API route later'));
     }
 
-    const apiTemplate = fs.readFileSync(
-      path.join(__dirname, '..', 'templates', 'api-route.txt'),
-      'utf8'
-    );
-
-    const apiPath = path.join(apiDir, 'route.ts');
-    fs.writeFileSync(apiPath, apiTemplate);
-    spinner.text = 'Created API route: app/api/chatbot/query/route.ts';
-  } catch (error) {
-    spinner.warn('Could not create API route automatically');
-    console.log(chalk.yellow('\nℹ️  You can manually create the API route later'));
-  }
+    try {
+      const chatDir = path.join(process.cwd(), 'app', 'chat');
+      if (!fs.existsSync(chatDir)) {
+        fs.mkdirSync(chatDir, { recursive: true });
+      }
 
-  // Create chat page
-  try {
-    const chatDir = path.join(process.cwd(), 'app', 'chat');
-    if (!fs.existsSync(chatDir)) {
-      fs.mkdirSync(chatDir, { recursive: true });
+      const chatTemplate = fs.readFileSync(
+        path.join(__dirname, '..', 'templates', 'chat-page.txt'),
+        'utf8'
+      );
+
+      const chatPath = path.join(chatDir, 'page.tsx');
+      fs.writeFileSync(chatPath, chatTemplate);
+      spinner.text = 'Created chat page: app/chat/page.tsx';
+    } catch (error) {
+      spinner.warn('Could not create chat page automatically');
+      console.log(chalk.yellow('\nℹ️  You can manually create the chat page later'));
     }
-
-    const chatTemplate = fs.readFileSync(
-      path.join(__dirname, '..', 'templates', 'chat-page.txt'),
-      'utf8'
-    );
-
-    const chatPath = path.join(chatDir, 'page.tsx');
-    fs.writeFileSync(chatPath, chatTemplate);
-    spinner.text = 'Created chat page: app/chat/page.tsx';
-  } catch (error) {
-    spinner.warn('Could not create chat page automatically');
-    console.log(chalk.yellow('\nℹ️  You can manually create the chat page later'));
+  } else {
+    // Non-React frameworks: keep backend-only scaffolding, user builds UI
+    spinner.text = 'Backend configured (HTTP API). Frontend adapter to be implemented in your framework.';
+    console.log(chalk.yellow('\nℹ️  Frontend note:'));
+    console.log(chalk.gray('   - Use the /api/chatbot/query HTTP endpoint from your Angular/Vue/other component.'));
+    console.log(chalk.gray('   - See README for framework-specific adapter guidance.\n'));
   }
 
   // Update .gitignore
@@ -403,8 +450,8 @@ CHATBOT_ENABLED=true
   // Success message
   console.log(chalk.green.bold('\n✅ Setup Complete!\n'));
   console.log(chalk.white('Files created:'));
-  console.log(chalk.gray('  • .env.chatbot (API keys & database config)'));
-  console.log(chalk.gray('  • chatbot-config.json (settings)'));
+  console.log(chalk.gray('  • .env.chatbot (API keys, database, LLM, frontend framework)'));
+  console.log(chalk.gray('  • chatbot-config.json (settings, including frontend framework)'));
   console.log(chalk.gray('  • .gitignore (updated)\n'));
 
   console.log(chalk.white('Database Configuration:'));
@@ -417,17 +464,41 @@ CHATBOT_ENABLED=true
   console.log(chalk.cyan(`  • Model: ${llmAnswers.model}`));
   console.log(chalk.gray(`  • API Key: ${'*'.repeat(20)}\n`));
 
-  console.log(chalk.white('Next steps:\n'));
-  console.log(chalk.yellow('1. Add the widget to your Next.js app:\n'));
-  console.log(chalk.cyan('   import { ChatbotWidget } from "agenticaichat";'));
-  console.log(chalk.cyan('   \n   <ChatbotWidget />\n'));
-  
-  console.log(chalk.yellow('2. Or create a full-page chat route:\n'));
-  console.log(chalk.cyan('   // app/chat/page.tsx'));
-  console.log(chalk.cyan('   <ChatbotWidget fullScreen />\n'));
+  console.log(chalk.white('Frontend Framework:'));
+  console.log(chalk.cyan(`  • Framework: ${frontendAnswers.framework}\n`));
 
-  console.log(chalk.yellow('3. Start your development server:\n'));
-  console.log(chalk.cyan('   npm run dev\n'));
+  console.log(chalk.white('Next steps:\n'));
+  if (frontendAnswers.framework === 'react') {
+    console.log(chalk.yellow('1. Add the widget to your Next.js/React app:\n'));
+    console.log(chalk.cyan('   import { ChatbotWidget } from "agenticaichat";'));
+    console.log(chalk.cyan('   \n   <ChatbotWidget />\n'));
+    
+    console.log(chalk.yellow('2. Or create a full-page chat route:\n'));
+    console.log(chalk.cyan('   // app/chat/page.tsx'));
+    console.log(chalk.cyan('   <ChatbotWidget fullScreen />\n'));
+
+    console.log(chalk.yellow('3. Start your development server:\n'));
+    console.log(chalk.cyan('   npm run dev\n'));
+  } else if (frontendAnswers.framework === 'angular') {
+    console.log(chalk.yellow('1. Set up a backend API endpoint (see README for details).\n'));
+    console.log(chalk.yellow('2. Create an Angular component like this:\n'));
+    console.log(chalk.cyan('   // chatbot.component.ts'));
+    console.log(chalk.cyan('   import { HttpClient } from "@angular/common/http";'));
+    console.log(chalk.cyan('   // ... component code to POST to /api/chatbot/query\n'));
+    console.log(chalk.yellow('3. See README.md for complete Angular setup example.\n'));
+  } else if (frontendAnswers.framework === 'vue') {
+    console.log(chalk.yellow('1. Set up a backend API endpoint (see README for details).\n'));
+    console.log(chalk.yellow('2. Create a Vue component like this:\n'));
+    console.log(chalk.cyan('   // Chatbot.vue'));
+    console.log(chalk.cyan('   <script setup>'));
+    console.log(chalk.cyan('   const response = await fetch("/api/chatbot/query", { ... });'));
+    console.log(chalk.cyan('   </script>\n'));
+    console.log(chalk.yellow('3. See README.md for complete Vue setup example.\n'));
+  } else {
+    console.log(chalk.yellow('1. Implement a small adapter/component in your framework that calls:\n'));
+    console.log(chalk.cyan('   POST /api/chatbot/query { query: string }\n'));
+    console.log(chalk.yellow('2. Use the response to render messages in your UI.\n'));
+  }
 
   console.log(chalk.white('Need help? Visit: ') + chalk.blue('https://github.com/yourusername/agenticaichat\n'));
 }

package/dist/adapters/angular.d.ts

@@ -0,0 +1,9 @@
+export interface AngularChatRequest {
+    query: string;
+}
+export interface AngularChatResponse {
+    answer: string;
+    sql?: string;
+    data?: any;
+    error?: string;
+}

package/dist/adapters/angular.js

@@ -0,0 +1,6 @@
+"use strict";
+// Placeholder types and helper for Angular adapters.
+// Angular users should create their own component/service that calls the HTTP API:
+// POST /api/chatbot/query { query: string }
+// and handles the JSON response.
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/adapters/react.d.ts

@@ -0,0 +1 @@
+export { ChatbotWidget as ReactChatbotWidget } from '../widget';

package/dist/adapters/react.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactChatbotWidget = void 0;
+// Thin alias so future adapters can share a consistent naming scheme.
+// React users should continue to import from "agenticaichat" directly,
+// but this adapter is exposed for symmetry with Angular/Vue.
+var widget_1 = require("../widget");
+Object.defineProperty(exports, "ReactChatbotWidget", { enumerable: true, get: function () { return widget_1.ChatbotWidget; } });

package/dist/adapters/vue.d.ts

@@ -0,0 +1,9 @@
+export interface VueChatRequest {
+    query: string;
+}
+export interface VueChatResponse {
+    answer: string;
+    sql?: string;
+    data?: any;
+    error?: string;
+}

package/dist/adapters/vue.js

@@ -0,0 +1,6 @@
+"use strict";
+// Placeholder types and helper for Vue adapters.
+// Vue users should create their own component/composable that calls the HTTP API:
+// POST /api/chatbot/query { query: string }
+// and handles the JSON response.
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { ChatbotWidget } from './widget';
+export { ReactChatbotWidget } from './adapters/react';
 export { ChatbotEngine } from './core/ChatbotEngine';
 export { EngineFactory } from './core/EngineFactory';
 export { DatabaseEngine } from './engines/base/DatabaseEngine';
@@ -18,3 +19,5 @@ export { TogetherAIProvider } from './llm/providers/TogetherAIProvider';
 export { DeepInfraProvider } from './llm/providers/DeepInfraProvider';
 export type { DatabaseCategory, SqlDatabaseType, NoSqlDatabaseType, SupportedDatabaseType, DatabaseConfig, DatabaseSchema, TableSchema, ColumnSchema, LLMConfig, LLMProviderType, ChatMessage, QueryRequest, QueryResponse, QueryResult, EngineStatus, ChatbotConfig } from './types';
 export { Logger, logger } from './utils/logger';
+export * from './adapters/angular';
+export * from './adapters/vue';

package/dist/index.js

@@ -1,11 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.logger = exports.Logger = exports.DeepInfraProvider = exports.TogetherAIProvider = exports.GrokProvider = exports.ClaudeProvider = exports.GeminiProvider = exports.OpenAIProvider = exports.LLMFactory = exports.MongoEngine = exports.SQLiteDialect = exports.MySQLDialect = exports.PostgresDialect = exports.NoSqlEngine = exports.SqlEngine = exports.DatabaseEngine = exports.EngineFactory = exports.ChatbotEngine = exports.ChatbotWidget = void 0;
+exports.logger = exports.Logger = exports.DeepInfraProvider = exports.TogetherAIProvider = exports.GrokProvider = exports.ClaudeProvider = exports.GeminiProvider = exports.OpenAIProvider = exports.LLMFactory = exports.MongoEngine = exports.SQLiteDialect = exports.MySQLDialect = exports.PostgresDialect = exports.NoSqlEngine = exports.SqlEngine = exports.DatabaseEngine = exports.EngineFactory = exports.ChatbotEngine = exports.ReactChatbotWidget = exports.ChatbotWidget = void 0;
 // ============================================
 // CLIENT-SIDE EXPORTS (Safe for browser)
 // ============================================
 var widget_1 = require("./widget");
 Object.defineProperty(exports, "ChatbotWidget", { enumerable: true, get: function () { return widget_1.ChatbotWidget; } });
+var react_1 = require("./adapters/react");
+Object.defineProperty(exports, "ReactChatbotWidget", { enumerable: true, get: function () { return react_1.ReactChatbotWidget; } });
 // ============================================
 // SERVER-SIDE EXPORTS (Node.js only)
 // ============================================
@@ -52,3 +68,6 @@ Object.defineProperty(exports, "DeepInfraProvider", { enumerable: true, get: fun
 var logger_1 = require("./utils/logger");
 Object.defineProperty(exports, "Logger", { enumerable: true, get: function () { return logger_1.Logger; } });
 Object.defineProperty(exports, "logger", { enumerable: true, get: function () { return logger_1.logger; } });
+// Framework adapter helper types (for Angular/Vue HTTP adapters)
+__exportStar(require("./adapters/angular"), exports);
+__exportStar(require("./adapters/vue"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agenticaichat",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "AI-powered chatbot for business analytics with natural language database queries",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",