ngx-open-web-ui-chat — это Angular-компонент с открытым исходным кодом, который позволяет добавить AI-чат в любое приложение за несколько минут. Единственное требование — работающий экземпляр Open WebUI, локально или на сервере.
Установка проста. В директории вашего Angular-проекта выполните: npm install ngx-open-web-ui-chat
Затем добавьте модуль в AppModule (или standalone-компонент): import { NgxOpenWebUiChatModule } from 'ngx-open-web-ui-chat';
Добавьте компонент в шаблон HTML: <ngx-open-web-ui-chat apiUrl="http://localhost:3000" model="llama3" placeholder="Задайте вопрос..."></ngx-open-web-ui-chat>
Параметр apiUrl указывает на адрес вашего экземпляра Open WebUI. Параметр model — название модели, загруженной в Open WebUI: llama3, mistral, qwen2 или любая другая модель Ollama.
Компонент поддерживает историю разговора в рамках сессии, markdown в ответах модели и адаптивный мобильный макет. Стилизация возможна через CSS custom properties.
Проект имеет открытый исходный код и доступен на npm. Больше примеров конфигурации — в README на GitHub.
Есть вопросы или идеи для новых функций? Откройте issue на GitHub или напишите на development@mi-code.pl.
Частые вопросы
- Что нужно, чтобы использовать компонент ngx-open-web-ui-chat?
- Единственное требование — работающий экземпляр Open WebUI, запущенный локально или на сервере. Компонент подключается к нему для работы AI-чата.
- Как установить и подключить компонент в проекте Angular?
- В директории проекта выполните npm install ngx-open-web-ui-chat, затем добавьте NgxOpenWebUiChatModule в AppModule или standalone-компонент. После этого достаточно вставить тег <ngx-open-web-ui-chat> в шаблон HTML.
- Для чего нужны параметры apiUrl и model?
- Параметр apiUrl указывает на адрес вашего экземпляра Open WebUI, например http://localhost:3000. Параметр model задаёт название модели, загруженной в Open WebUI: llama3, mistral, qwen2 или любую другую модель Ollama.
- Какие возможности предоставляет компонент чата?
- Компонент поддерживает историю разговора в рамках сессии, отображение markdown в ответах модели и адаптивный макет на мобильных устройствах.
- Как настроить внешний вид компонента чата?
- Внешний вид компонента легко настраивается через CSS custom properties, что позволяет подогнать его под ваше приложение.