Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rumenpetrov/ai-chat-widget
Configurable AI chat widget built as native web component
https://github.com/rumenpetrov/ai-chat-widget
ai assistant chat web-component
Last synced: 3 months ago
JSON representation
Configurable AI chat widget built as native web component
- Host: GitHub
- URL: https://github.com/rumenpetrov/ai-chat-widget
- Owner: rumenpetrov
- License: mit
- Created: 2024-05-30T07:16:39.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-06-17T07:06:42.000Z (7 months ago)
- Last Synced: 2024-10-02T06:44:13.549Z (3 months ago)
- Topics: ai, assistant, chat, web-component
- Language: TypeScript
- Homepage:
- Size: 8.74 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ✨ AI chat widget
> ⚠️ **Warning** This is a learning project. It's not meant to be used in production environments.
🚧 **Work in progress** 🚧 This is a native [web component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) which provides **basic** AI chat functionality (single question, no history).
| | |
|-|-|
|  | 
|  |  |
[Demo video](preview/demo.mp4)
[See more](preview/)
### 📋 Features
* [x] Integrate it in your website - Use it in your vanilla website or with a framework which [supports](https://custom-elements-everywhere.com/) web components
* [x] Provider selection - You could use [Open AI API](https://platform.openai.com/) or another local LLM server like [LM Studio](https://lmstudio.ai/) or [LocalAI](https://localai.io/)
* [x] Theming - Could be customized and adapted to light/dark user preferences
* [x] Stream responses - The response is shown to you at same time it is generated
* [x] Syntax highlight for code snippets
### 🔒 Privacy
* 🟢 **Database** - The project is using [IndexDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API), under the hood. This is native, local database which modern browsers provide. Meaning any configuration you provide is stored locally on your machine,accessible only to you.
* **AI prompts** - Every question you ask has to be processed somewhere which leaves it to the AI provider to dictate the privacy level.
* 🟢 Local provider - Everything is stored locally
* 🟡 Open AI - Any prompts are send to Open AI's API for processing
### 🚀 Get started
1. **Add the module to your website**
##### With bundler
```sh
$ npm i @rumenpetrov/ai-chat-widget
```
```js
// index.js
import '@rumenpetrov/ai-chat-widget'
```
##### Use CDN for buildless approach
```html
```
2. **Get yourself a theme** - You could use [Material Theme Builder on the Web](https://material-foundation.github.io/material-theme-builder/) to generate all the CSS custom properties (design tokens) which the UI library we are using expects to function correctly and add them to you styles.
```html
...
:root {
color-scheme: light dark;
font-family: system-ui, sans-serif;
color: #213547;
background-color: #ffffff;
/* All generated tokens from the light theme you got form Material Theme Builder */
--md-sys-color-primary: rgb(65 95 145);
--md-sys-color-surface-tint: rgb(65 95 145);
...
}
@media (prefers-color-scheme: dark) {
:root {
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
/* All generated tokens from the dark theme you got form Material Theme Builder */
--md-sys-color-primary: rgb(170 199 255);
--md-sys-color-surface-tint: rgb(170 199 255);
...
}
}
}
...
...
```
3. **Use the web component somewhere on your page**
```html
```
4. **Make sure you select and configure your AI provider of choice** - You could use the settings modal for this.
### 🖌️ Styling
* The UI is based on [Material web](https://material-web.dev/) components which means you could use [CSS custom properties](https://material-web.dev/theming/material-theming/) to overwrite any of the tokens their components expose.
* There are [part](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) attributes spread around the UI which could be used for styling as well
### Technical stack
* [Vite](https://vitejs.dev/)
* [Lit](https://lit.dev/)
* [Material web](https://material-web.dev/)
* [IndexDB wrapper](https://github.com/jakearchibald/idb)
* [Marked](https://marked.js.org/)
* [highlight.js](https://highlightjs.org/)