@kilnai/widget 0.1.10 → 0.1.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +102 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="https://raw.githubusercontent.com/sequelcore/kiln/main/docs/assets/mascot.png" alt="Kiln" width="120" />
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<h1 align="center">@kilnai/widget</h1>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
<a href="https://www.npmjs.com/package/@kilnai/widget"><img src="https://img.shields.io/npm/v/@kilnai/widget.svg" alt="npm version" /></a>
|
|
9
|
+
<a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="License: MIT" /></a>
|
|
10
|
+
</p>
|
|
11
|
+
|
|
12
|
+
<p align="center">Embeddable AI chat widget. One script tag, zero dependencies.</p>
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## What is this?
|
|
17
|
+
|
|
18
|
+
`@kilnai/widget` adds a chat widget to any website that connects to a [Kiln](https://github.com/sequelcore/kiln) gateway via WebSocket. Built with Shadow DOM for style isolation, auto-reconnects on disconnect, and has zero runtime dependencies.
|
|
19
|
+
|
|
20
|
+
## Install
|
|
21
|
+
|
|
22
|
+
### Script tag (recommended)
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<script
|
|
26
|
+
src="https://cdn.jsdelivr.net/npm/@kilnai/widget@latest/dist/widget.js"
|
|
27
|
+
data-gateway="wss://your-gateway.example.com"
|
|
28
|
+
data-app="your-app"
|
|
29
|
+
data-widget-id="your-widget-id"
|
|
30
|
+
async>
|
|
31
|
+
</script>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
That's it. The widget renders a floating chat button in the bottom-right corner.
|
|
35
|
+
|
|
36
|
+
### npm
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
bun add @kilnai/widget
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
```typescript
|
|
43
|
+
import { KilnWidget } from "@kilnai/widget";
|
|
44
|
+
|
|
45
|
+
const widget = new KilnWidget({
|
|
46
|
+
gateway: "wss://your-gateway.example.com",
|
|
47
|
+
app: "your-app",
|
|
48
|
+
widgetId: "your-widget-id",
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
widget.mount(document.body);
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Configuration
|
|
55
|
+
|
|
56
|
+
All options can be set via `data-*` attributes on the script tag or passed to the constructor:
|
|
57
|
+
|
|
58
|
+
| Attribute | Description | Default |
|
|
59
|
+
|-----------|-------------|---------|
|
|
60
|
+
| `data-gateway` | Gateway WebSocket URL | Required |
|
|
61
|
+
| `data-app` | Kiln app name | Required |
|
|
62
|
+
| `data-widget-id` | Widget/tenant ID | Required |
|
|
63
|
+
| `data-position` | `bottom-right` or `bottom-left` | `bottom-right` |
|
|
64
|
+
| `data-theme` | `light` or `dark` | `dark` |
|
|
65
|
+
| `data-greeting` | Welcome message (overrides tenant config) | From tenant |
|
|
66
|
+
| `data-placeholder` | Input placeholder text | `Type a message...` |
|
|
67
|
+
|
|
68
|
+
## Features
|
|
69
|
+
|
|
70
|
+
- **Shadow DOM** -- Styles are fully isolated from the host page
|
|
71
|
+
- **Auto-reconnect** -- Reconnects automatically on network interruptions
|
|
72
|
+
- **Welcome frame** -- Shows greeting message and FAQ suggestion chips from tenant config
|
|
73
|
+
- **Suggestion chips** -- AI-generated follow-up suggestions after each response
|
|
74
|
+
- **Multi-tenant** -- Resolves tenant config via `widgetId` for per-business customization
|
|
75
|
+
- **Zero dependencies** -- Single IIFE bundle, no React or framework required
|
|
76
|
+
- **Budget-aware** -- Shows friendly message when tenant token budget is exhausted
|
|
77
|
+
|
|
78
|
+
## How it works
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
Website (your-site.com)
|
|
82
|
+
│ <script> tag loads widget.js
|
|
83
|
+
│ Shadow DOM renders chat UI
|
|
84
|
+
│ WebSocket connects to gateway
|
|
85
|
+
▼
|
|
86
|
+
Kiln Gateway
|
|
87
|
+
│ Resolves tenant by widgetId
|
|
88
|
+
│ Injects tenant system prompt (name, services, FAQs)
|
|
89
|
+
│ Routes to Kiln app
|
|
90
|
+
▼
|
|
91
|
+
AI Agent responds with text + suggestion chips
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## Documentation
|
|
95
|
+
|
|
96
|
+
- [Widget Guide](https://github.com/sequelcore/kiln/blob/main/docs/guides/channels.md)
|
|
97
|
+
- [Multi-Tenant Guide](https://github.com/sequelcore/kiln/blob/main/docs/guides/multi-tenant.md)
|
|
98
|
+
- [Booking Assistant Example](https://github.com/sequelcore/kiln/tree/main/examples/booking-assistant) -- Working demo with widget
|
|
99
|
+
|
|
100
|
+
## License
|
|
101
|
+
|
|
102
|
+
[MIT](https://github.com/sequelcore/kiln/blob/main/LICENSE)
|