https://github.com/taylorwilsdon/open-webui-embeddable-widget
Lightweight, simple embeddable widget for Open WebUI allowing you to easily implement chatbot capabilities and RAG workflows into your existing tools, apps and webpages!
https://github.com/taylorwilsdon/open-webui-embeddable-widget
ai artifical-intelligence llm open-webui openwebui tools
Last synced: 5 months ago
JSON representation
Lightweight, simple embeddable widget for Open WebUI allowing you to easily implement chatbot capabilities and RAG workflows into your existing tools, apps and webpages!
- Host: GitHub
- URL: https://github.com/taylorwilsdon/open-webui-embeddable-widget
- Owner: taylorwilsdon
- Created: 2025-05-28T18:03:11.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-05T01:29:32.000Z (about 1 year ago)
- Last Synced: 2025-06-05T05:19:13.440Z (about 1 year ago)
- Topics: ai, artifical-intelligence, llm, open-webui, openwebui, tools
- Language: Svelte
- Homepage:
- Size: 57.6 KB
- Stars: 29
- Watchers: 0
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Open WebUI Chat Widget
A beautifully simple, embeddable chat widget for Open WebUI instances. Add AI-powered chat to any website with just a few lines of code.
This tool is meant to be extremely simple and is intended for trusted internal user traffic only as it relies on shared API keys or user sessions to call the Open WebUI backend. It is not meant for public web traffic without additional
authentication in place.
**See it in action:**
## ✨ Features
- **Dead Simple Integration** - Just 3 lines of HTML to add chat to your site
- **Clean, Modern UI** - Professional chat interface that looks great out of the box
- **Zero Dependencies** - Lightweight, self-contained widget (~15KB)
- **Fully Customizable** - Configure your API endpoint, model, and styling
- **Responsive Design** - Works perfectly on desktop and mobile
## 🚀 Quick Start
### 1. Get Your API Key
First, you'll need an API key from your Open WebUI instance:
1. Log into your Open WebUI
2. Go to **User Settings** → **Account** → **API Keys**
3. Create a new API key and copy it
### 2. Add the Widget to Your Site
Add these three lines to your HTML:
```html
import ChatWidget, { mount } from 'https://your-cdn.com/ChatWidget.js';
mount(ChatWidget, {
target: document.getElementById('chat-widget')
});
```
### 3. Configure with URL Parameters
Add your API key to the page URL:
```
https://yoursite.com/page.html?api_key=YOUR_API_KEY_HERE
```
That's it! Your chat widget is now live. 🎉
## 📋 Configuration Options
Configure the widget by adding parameters to your page URL:
| Parameter | Description | Example |
|-----------|-------------|---------|
| `api_key` | Your Open WebUI API key (required) | `?api_key=sk-abc123...` |
| `model` | AI model to use (optional) | `?api_key=...&model=gpt-4` |
| `endpoint` | Custom API endpoint (optional) | `?api_key=...&endpoint=https://api.example.com/chat` |
### Full Example
```
https://yoursite.com/chat.html?api_key=sk-abc123&model=gpt-4&endpoint=https://my-openwebui.com/api/chat/completions
```
## 🛠️ Self-Hosting
Want to host the widget files yourself? It's easy:
1. **Download the widget files:**
- `ChatWidget.js`
- `owui-widget.css`
2. **Host them on your server**
3. **Update the paths in your HTML:**
```html
import ChatWidget, { mount } from '/path/to/ChatWidget.js';
// ... rest of the code
```
## 💡 Usage Examples
### Basic Chat Page
Create a simple `chat.html` file:
```html
Chat with AI
#chat-widget {
width: 400px;
height: 600px;
margin: 50px auto;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
import ChatWidget, { mount } from './ChatWidget.js';
mount(ChatWidget, {
target: document.getElementById('chat-widget')
});
```
### Embedded in Existing Site
Add a chat widget to your existing website:
```html
import ChatWidget, { mount } from 'https://cdn.example.com/ChatWidget.js';
mount(ChatWidget, {
target: document.getElementById('customer-support-chat')
});
```
## 🎨 Styling
The widget automatically adapts to its container size. Simply set the width and height on your container div:
```html
```
## 🔒 Security Notes
- **Never hardcode your API key** in your HTML
- Use URL parameters for development/testing only
- For production, consider implementing a backend proxy to keep your API key secure
## 📦 What's Included
- `ChatWidget.js` - The main widget component
- `owui-widget.css` - Styling for the widget
- Clean, modern UI with smooth animations
- Auto-scrolling message container
- Loading indicators
- Responsive textarea that grows with content
## 🤝 Support
Having issues? The widget is designed to be as simple as possible:
1. Make sure your API key is valid
2. Check that your Open WebUI instance is accessible
3. Verify the endpoint URL is correct (defaults to `/api/chat/completions`)
4. Open your browser's console to see any error messages
## 🎯 Perfect For
- Adding AI chat to documentation sites
- Customer support widgets
- Interactive demos
- Educational tools
- Anywhere that could benefit from AI assistance
---
**That's all there is to it!** This widget is designed to make adding AI chat to your website as simple as possible. No complex setup, no heavy dependencies, just clean, functional chat in minutes.