@nlux/nlux

NLUX JS 💬

An opensource Javascript library to build conversational AI interfaces.

NLUX (for Natural Language User Experience) is a Javascript library that provides an easy way to embed the power of LLMs (large language models) into your app or website.

NLUX provides an easy-to-use API for developers to integrate LLMs into their apps, and an intuitive interface for users to interact with AI chatbots.

This NPM package provides a Vanilla JS implementation of the library.
If you're looking for React JS components, check out the @nlux/nlux-react package.

Features 🌟

• Build Custom ChatGPT UI In Minutes - Build your own ChatGPT bot in minutes, with just a few lines of code.
• Simple Setup - Just include the @nlux/nlux package and initialize it with your LLM adapter API key.
• Flexible LLM Adapters - Provided adapter for ChatGPT. More coming soon.
• Framework Support - Vanilla JS and React JS implementations available. More coming soon.
• Mobile Friendly - Works on mobile devices and desktops.
• Zero Dependencies - Lightweight codebase with zero-dependencies - except for LLM client libraries.
• Fast & Scalable - Built for high performance on large traffic sites and web apps.

NLUX JS and ChatGPT 🚀

Install and import dependencies:

npm install @nlux/nlux @nlux/openai
// or
yarn add @nlux/nlux @nlux/openai

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

Configure the OpenAI adapter with your API key:

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

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'));

And the result is:

NLUX React 👍

If you're building a React JS application, you can use the @nlux/nlux-react instead. Then NPM package includes the <ConvoPit /> component and the React JS implementation of the NLUX API.

import {ConvoPit} from '@nlux/nlux-react';
import {useAdapter} from '@nlux/chatgpt-adapter';

const MyChatComp = () => {
    const gpt4Adapter = useAdapter('openai/gpt4', {apiKey});
    return (
        <ConvoPit
            adapter={gpt4Adapter}
            promptBoxOptions={{
                placeholder: 'Ask me anything!',
            }}
        />
    );
}

Please visit the NLUX React NPM package for more information.

More 😇

More Adapters

• More adapters comings soon (HuggingFace, Google Vertex)
• Build your own adapter for NLUX - Guide to building your own adapter.
• Vote for what adapter we should build next here.

More Features

• Instruct ChatGPT to "act as" - More here.
• Build your own theme with @nlux/nlux-themes - More here.
• Vote for what feature we should build next here.

More Frameworks

• We're working on an NLUX Preact implementation - More here.
• Vote for what framework we should support next here.

Documentation 📃

For more information, please see the NLUX documentation.

About The Developer 👨‍💻

NLUX is an open-source project that's being led by Salmen Hichri, a senior front-end engineer with a vast experience building user interfaces and developer tools at Amazon, Goldman Sachs, and more.