Building an AI Chatbot with Llama and NLUX

In this section, we'll show you how to build an AI chatbot with Llama (hosted on Hugging Face) and NLUX.

React JS ⚛️

How to connect to Llama on Hugging Face

Installation

NPM

npm install @nlux/hf-react

Yarn

yarn add @nlux/hf-react

PNPM

pnpm add @nlux/hf-react

Usage

import {
    useChatAdapter,
    llama2InputPreProcessor,
    llama2OutputPreProcessor,
} from '@nlux/hf-react';

const Component = () => {
    const adapter = useChatAdapter({
        dataTransferMode: 'stream',
        model: '<MODEL NAME OR URL>',
        systemMessage: '<SYSTEM MESSAGE FOR LLAMA>',
        preProcessors: {
            input: llama2InputPreProcessor,
            output: llama2OutputPreProcessor,
        },
        maxNewTokens: 800,
    });

    return (
        <AiChat adapter={adapter} />
    );
}

JavaScript 🟨

How to connect to Llama on Hugging Face

Installation

NPM

npm install @nlux/hf

Yarn

yarn add @nlux/hf

PNPM

pnpm add @nlux/hf

Usage

import {
    createAdapter,
    llama2InputPreProcessor,
    llama2OutputPreProcessor,
} from '@nlux/hf';

const adapter = createAdapter()
    .dataTransferMode('stream')
    .withModel('<HUGGING FACE MODEL NAME>')
    .withMaxNewTokens(800)
    .withInputPreProcessor(llama2InputPreProcessor)
    .withOutputPostProcessor(llama2OutputPreProcessor);

const aiChat = createAiChat().withAdapter(adapter);
aiChat.mount(rootElement);