AI Chat Widget

A lightweight, customizable React chat widget that connects to your AI backend via webhooks. Built specifically for n8n users in mind, the goal is to make it dead simple to connect to your Conversational AI Agent n8n workflows (e.g. customer support chatbot).

https://github.com/user-attachments/assets/c6d35cc1-8ebb-46ee-94f7-df6981a834d1 (Outdated the design has been enhanced and I will release a updated video demo soon)

Installation

npm install @stheo/ai-chat-widget

Usage

import { AIChatWidget } from "@stheo/ai-chat-widget";

function App() {
    return (
        <>
            <AIChatWidget webhookUrl="https://your-api.com/chat" title="AI Assistant" initialMessage="Hello! How can I help you today?" primaryColor="#3D47B6" />
        </>
    );
}

Props

• webhookUrl (required): Webhook endpoint to post to.
• title (optional): AI Chat widget title.
• initialMessage (optional): AI Chat initial message.
• sessionId (optional): Configure a session id to send to your AI workflows.
• csrfToken (optional): Option to add a csrf token in order to send post request server-side for security.
• avatarSrc (optional): Prop to pass your own avatar image into the widget.
• primaryColor (optional): Brand your chat widget with your own primary color. (Only HEX)

API Format

Your webhook should accept POST requests with:

{
    "prompt": "user message",
    "session_id": "session_id"
}

And respond with:

{
    "output": "AI response message"
}

Features

This is currently a pre-release version with the very basic features that we will expand in the future.

• Clean Animations Using Pure CSS.
• Mobile Responsive Design.
• Keyboard Navigation.
• Typing Indicators.
• CSRF Token Support.
• Lightweight and fast.
• Customizable Color.
• Dynamic Avatar Support.

Incoming Upgrades

• Apply React Portal Escape.
• UI Design Enhancements.
• Full Accessiblity.
• Compound Component Design Pattern.
• Full Customizability.
• Item Carousels for AI Recommendation Systems.
• Authentication Options.
• File Attachement Support.

Styling

The widget comes with built-in styles. It positions itself as a floating button in the bottom-right corner and expands into a chat interface when clicked.

How you can support me

I appreciate you visiting my repository! It would mean a lot if you could give me your feedback or atleast leaving a star on your way out. If you would like to contribute I am also open to discuss privately.

License

MIT