ngx-open-web-ui-chat is an open-source Angular component that lets you add AI chat to any application in minutes. The only requirement is a running Open WebUI instance — locally or on a server.
Installation is straightforward. In your Angular project directory: npm install ngx-open-web-ui-chat
Then import the module into your AppModule (or standalone component): import { NgxOpenWebUiChatModule } from 'ngx-open-web-ui-chat';
Add the component to your template: <ngx-open-web-ui-chat apiUrl="http://localhost:3000" model="llama3" placeholder="Ask a question..."></ngx-open-web-ui-chat>
The apiUrl parameter points to your Open WebUI instance. The model parameter is the name of the model loaded in Open WebUI — you can use llama3, mistral, qwen2, or any other Ollama model.
The component handles conversation history within a session, markdown rendering in model responses, and a responsive mobile layout. It is easy to customise via CSS custom properties.
The project is open-source and available on npm. More configuration examples are in the README on GitHub.
Have questions or a feature idea? Open an issue on GitHub or email development@mi-code.pl.
Frequently asked questions
- What do I need before using ngx-open-web-ui-chat?
- The only requirement is a running Open WebUI instance, either locally or on a server. The component connects to it to power the AI chat.
- How do I install and register the component in an Angular project?
- Run npm install ngx-open-web-ui-chat in your project directory, then import NgxOpenWebUiChatModule into your AppModule or standalone component. After that you just add the <ngx-open-web-ui-chat> tag to your template.
- What are the apiUrl and model parameters for?
- The apiUrl parameter points to your Open WebUI instance, for example http://localhost:3000. The model parameter names the model loaded in Open WebUI, such as llama3, mistral, qwen2, or any other Ollama model.
- What features does the chat component offer?
- The component handles conversation history within a session, markdown rendering in model responses, and a responsive layout on mobile devices.
- How can I customise the appearance of the chat component?
- The component is easy to customise via CSS custom properties, so you can match its look to your own application.