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:
owui_embedded_widget_demo.mov
- 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
First, you'll need an API key from your Open WebUI instance:
- Log into your Open WebUI
- Go to User Settings → Account → API Keys
- Create a new API key and copy it
Add these three lines to your HTML:
<link rel="stylesheet" href="https://your-cdn.com/owui-widget.css">
<div id="chat-widget"></div>
<script type="module">
import ChatWidget, { mount } from 'https://your-cdn.com/ChatWidget.js';
mount(ChatWidget, {
target: document.getElementById('chat-widget')
});
</script>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. 🎉
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 |
https://yoursite.com/chat.html?api_key=sk-abc123&model=gpt-4&endpoint=https://my-openwebui.com/api/chat/completions
Want to host the widget files yourself? It's easy:
-
Download the widget files:
ChatWidget.jsowui-widget.css
-
Host them on your server
-
Update the paths in your HTML:
<link rel="stylesheet" href="/path/to/owui-widget.css"> <script type="module"> import ChatWidget, { mount } from '/path/to/ChatWidget.js'; // ... rest of the code </script>
Create a simple chat.html file:
<!DOCTYPE html>
<html>
<head>
<title>Chat with AI</title>
<link rel="stylesheet" href="owui-widget.css">
<style>
#chat-widget {
width: 400px;
height: 600px;
margin: 50px auto;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div id="chat-widget"></div>
<script type="module">
import ChatWidget, { mount } from './ChatWidget.js';
mount(ChatWidget, {
target: document.getElementById('chat-widget')
});
</script>
</body>
</html>Add a chat widget to your existing website:
<!-- Add this where you want the chat to appear -->
<div id="customer-support-chat" style="width: 350px; height: 500px;"></div>
<!-- Add this before closing </body> -->
<script type="module">
import ChatWidget, { mount } from 'https://cdn.example.com/ChatWidget.js';
mount(ChatWidget, {
target: document.getElementById('customer-support-chat')
});
</script>The widget automatically adapts to its container size. Simply set the width and height on your container div:
<div id="chat-widget" style="width: 100%; height: 400px;"></div>- 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
ChatWidget.js- The main widget componentowui-widget.css- Styling for the widget- Clean, modern UI with smooth animations
- Auto-scrolling message container
- Loading indicators
- Responsive textarea that grows with content
Having issues? The widget is designed to be as simple as possible:
- Make sure your API key is valid
- Check that your Open WebUI instance is accessible
- Verify the endpoint URL is correct (defaults to
/api/chat/completions) - Open your browser's console to see any error messages
- 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.