@nlux/core
v2.17.1
Published
nlux is JavaScript and React library for building conversational AI interfaces, with support for OpenAI, Hugging Face, and more.
Downloads
21,158
Maintainers
Keywords
Readme
NLUX JS 🌲✨💬
The Conversational AI UI Library For Any LLM
NLUX
(for Natural Language User Experience) is an open-source JavaScript library that makes it super simple to
integrate powerful large language models (LLMs) like ChatGPT into your web app or website. With just a few lines
of code, you can add conversational AI capabilities and interact with your favorite LLM.
Key Features 🌟
- Build AI Chat Interfaces In Minutes ― High quality conversational AI interfaces with just a few lines of code.
- LLM Adapters ― For
ChatGPT
/LangChain
🦜 LangServe /HuggingFace
🤗 Inference. - A flexible interface to Create Your Own Adapter for any LLM or API.
- Assistant and User Personas ― Customize the assistant and user personas with names, images, and more.
- Streaming LLM Output ― Stream the chat response to the UI as it's being generated.
- Customizable Theme - Easily customize the look and feel of the chat interface using CSS variables.
- Event Listeners - Listen to messages, errors, and other events to customize the UI and behaviour.
- Zero Dependency ― Lightweight codebase ― Core with zero dependency and no external UI libraries.
Docs & Examples 📖
- Developer portal ― docs.nlkit.com/nlux
- Examples and live code playgrounds ― docs.nlkit.com/nlux/examples
- Standard LLM adapters available
- How to create your own adapter for nlux
Vanilla JS 🟨 vs React JS ⚛️
This package @nlux/core
is the vanilla JS version of the library.
If you're looking for the React JS version, please check
the @nlux/react
package.
Get Started With NLUX JS
🚀
The example below demonstrates how to create an AI chat interface using NLUX JS
and LangChain, the open source
framework for building LLM backends. But you can use NLUX
with any LLM ― either
via the standard adapters provided, or
by creating your own adapter.
To get started with NLUX JS
and LangChain
, install the @nlux/core
and @nlux/langchain
packages:
npm install @nlux/core @nlux/langchain
Configure the LangChain LangServe adapter to connect to your API endpoint:
import {createAiChat} from '@nlux/core';
import {createChatAdapter} from '@nlux/langchain';
const langChainAdapter = createChatAdapter().withUrl('https://<Your LangServe Runnable URL>');
Then render the AiChat
component into your web page:
const aiChat = createAiChat()
.withAdapter(langChainAdapter)
.withConversationOptions({
historyPayloadSize: 'max'
})
.withComposerOptions({
placeholder: 'How can I help you today?'
})
aiChat.mount(document.getElementById('root'));
You should also include the NLUX theme CSS file in your HTML page.
And The Result Is ✨
An AI chatbot, powered by LangChain, that can understand and respond to user messages:
Theme File and CSS 🎨
You should include a theme CSS file into your HTML page.
You can download and host the Nova Theme
CSS file
from @nlux/themes
package.