@x-decisions/vanilla-js-agent

v1.0.8

Published

6 days ago

Vanilla JavaScript AI chat widget for CDN distribution

0High
0Medium
0Low

mfachryna

badrus

chat widget ai vanilla-js cdn

AI Chat Widget - Vanilla JavaScript / CDN Version

A beautiful AI chat widget that works with just a <script> tag. No build tools, no frameworks, just pure JavaScript.

🚀 Quick Start

Option 1: Use the Bundled Files

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="dist/ai-chat-widget.css">
</head>
<body>
  <h1>My Website</h1>
  
  <script src="dist/ai-chat-widget.min.js"></script>
  <script>
    new AIChatWidget({
      apiEndpoint: 'http://localhost:8000',
      apiKey: 'your-api-key',
      title: 'AI Assistant',
      suggestions: [
        'I want your best products',
        'What is your return policy?'
      ]
    });
  </script>
</body>
</html>

Option 2: CDN (when published)

<link rel="stylesheet" href="https://cdn.example.com/ai-chat-widget.min.css">
<script src="https://cdn.example.com/ai-chat-widget.min.js"></script>
<script>
  new AIChatWidget({ /* config */ });
</script>

📦 Installation

Build from Source

cd vanilla-js
npm install
npm run build

This creates:

dist/ai-chat-widget.js - Unminified bundle
dist/ai-chat-widget.min.js - Minified bundle
dist/ai-chat-widget.css - Styles

Run Demo

npm run serve

Then open http://localhost:3000/demo.html

⚙️ Configuration

new AIChatWidget({
  // Required
  apiEndpoint: 'http://localhost:8000',
  
  // Optional
  apiKey: 'your-api-key',
  headers: { 'Custom-Header': 'value' },
  title: 'AI Assistant',
  placeholder: 'Type a message...',
  theme: 'light', // or 'dark'
  primaryColor: '#6366f1',
  className: 'my-custom-class',
  suggestions: ['Suggestion 1', 'Suggestion 2'],
  logo: 'https://example.com/logo.png',
  zIndex: 9999
});

✨ Features

✅ Zero Dependencies - Pure vanilla JavaScript
✅ No Build Required - Works directly in the browser
✅ Tiny Bundle - ~50KB minified (including markdown parser)
✅ Session Management - Automatic localStorage persistence
✅ Markdown Support - Rich text formatting in messages
✅ Product Cards - Display product recommendations
✅ Responsive - Works on all devices
✅ Themeable - Light/dark themes + custom colors
✅ Accessible - ARIA labels and keyboard navigation

🎨 Customization

Custom Styling

Override CSS variables:

:root {
  --ai-chat-primary: #your-color;
}

Custom Theme

new AIChatWidget({
  theme: 'dark',
  primaryColor: '#ff6b6b'
});

📖 API

Methods

const widget = new AIChatWidget(config);

// Destroy the widget
widget.destroy();

Events

The widget automatically handles all interactions. No event listeners needed!

🔧 Development

# Install dependencies
npm install

# Build (watch mode)
npm run dev

# Build for production
npm run build

# Serve demo
npm run serve

📁 File Structure

vanilla-js/
├── src/
│   ├── index.js              # Entry point
│   ├── AIChatWidget.js       # Main widget class
│   ├── components/           # UI components
│   ├── services/             # API & storage services
│   ├── utils/                # Helper functions
│   └── styles/               # CSS styles
├── dist/                     # Built files
├── demo.html                 # Demo page
└── rollup.config.js          # Build configuration

🌐 Browser Support

Chrome/Edge (latest)
Firefox (latest)
Safari (latest)
Mobile browsers

📝 License

ISC

Made with ❤️ for easy integration