@nlux/react v2.17.1
NLUX React 🌲✨💬
The Conversational AI UI Library For Any LLM
NLUX
(for Natural Language User Experience) is an open-source React and 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.
- React Components & Hooks ―
<AiChat />
for UI anduseChatAdapter
hook for easy integration. - LLM Adapters ― For
ChatGPT
/LangChain
🦜 LangServe /HuggingFace
🤗 Inference. - A flexible interface to Create Your Own Adapter for any LLM or API.
- Next.js & Vercel AI ― Out-of-the-box support, demos, and examples for Next.js and Vercel AI.
- React Server Components (RSC) and Generative UI 🔥 ― With Next.js or any RSC compatible framework.
- 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
Get Started With NLUX React
🚀
The example below demonstrates how to create an AI chat interface using NLUX React
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 React
and LangChain, install the @nlux/react
and @nlux/langchain-react
packages:
npm install @nlux/react @nlux/langchain-react
Then include <AiChat />
in your React app to get started.
Use the useChatAdapter
hook to configure an adapter for your LLM.
import {AiChat} from '@nlux/react';
import {useChatAdapter} from '@nlux/langchain-react';
const App = () => {
const gptAdapter = useChatAdapter({
url: 'https://<Your LangServe Runnable URL>'
});
return (
<AiChat
adapter={gptAdapter}
composerOptions={{
placeholder: 'How can I help you today?'
}}
conversationOptions={{
historyPayloadSize: 'max'
}}
/>
);
}
You should also include the NLUX theme CSS file in your HTML page or import it in your React app.
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.
The recommended way for React developers is to install @nlux/themes
npm install @nlux/themes
Then import the theme CSS file into your app or component as follows:
import '@nlux/themes/nova.css';
This requires that your bundler is configured to load CSS files.
6 months ago
6 months ago
6 months ago
7 months ago
6 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
6 months ago
7 months ago
6 months ago
6 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
6 months ago
7 months ago
4 months ago
6 months ago
4 months ago
6 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
6 months ago
7 months ago
7 months ago
7 months ago
6 months ago
7 months ago
7 months ago
7 months ago
6 months ago
6 months ago
5 months ago
6 months ago
5 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago