RAG Chat Widget MVP

Embeddable AI support chat powered by your knowledge base. Add it to any website with a single <script> tag.

Quick Start

Add this snippet before the </body> tag on your website:

<script
  src="https://widget.yourapp.com/chat-widget.js"
  data-tenant-id="YOUR-TENANT-ID"
  data-api-url="https://api.yourapp.com">
</script>

Configuration Options

Attribute	Required	Default	Description
data-tenant-id	Yes	—	Your unique tenant UUID from the admin dashboard
data-api-url	No	https://api.yourapp.com	Backend API base URL
data-color	No	#0066FF	Primary color (hex) for the widget button and header
data-position	No	bottom-right	`bottom-right` or `bottom-left`
data-greeting	No	Hi! How can I help you today?	First message shown when the chat opens

Customization Examples

Custom color + left position

<script
  src="https://widget.yourapp.com/chat-widget.js"
  data-tenant-id="YOUR-TENANT-ID"
  data-api-url="https://api.yourapp.com"
  data-color="#FF6B35"
  data-position="bottom-left"
  data-greeting="Welcome! How can we help?">
</script>

Features

Real-time streaming responses via Server-Sent Events (SSE)
Persistent conversation context within the same page session
Typing indicator while the AI is responding
Shift+Enter for newlines, Enter to send
Mobile responsive (full-width bottom sheet on small screens)
Inline CSS — no style conflicts with your website
Zero dependencies — pure vanilla JavaScript
Automatic human escalation (HITL) via Discord alerts
Multi-tenant knowledge base isolation

Deployment

The widget is hosted on Cloudflare Pages for global CDN distribution:

wrangler pages deploy .

This serves the widget from 300+ edge locations worldwide for near-instant load times.