ngx-open-web-ui-chat to otwartoźródłowy komponent Angular, który pozwala dodać czat AI do dowolnej aplikacji w kilkanaście minut. Jedynym wymaganiem jest działająca instancja Open WebUI — lokalnie lub na serwerze.
Instalacja jest prosta. W terminalu w katalogu projektu Angular: npm install ngx-open-web-ui-chat
Następnie dodaj moduł do swojego AppModule (lub standalone component): import { NgxOpenWebUiChatModule } from 'ngx-open-web-ui-chat';
W szablonie HTML dodaj komponent: <ngx-open-web-ui-chat apiUrl="http://localhost:3000" model="llama3" placeholder="Zadaj pytanie..."></ngx-open-web-ui-chat>
Parametr apiUrl wskazuje na adres Twojej instancji Open WebUI. Parametr model to nazwa modelu załadowanego w Open WebUI — możesz użyć llama3, mistral, qwen2 lub dowolnego innego modelu Ollama.
Komponent obsługuje historię rozmowy w ramach sesji, markdown w odpowiedziach modelu oraz responsywny layout na urządzeniach mobilnych. Można go łatwo ostylować przez CSS custom properties.
Projekt jest open-source i dostępny na npm. Więcej przykładów konfiguracji znajdziesz w README na GitHubie.
Masz pytania lub pomysł na funkcję? Otwórz issue na GitHubie lub napisz na development@mi-code.pl.
Najczęstsze pytania
- Co jest potrzebne, aby użyć komponentu ngx-open-web-ui-chat?
- Jedynym wymaganiem jest działająca instancja Open WebUI — uruchomiona lokalnie lub na serwerze. Komponent łączy się z nią, aby obsługiwać czat AI.
- Jak zainstalować i podłączyć komponent w projekcie Angular?
- W katalogu projektu wykonaj polecenie npm install ngx-open-web-ui-chat, a następnie zaimportuj NgxOpenWebUiChatModule do swojego AppModule lub komponentu standalone. Potem wystarczy dodać znacznik <ngx-open-web-ui-chat> w szablonie HTML.
- Do czego służą parametry apiUrl i model?
- Parametr apiUrl wskazuje adres Twojej instancji Open WebUI, na przykład http://localhost:3000. Parametr model określa nazwę modelu załadowanego w Open WebUI, takiego jak llama3, mistral, qwen2 lub dowolny inny model Ollama.
- Jakie funkcje oferuje komponent czatu?
- Komponent obsługuje historię rozmowy w ramach sesji, renderowanie markdown w odpowiedziach modelu oraz responsywny layout na urządzeniach mobilnych.
- Jak dostosować wygląd komponentu czatu?
- Komponent można łatwo ostylować za pomocą CSS custom properties, co pozwala dopasować jego wygląd do własnej aplikacji.