@nlux/nlux

NLUX JS

The JS / React Library For Building ChatGPT Conversational UI ✨💬

NLUX (for Natural Language User Experience) is an open-source Javascript library that makes it 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 favourite LLM.

Key Features 🌟

• Build Custom ChatGPT Interfaces In Minutes - Easily build chatbot and conversational interfaces with just a few lines of code.
• Flexible LLM Adapters - Provided adapter for ChatGPT. More coming soon.
• Zero Dependencies - Lightweight codebase, with zero-dependencies except for LLM front-end libraries.
• ChatGPT System Messages - Instruct ChatGPT to "act as" a specific persona, give it more context, and get more personalized responses to all your prompts.
• Streaming Responses - The response will be streamed to the UI for a more natural conversation flow.

Vanilla JS 🟨 vs React JS ⚛️

This package @nlux/nlux is the Vanilla JS version of NLUX. If you're looking for the React JS version, please check out the @nlux/nlux-react package.

Get Started With NLUX and ChatGPT 🚀

To get started with NLUX JS and ChatGPT, install the @nlux/nlux and @nlux/openai packages:

npm install @nlux/nlux @nlux/openai

Configure the OpenAI adapter with your API key:
(You can get an API key from your OpenAI dashboard)

import {createNlux} from '@nlux/nlux';
import {createAdapter} from '@nlux/openai';

const gpt4Adapter = createAdapter('openai/gpt4').withApiKey('YOUR_OPEN_AI_API_KEY');

Then render the Nlux UI component Convo Pit into your web page:

const convoPit = createConvoPit()
    .withAdapter(gpt4Adapter)
    .withPromptBoxOptions({
        placeholder: 'Ask me anything!',
    });

convoPit.mount(document.getElementById('chatroom-div'));

You should also include the NLUX theme CSS file in your HTML page.

Theme File and CSS 🎨

You should include a theme CSS file into your HTML page.
You can download and host the Kensington Theme CSS file from @nlux/themes or use the CDN hosted version from below:

<link rel="stylesheet" href="https://themes.nlux.ai/v0.2.0/kensington.css"/>

This CDN is provided for demo purposes only and it's not scalable. Please download and host the theme files on your own for production use.