NLUX Documentation

repository·latest·Indexed 23 days ago

https://github.com/nlkitai/nlux

NLUX is an open-source JavaScript and React library for building conversational AI interfaces. It provides ready-to-use React components and Vanilla JS adapters to integrate Large Language Models (LLMs) such as OpenAI, LangChain, and Hugging Face into web applications. The library supports features like text streaming, Generative UI via the Vercel AI SDK, and a dedicated CLI for scaffolding Next.js projects.

Tokens
82.5K
Snippets
268
Records
466
Agent score
74%

What's inside NLUX

  1. What is NLUX?

    latest

    NLUX is an open-source JavaScript library designed for creating elegant and performant conversational user interfaces. It provides both a vanilla JavaScript API and React components/hooks to integrate chatbot capabilities into web applications.

    Key capabilities include:

    • Connecting to various AI backends (e.g., ChatGPT).
    • Building custom adapters for proprietary AI services.
    • Customizing the UI.
    • Adding chat personas.
    • Loading conversation history.
  2. Overview of NLUX JS features

    latest

    NLUX is a lightweight, zero-dependency JavaScript library for integrating LLMs into web applications.

    Core Capabilities:

    • LLM Adapters: Built-in support for ChatGPT, LangChain/LangServe, and HuggingFace Inference, with a flexible interface to create custom adapters.
    • Persona Customization: Define assistant and user personas with names and images.
    • Streaming: Supports streaming LLM output to the UI in real-time.
    • Theming: Highly customizable via CSS variables.
    • Extensibility: Event listeners for messages, errors, and other lifecycle events.
  3. Overview of NLUX React features

    latest

    NLUX (Natural Language User Experience) is an open-source library for integrating LLMs into web applications.

    Key Capabilities:

    • Ready-to-use UI: High-quality conversational interfaces via <AiChat />.
    • Extensible Adapters: Built-in support for ChatGPT, LangChain/LangServe, and HuggingFace, with a flexible interface to create custom adapters.
    • Advanced UI Features: Streaming LLM output, Assistant and User Personas (names, images), and Event Listeners for messages and errors.
    • Modern Framework Support: Out-of-the-box support for Next.js, Vercel AI, and React Server Components (RSC) with Generative UI.
    • Customization: Themeable via CSS variables and lightweight with zero external UI dependencies.
  4. Overview of NLUX Key Features

    latest

    NLUX (Natural Language User Experience) is an open-source library designed to integrate LLMs into web applications. Key capabilities include:

    • React Integration: Provides the <AiChat /> component for UI and the useChatAdapter hook for logic.
    • LLM Adapters: Built-in support for ChatGPT, LangChain (via LangServe), and HuggingFace (via Inference).
    • Customization: Support for Assistant and User personas (names, images), customizable themes via CSS variables, and event listeners for messages and errors.
    • Streaming: Native support for streaming LLM outputs to the UI.
    • Lightweight: Zero dependencies (excluding the LLM front-end libraries themselves).
  5. Overview of NLUX features

    latest

    NLUX (Natural Language User Experience) is an open-source JavaScript library designed to integrate Large Language Models (LLMs) into web applications.

    Key capabilities include:

    • Rapid UI Construction: Build high-quality conversational AI interfaces quickly.
    • LLM Adapters: Built-in support for ChatGPT, LangChain / LangServe, and HuggingFace Inference.
    • Streaming Support: Stream LLM outputs directly to the UI as they are generated.
    • Customization: Customize assistant/user personas (names, images), themes (via CSS variables), and behavior (via event listeners).
    • Extensibility: A flexible interface to create custom adapters for any LLM or API.
    • Lightweight: Zero dependencies except for necessary LLM front-end libraries.
  6. Key Features of NLUX

    latest

    NLUX (Natural Language User Experience) is an open-source library designed to simplify LLM integration into web applications. Key capabilities include:

    • Rapid UI Development: Build high-quality conversational AI interfaces using the <AiChat /> component.
    • React Integration: Use React components and the useChatAdapter hook.
    • Extensible Adapters: Built-in support for ChatGPT, LangChain / LangServe, and HuggingFace Inference, with a flexible interface to create custom adapters.
    • Streaming Support: Stream LLM outputs directly to the UI as they are generated.
    • Customization: Customize assistant/user personas (names, images), themes (via CSS variables), and behavior (via event listeners).
    • Lightweight: Zero dependencies (except for necessary LLM front-end libraries).
  7. Explore NLUX examples and demo projects

    latest

    The examples directory provides several categories of projects to help you understand how to integrate NLUX into different environments:

    • framework-starters: These are the templates used by the nlux-cli to scaffold new projects. When you run commands like npx nlux-cli create nextjs my-app, these starters are used to build your application.
    • nextjs-apps: Mini-applications built with Next.js and NLUX that demonstrate advanced features like generative UI and markdown streaming.
    • ui-components: Examples of NLUX integration with various UI libraries, including mini chat apps built with shadcn/ui.
    • dev-examples: Internal samples and mini-apps primarily used for development and testing new features.
  8. Integrate NLUX React with nlbridge

    latest

    The @nlux/nlbridge-react package provides an adapter that enables integration between NLUX React and nlbridge.

    nlbridge is a lightweight middleware library that acts as a bridge between your front-end and language model APIs, providing a consistent interface to interact with various LLMs. This specific package is designed specifically for the React version of NLUX.

    If you are using Vanilla JavaScript instead of React, use the @nlux/nlbridge package instead.

  9. What is the `nlbridge` adapter for `NLUX JS`?

    latest

    nlbridge is a lightweight middleware library designed to bridge the gap between your front-end and various Large Language Model (LLM) APIs. It provides a consistent interface for interacting with different LLMs.

    The @nlux/nlbridge package specifically enables integration between NLUX JS (the vanilla JavaScript version) and nlbridge to build conversational AI interfaces.

  10. What are Sections in NLUX React?

    latest

    In the React version of NLUX, Sections are the primary building blocks that combine user interface components with the underlying business logic that drives them.

    Unlike standard React components, which are reserved for pure UI elements, Sections are higher-level abstractions that manage state, logic, and data flow in addition to rendering.