{"id":39885531,"url":"https://github.com/taylorwilsdon/open-webui-embeddable-widget","last_synced_at":"2026-01-18T14:36:46.381Z","repository":{"id":296048832,"uuid":"992162316","full_name":"taylorwilsdon/open-webui-embeddable-widget","owner":"taylorwilsdon","description":"Lightweight, simple embeddable widget for Open WebUI allowing you to easily implement chatbot capabilities and RAG workflows into your existing tools, apps and webpages!","archived":false,"fork":false,"pushed_at":"2025-06-05T01:29:32.000Z","size":59,"stargazers_count":29,"open_issues_count":0,"forks_count":5,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-05T05:19:13.440Z","etag":null,"topics":["ai","artifical-intelligence","llm","open-webui","openwebui","tools"],"latest_commit_sha":null,"homepage":"","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/taylorwilsdon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-28T18:03:11.000Z","updated_at":"2025-06-05T01:29:35.000Z","dependencies_parsed_at":"2025-06-05T03:52:41.855Z","dependency_job_id":"ead21d91-155b-44b4-9421-008091658f10","html_url":"https://github.com/taylorwilsdon/open-webui-embeddable-widget","commit_stats":null,"previous_names":["taylorwilsdon/open-webui-embeddable-widget"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/taylorwilsdon/open-webui-embeddable-widget","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taylorwilsdon%2Fopen-webui-embeddable-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taylorwilsdon%2Fopen-webui-embeddable-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taylorwilsdon%2Fopen-webui-embeddable-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taylorwilsdon%2Fopen-webui-embeddable-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taylorwilsdon","download_url":"https://codeload.github.com/taylorwilsdon/open-webui-embeddable-widget/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taylorwilsdon%2Fopen-webui-embeddable-widget/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28537816,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T13:04:05.990Z","status":"ssl_error","status_checked_at":"2026-01-18T13:01:44.092Z","response_time":98,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","artifical-intelligence","llm","open-webui","openwebui","tools"],"created_at":"2026-01-18T14:36:46.302Z","updated_at":"2026-01-18T14:36:46.368Z","avatar_url":"https://github.com/taylorwilsdon.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Open WebUI Chat Widget\n\nA beautifully simple, embeddable chat widget for Open WebUI instances. Add AI-powered chat to any website with just a few lines of code. \n\nThis 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\nauthentication in place.\n\n**See it in action:**\n\n\u003cdiv align=\"center\"\u003e\n  \n  \u003cvideo width=\"556\" src=\"https://github.com/user-attachments/assets/2b0c7a36-3d89-4573-ac5f-c0429f3afc6e\"\u003e\u003c/video\u003e\n\u003c/div\u003e\n\n## ✨ Features\n\n- **Dead Simple Integration** - Just 3 lines of HTML to add chat to your site\n- **Clean, Modern UI** - Professional chat interface that looks great out of the box\n- **Zero Dependencies** - Lightweight, self-contained widget (~15KB)\n- **Fully Customizable** - Configure your API endpoint, model, and styling\n- **Responsive Design** - Works perfectly on desktop and mobile\n\n## 🚀 Quick Start\n\n### 1. Get Your API Key\n\nFirst, you'll need an API key from your Open WebUI instance:\n\n1. Log into your Open WebUI\n2. Go to **User Settings** → **Account** → **API Keys**\n3. Create a new API key and copy it\n\n\u003cimg width=\"883\" alt=\"image\" src=\"https://github.com/user-attachments/assets/6335921a-802c-4888-9ea6-cb0b57a0332b\" /\u003e\n\n### 2. Add the Widget to Your Site\n\nAdd these three lines to your HTML:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://your-cdn.com/owui-widget.css\"\u003e\n\u003cdiv id=\"chat-widget\"\u003e\u003c/div\u003e\n\u003cscript type=\"module\"\u003e\n  import ChatWidget, { mount } from 'https://your-cdn.com/ChatWidget.js';\n  mount(ChatWidget, {\n    target: document.getElementById('chat-widget')\n  });\n\u003c/script\u003e\n```\n\n### 3. Configure with URL Parameters\n\nAdd your API key to the page URL:\n\n```\nhttps://yoursite.com/page.html?api_key=YOUR_API_KEY_HERE\n```\n\nThat's it! Your chat widget is now live. 🎉\n\n## 📋 Configuration Options\n\nConfigure the widget by adding parameters to your page URL:\n\n| Parameter | Description | Example |\n|-----------|-------------|---------|\n| `api_key` | Your Open WebUI API key (required) | `?api_key=sk-abc123...` |\n| `model` | AI model to use (optional) | `?api_key=...\u0026model=gpt-4` |\n| `endpoint` | Custom API endpoint (optional) | `?api_key=...\u0026endpoint=https://api.example.com/chat` |\n\n### Full Example\n\n```\nhttps://yoursite.com/chat.html?api_key=sk-abc123\u0026model=gpt-4\u0026endpoint=https://my-openwebui.com/api/chat/completions\n```\n\n## 🛠️ Self-Hosting\n\nWant to host the widget files yourself? It's easy:\n\n1. **Download the widget files:**\n   - `ChatWidget.js`\n   - `owui-widget.css`\n\n2. **Host them on your server**\n\n3. **Update the paths in your HTML:**\n   ```html\n   \u003clink rel=\"stylesheet\" href=\"/path/to/owui-widget.css\"\u003e\n   \u003cscript type=\"module\"\u003e\n     import ChatWidget, { mount } from '/path/to/ChatWidget.js';\n     // ... rest of the code\n   \u003c/script\u003e\n   ```\n\n## 💡 Usage Examples\n\n### Basic Chat Page\n\nCreate a simple `chat.html` file:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003eChat with AI\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"owui-widget.css\"\u003e\n    \u003cstyle\u003e\n        #chat-widget {\n            width: 400px;\n            height: 600px;\n            margin: 50px auto;\n            box-shadow: 0 0 20px rgba(0,0,0,0.1);\n        }\n    \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv id=\"chat-widget\"\u003e\u003c/div\u003e\n    \u003cscript type=\"module\"\u003e\n        import ChatWidget, { mount } from './ChatWidget.js';\n        mount(ChatWidget, {\n            target: document.getElementById('chat-widget')\n        });\n    \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Embedded in Existing Site\n\nAdd a chat widget to your existing website:\n\n```html\n\u003c!-- Add this where you want the chat to appear --\u003e\n\u003cdiv id=\"customer-support-chat\" style=\"width: 350px; height: 500px;\"\u003e\u003c/div\u003e\n\n\u003c!-- Add this before closing \u003c/body\u003e --\u003e\n\u003cscript type=\"module\"\u003e\n    import ChatWidget, { mount } from 'https://cdn.example.com/ChatWidget.js';\n    mount(ChatWidget, {\n        target: document.getElementById('customer-support-chat')\n    });\n\u003c/script\u003e\n```\n\n## 🎨 Styling\n\nThe widget automatically adapts to its container size. Simply set the width and height on your container div:\n\n```html\n\u003cdiv id=\"chat-widget\" style=\"width: 100%; height: 400px;\"\u003e\u003c/div\u003e\n```\n\n## 🔒 Security Notes\n\n- **Never hardcode your API key** in your HTML\n- Use URL parameters for development/testing only\n- For production, consider implementing a backend proxy to keep your API key secure\n\n## 📦 What's Included\n\n- `ChatWidget.js` - The main widget component\n- `owui-widget.css` - Styling for the widget\n- Clean, modern UI with smooth animations\n- Auto-scrolling message container\n- Loading indicators\n- Responsive textarea that grows with content\n\n## 🤝 Support\n\nHaving issues? The widget is designed to be as simple as possible:\n\n1. Make sure your API key is valid\n2. Check that your Open WebUI instance is accessible\n3. Verify the endpoint URL is correct (defaults to `/api/chat/completions`)\n4. Open your browser's console to see any error messages\n\n## 🎯 Perfect For\n\n- Adding AI chat to documentation sites\n- Customer support widgets\n- Interactive demos\n- Educational tools\n- Anywhere that could benefit from AI assistance\n\n---\n\n**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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaylorwilsdon%2Fopen-webui-embeddable-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaylorwilsdon%2Fopen-webui-embeddable-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaylorwilsdon%2Fopen-webui-embeddable-widget/lists"}