Widget Chat AI

A professional, lightweight AI chat widget with streaming support, markdown rendering, and ready-to-use wrappers for React and Vue.

Features

• 🚀 Lightweight & Fast: Optimized bundle, no Node.js dependencies in the browser.
• 💬 Streaming Ready: Built-in support for real-time message streaming (SSE, WebSockets, etc.).
• 📝 Advanced Markdown: High-performance rendering with code highlighting and tables.
• 🎨 Fully Themeable: Customize everything via CSS variables or component props.
• 🧩 Multi-Framework: First-class support for React and Vue 3.
• 🛠 Headless Mode: Use useChat hook to build your own custom UI.

Installation

npm install widget-chat-ai

Usage

React

import { ChatWidget } from 'widget-chat-ai/react';
import 'widget-chat-ai/style.css';

const transport = {
  async send(text, { onChunk, onComplete, onError }) {
    try {
      const response = await fetch('/api/chat', { /* ... */ });
      // Handle streaming logic here
      onChunk("Hello from AI!");
      onComplete();
    } catch (err) {
      onError(err);
    }
  }
};

const App = () => (
  <ChatWidget transport={transport} title="AI Assistant" />
);

Vue 3

<template>
  <ChatWidget :transport="transport" title="AI Assistant" />
</template>

<script setup>
import { ChatWidget } from 'widget-chat-ai/vue';
import 'widget-chat-ai/style.css';

const transport = {
  async send(text, { onChunk, onComplete, onError }) {
    // Implement your streaming logic
  }
};
</script>

Streaming Example (SSE)

const transport = {
  async send(text, { onChunk, onComplete, onError }) {
    const response = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ message: text }),
    });

    const reader = response.body.getReader();
    const decoder = new TextDecoder();

    while (true) {
      const { value, done } = await reader.read();
      if (done) break;
      const chunk = decoder.decode(value);
      onChunk(chunk);
    }
    onComplete();
  }
};

Customization

| Prop | Type | Default | Description | |------|------|---------|-------------| | transport | Transport | Required | Interface for AI communication | | title | string | "AI Chat" | Header title | | primaryColor | string | "#aa4ce3" | Main theme color | | resizable | boolean | false | Enable window resizing | | welcomeMessage | string | "Hello!..." | Initial AI message (supports Markdown) |

Headless Usage

You can use the logic without the UI:

import { useChat } from 'widget-chat-ai/react'; // or /vue
const { messages, sendMessage } = useChat(transport);

License

MIT