npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

@zenesys/zene-chatbot

v0.1.5

Published

Universal Zene Chatbot - One package for all frameworks and platforms (React, Angular, Vue, Svelte, Vanilla JS, React Native)

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

varun_zenesys_npmvarun_zenesys_npm

Keywords

chatbotzenezene-chatbotreact-zene-chatbotuniversalreactangularvuesveltevanillareact-nativetypescriptframework-agnosticcross-platform

Readme

Zene Chatbot

npm version npm downloads

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, 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? | | 🚀 Implementation Guide | Detailed setup for all platforms | Need detailed instructions? |

📚 Reference Documentation

| Document | Description | When to Use | |----------|-------------|-------------| | 📖 Full Documentation | Complete API reference and advanced usage | Need API details? | | 🌐 Platform Support | Platform compatibility and requirements | Checking compatibility? | | 🏗️ Architecture | Technical architecture details | Understanding internals? | | 🔄 Migration Guide | Migrating from old versions | Upgrading from older version? |

📋 Quick Navigation

By Framework:

💡 New to Zene Chatbot? → Start with Configuration Guide ⭐

📋 Table of Contents

  1. 📖 Documentation - All documentation links
  2. 🌟 Features - Key features
  3. 📦 Installation - Install instructions
  4. 🚀 Quick Start Examples - Code examples for all frameworks
  5. 📚 Framework Support - Framework-specific guides
  6. 📦 Package Exports - Available imports
  7. 🔧 Configuration - Configuration options
  8. 💡 Getting Started - Step-by-step setup
  9. 🔗 Quick Links - All documentation links

🌟 Features

  • ✅ Universal Support - React, Angular, Svelte, Vue, Vanilla JS, React Native, Flutter, Native Android/iOS
  • ✅ 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
  • ✅ Phone Validation - International phone number support
  • ✅ Markdown Support - Rich text messages

📦 Installation

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

npm install @zenesys/zene-chatbot

That's it! No additional packages needed. Use the same package for React, Angular, Vue, Svelte, Vanilla JS, and React Native.

📚 Need detailed instructions?

🚀 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

📖 Complete Angular Guide: See ANGULAR_GUIDE.md for detailed installation and usage instructions.

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

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

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

Svelte

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

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

Vanilla JavaScript

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

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

React Native

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

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

Core (Framework Agnostic)

import { ChatbotCore } from '@zenesys/zene-chatbot/core';

const chatbot = new ChatbotCore({
  baseUrl: 'https://your-api-url.com',
  bot_id: 'your_bot_id'
});

await chatbot.sendMessage('Hello!');

📚 Framework Support

One package, all frameworks! Use zene-chatbot with any framework:

🌐 Web Frameworks

📱 Mobile Frameworks

🔧 Core API

📦 Package Exports

One package, multiple entry points! Import from the specific framework path:

| Framework | Import Path | Example | |-----------|-------------|---------| | React | zene-chatbot/react | import { ZeneChatbot } from '@zenesys/zene-chatbot/react' | | Angular | zene-chatbot/angular | import { ZeneChatbotComponent } from '@zenesys/zene-chatbot/angular' | | Vue 3 | zene-chatbot/vue | import { ZeneChatbot } from '@zenesys/zene-chatbot/vue' | | Svelte | zene-chatbot/svelte | import { ZeneChatbot } from '@zenesys/zene-chatbot/svelte' | | Vanilla JS | zene-chatbot/vanilla | import { initZeneChatbot } from '@zenesys/zene-chatbot/vanilla' | | React Native | zene-chatbot/react-native | import { ZeneChatbot } from '@zenesys/zene-chatbot/react-native' | | Core API | zene-chatbot/core | import { ChatbotCore } from '@zenesys/zene-chatbot/core' | | Styles | @zenesys/zene-chatbot/styles | import '@zenesys/zene-chatbot/styles' |

🔧 Configuration

Quick Configuration

| Prop | Type | Required | Description | Example | |------|------|----------|-------------|---------| | baseUrl | string | ✅ Yes | Your API base URL | "https://api.example.com" | | bot_id | string | ✅ Yes | Your bot ID | "bot_9B3E7C348966" |

📖 Need detailed configuration instructions? See the Configuration Guide for step-by-step setup for your framework!

📖 Complete Documentation Index

All documentation files are included in this package. Click any link to read:

📘 Setup & Configuration

📚 Reference & API

🔄 Guides

💡 Tip: All documentation files are in the package root. After installing, you can find them in node_modules/@zenesys/zene-chatbot/ or view them on npm.

🎯 Integration Guide by Platform

Web Frameworks

  1. React / Next.js - Most popular, full-featured
  2. Angular - Enterprise-ready, TypeScript-first
  3. Vue 3 - Progressive framework, easy to learn
  4. Svelte - Compile-time optimized
  5. Vanilla JavaScript - No framework required

Mobile Frameworks

  1. React Native - Cross-platform mobile apps
  2. Flutter - Dart-based mobile development
  3. Native Android - Kotlin/Java implementation
  4. Native iOS - Swift implementation

💡 Getting Started

  1. 📦 Install the package:

    npm install @zenesys/zene-chatbot

  2. 🔧 Follow the Configuration Guide:

    • Choose your framework (React, Angular, Vue, Svelte, Vanilla JS, React Native)
    • Copy the code example for your framework
    • Replace baseUrl and bot_id with your values

  3. ✅ Test your chatbot:

    • Run your application
    • Send a test message
    • Verify responses are received

  4. 📚 Explore advanced features:

That's it! 🎉 You're ready to use the chatbot!

📄 License

MIT

🔗 Quick Links

Essential Links

All Documentation (Click to Open)

📝 Note: All documentation files are included in the npm package. After installation, you can access them in node_modules/@zenesys/zene-chatbot/ or view online on npm.

Made with ❤️ - Universal chatbot for all platforms