Zene Chatbot

Universal chatbot solution for all frameworks and platforms - One package for all platforms!

📦 Published on npm: zene-chatbot

✨ Single Package Solution - No need to install separate packages! One @zenesys/zene-chatbot package works for React, Angular, Vue, Svelte, Solid, Nuxt, Next.js, Vanilla JS, and React Native.

📖 Documentation - Click to Read

All documentation is included in this package. Click any link below to open and read:

🚀 Getting Started Guides

| Document | Description | When to Use | |----------|-------------|-------------| | 📘 Configuration Guide ⭐ | Step-by-step configuration for all platforms | START HERE - First time setup | | ⚡ Quick Start Guide | Get started in 2 minutes | Need fast setup? |

📚 Detailed Integration Guides

| Document | Description | |----------|-------------| | React / Next.js Guide | Advanced Next.js setup, App Router, SSR | | Angular Guide | Angular specific component and module setup | | Vue 3 Guide | Vue 3, Vite, and Web Component setup | | Nuxt 3 Guide | Nuxt specific configuration (transpilation, SSR) | | SolidJS Guide | SolidJS setup with Vite |

🔗 Quick Navigation

By Framework:

• 🌐 React / Next.js
• 🔷 Angular
• 💚 Vue 3
• ⛰️ Nuxt.js
• 🧊 SolidJS
• 🟠 Svelte
• 📜 Vanilla JS
• 📱 React Native

🌟 Features

• ✅ Universal Support - React, Angular, Svelte, Vue, Solid, Nuxt, Vanilla JS, React Native
• ✅ Framework Agnostic Core - Business logic separated from UI
• ✅ TypeScript - Full type safety
• ✅ Voice Input/Output - Speech recognition and synthesis
• ✅ Streaming Responses - Real-time message streaming
• ✅ Dark Mode - Automatic theme detection
• ✅ MarkDown Support - Rich text rendering

📦 Installation

One package for all platforms! Install once, use everywhere:

npm install @zenesys/zene-chatbot

Peer Dependencies

Since the core UI is built with React, you must also install react and react-dom if your project doesn't already have them (e.g., Angular, Vue, Svelte, Vanilla JS inputs).

npm install react react-dom

🚀 Quick Start Examples

React / Next.js

import { ZeneChatbot } from '@zenesys/zene-chatbot/react';
import '@zenesys/zene-chatbot/styles';

function App() {
  return (
    <ZeneChatbot 
      baseUrl="https://your-api-url.com"
      bot_id="your_bot_id"
    />
  );
}

Angular

See ANGULAR_INTEGRATION.md for full details.

import { ZeneChatbotComponent } from '@zenesys/zene-chatbot/angular';

@Component({
  template: `
    <zene-chatbot 
      [baseUrl]="'https://your-api-url.com'"
      [bot_id]="'your_bot_id'">
    </zene-chatbot>
  `
})
export class AppComponent {}

Vue 3

See VUE_INTEGRATION.md for full details.

<template>
  <zene-chatbot 
    baseUrl="https://your-api-url.com"
    bot_id="your_bot_id"
  />
</template>

<script setup>
import { ZeneChatbot } from '@zenesys/zene-chatbot/vue';
import '@zenesys/zene-chatbot/styles';
</script>

Nuxt.js

See NUXT_INTEGRATION.md for configuration.

Config:

// nuxt.config.ts
export default defineNuxtConfig({
  build: { transpile: ['@zenesys/zene-chatbot'] },
  vue: { compilerOptions: { isCustomElement: (tag) => tag.includes('zene-chatbot') } },
  vite: { optimizeDeps: { include: ['@zenesys/zene-chatbot/web-component', '@zenesys/zene-chatbot/styles'] } }
})

Usage:

<client-only>
  <zene-chatbot base-url="..." bot_id="..."></zene-chatbot>
</client-only>

SolidJS

See SOLID_INTEGRATION.md for full details.

import '@zenesys/zene-chatbot/web-component';
import '@zenesys/zene-chatbot/styles';

const App = () => (
  <zene-chatbot base-url="..." bot_id="..."></zene-chatbot>
);

Svelte

<script>
  import { ZeneChatbot } from '@zenesys/zene-chatbot/svelte';
  import '@zenesys/zene-chatbot/styles';
</script>

<ZeneChatbot 
  baseUrl="https://your-api-url.com"
  bot_id="your_bot_id"
/>

Vanilla JavaScript

import { initZeneChatbot } from '@zenesys/zene-chatbot/vanilla';
import '@zenesys/zene-chatbot/styles';

initZeneChatbot({
  baseUrl: 'https://your-api-url.com',
  bot_id: 'your_bot_id',
  containerId: 'chatbot-container'
});

🔧 Configuration

| Prop | Type | Required | Description | |------|------|----------|-------------| | baseUrl | string | ✅ Yes | Your API base URL | | bot_id | string | ✅ Yes | Your bot ID |

🧪 Running Examples

You can test the chatbot in various frameworks using the included examples.

1. Clone/Download this repository.
2. Build the library first: npm run build
3. Run any example:

| Framework | Command | Port | |-----------|---------|------| | React | cd examples/react-test && npm install && npm run dev | 5173 | | Next.js | cd examples/next-test && npm install && npm run dev | 3000 | | Angular | cd examples/angular-test && npm install && npm start | 4200 | | Vue | cd examples/vue-test && npm install && npm run dev | 5173 | | Nuxt | cd examples/nuxt-test && npm install && npm run dev | 3000 | | Solid | cd examples/solid-test && npm install && npm run dev | 5173 | | Svelte | cd examples/svelte-test && npm install && npm run dev | 5173 |

📄 License

MIT

Made with ❤️ - Universal chatbot for all platforms