@tech-xon/aura-ai-chat-plugin

Universal Embeddable Aura AI Web Chatbot Widget with Shadow DOM, real-time WebSocket communication, Model Context Protocol (MCP) tool execution, on-demand session context, custom interactive widgets, and hot theme reconfiguration.

📦 Installation

NPM (Angular, React, Vue, Vite)

npm install @tech-xon/aura-ai-chat-plugin

CDN / Script Tag (Vanilla HTML, WordPress, PHP)

<script src="https://tu-dominio.com/assets/aura-chatbot.iife.js"></script>

⚡ Quickstart

import { AuraChatbot } from '@tech-xon/aura-ai-chat-plugin';

const chatbot = AuraChatbot.init({
  serverUrl: 'wss://aura.tu-dominio.com/ws',
  apiKey: 'jrv_live_...',
  agentId: '5e37e635-e721-476a-a4db-ff55d33fae15',
  theme: 'aura', // 'aura' | 'light' | 'dark' | 'auto'
  language: 'es',
  sessionHash: 'user_session_123',
  sessionContext: {
    user: { id: 'cust_101', name: 'TechXon Global', plan: 'Enterprise' },
    activeVehicle: 'PAJ GPS Allrounder 4G'
  }
});

📖 Documentación Interactiva

Puedes ver la documentación interactiva completa con ejemplos funcionales y selector de tema Claro/Oscuro en:

• En servidor local: http://localhost:5173/demo/docs.html
• Guía Markdown: docs/CHATBOT_AND_SDK_GUIDE.md

🎨 Personalización en Caliente (Hot UI)

// Cambiar tema visual
chatbot.setTheme('aura');

// Color de acento
chatbot.setPrimaryColor('#007AFF');

// Estilo de burbujas ('fullwidth' plano o 'bubble' clásico)
chatbot.setBubbleStyle('fullwidth');

// Textos de cabecera
chatbot.setTitle('Soporte JARVIS');
chatbot.setSubtitle('Conectado');
chatbot.setPlaceholder('Escribe tu duda...');

🧩 Custom Widgets

// Opción A: Registro dinámico
JarvisChatbot.registerWidget('gps_locator_card', (data, container) => {
  container.innerHTML = `
    <div>
      <strong>📍 ${data.name}</strong>
      <p>Batería: ${data.battery}% | ${data.status}</p>
    </div>
  `;
});

📄 License

MIT © JARVIS Team